https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

画像の横に文字を回り込ませる

{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>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

画像に枠線を入れる
画像の周りに余白を入れる
画像に並ぶ文字の位置を指定する
画像の横幅、高さを指定する
画像を切り抜く
画像のマスクを指定する

スタイルシート一覧のページに戻る