CSS｜配置に関する指定

このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。

回り込み/float

ココでは回り込みに関する指定を説明します。よくあるパターンとして以下のパターンについて説明します。

• 写真等を掲載した際の文章の回りこみ
• スタイルシートでレイアウトした際のボックスの回りこみについて

文章の回り込み

それではサンプル画像に説明文を付けた場合を想定して、画像の左側に文章を回り込ませる（画像を右側に寄せる）パターンです。

<div>のボックスの中にサンプル画像があると仮定します。（テーブルの中に画像があっても同じです。）

<div>
<img src="sample.jpg" width=" " height=" " alt=" " style="float: right;">
<p>説明文</p>
</div>

もっと解りやすくいうと【float】は自分自身をどの位置に配置するか・・・・と考えた方がよいかも。

上記サンプルは画像を右に配置しましたが、【float:left】で左に配置されます。勿論、外部スタイルシートでの指定も可能です。

ボックスの回り込み

ボックス（box）の回り込みとは、主にスタイルシートで段組（レイアウト）する際に利用します。この原理を理解出来れば、テーブルレイアウトから脱皮出来ますよ。

ではboxAを右に配置してboxBを左に配置してみます。

boxA/Bにそれぞれ[id="box_a""box_b"]と指定した場合

#box_a{float: right;}
#box_b{float: left;} 

回り込みの解除/clear

レイアウト（段組）する際に、注意する事として【回り込みの解除】があります。よく忘れるので、スタイルシートでレイアウトする際は忘れず解除しましょう。

boxA・Bに【float:left】を指定してます。boxCは段を変更したいのですが、回り込み解除をせずに記入すると下記のようになります。

回り込みの解除には【clear: both;】を利用します。

細かくは【clear: left;】【clear: right;】とありますが【clear: both;】だけ知っていればOKです。

サンプル

#box_a{float: left;}
#box_b{float: left;}
#box_c{clear: both;}

尚、上記では指定していませんが、【float】を使用する際は【width】指定をしておきましょう。一部ブラウザでは上手く回り込みが出来ません。

• 目次
• 1
• 2
• 3
• 4
• 5
• 6
• 7