画像の横に文字を表示する方法についてです。
テーブルによる方法
①1行2列のテーブルを作ります。
ボーダー・セル内余白・セル内間隔を0にしておきます。
②右か左のセルに画像を張り付けます。
③画像の入ったセルの幅などのサイズを指定します。
④もう片方のセルに文字を入れていきます。
簡単な方法です。
ソースの例
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”300″><img src=”gazou1.jpg” width=”300″ height=”200″ /></td>
<td valign=”top”>テスト文字列1<br/>テスト文字列2</td>
</tr>
</table>
HTML align属性で指定
これは古典的な方法です。
W3C非推奨の方法なので注意です。
ソースの例
<p>
<img src=”gazou1.jpg” width=”300″ height=”200″ align=”right” />
テスト文字列1<br/>
テスト文字列2<br/>
</p>
floatによる方法
例えばCSSで
画像にfloat:right;
文字にfloat:left;
と指定しても回り込みがなかなかうまくいきません。
ほかにもプロパティを指定しなくてはならないようですが、大変なのでテーブルの方法をお勧めします。
広告
関連コンテンツ
