|
{float:位置;}
で画像の横にテキストを回り込ませることができます。
■ 画像の表示位置
画像を表示できる位置は以下のとおりです。
| 位置 | 説明 |
| none | 画像の表示位置は指定しません。（デフォルト） |
| left | 画像が左に表示されテキストが右に回り込みます。 |
| right | 画像が右に表示されテキストが左に回り込みます。 |
【ブラウザ表示】
 画像の右に文字が回り込んでいます。
画像の左に文字が回り込んでいます。
ソース
<p>
<img src="./image/posttorack.gif" alt="画像" class="sample2">
画像の右に文字が回り込んでいます。
</p>
<p>
<img src="./image/posttorack.gif" alt="画像" class="sample3">
画像の左に文字が回り込んでいます。
</p>
外部ファイル
img.sample2{float:left;}
img.sample3{float:right;}
<body>～</body>に直接記入する場合
<p>
<img src="./image/posttorack.gif" alt="画像" style="float:left;">
画像の右に文字が回り込んでいます。
</p>
<p>
<img src="./image/posttorack.gif" alt="画像" style="float:right;">
画像の左に文字が回り込んでいます。
</p>
■ 画像の横に回り込んだ文字を解除する
画像の横に回り込んだ文字を解除したい場合は
{clear:both;}で回り込みの解除をしてやります。
【ブラウザ表示】
画像の右に文字が回り込んでいます。
文字の回り込みが解除され画像の下の行に来ました。
ソース
<img src="./image/posttorack.gif" alt="画像" class="sample2">
画像の右に文字が回り込んでいます。
<p class="kaijo1">
文字の回り込みが解除され画像の下の行に来ました。
</p>
外部ファイル
img.sample2{float:left;}
p.kaijo1{clear:both;}
<body>～</body>に直接記入する場合
<img src="./image/posttorack.gif" alt="画像" style="float:left;">
画像の右に文字が回り込んでいます。
<p style="clear:both;">
文字の回り込みが解除され画像の下の行に来ました。
</p>
■ その他の項目
・
画像に枠線を入れる
・
画像の周りに余白を入れる
・
画像に並ぶ文字の位置を指定する
・
画像の横幅、高さを指定する
・
画像を切り抜く
・
画像のマスクを指定する
スタイルシート一覧のページに戻る
|
