現在地: Home » 初級ホームページ作成講座：目次 » 配置に関する指定
配置に関する指定
このページでは、初心者でも比較的使いやすいものだけを抜粋しています。また、スタイルシートの指定に関しては「外部CSS」に記述しているものとします。その他の記述方法は「スタイルシートの定義方法」を参照して下さい。
回り込み/float
ココでは回り込みに関する指定を説明します。よくあるパターンとして以下のパターンについて説明します。
- 写真等を掲載した際の文章の回りこみ
- スタイルシートでレイアウトした際のボックスの回りこみについて
文章の回り込み
それではサンプル画像に説明文を付けた場合を想定して、画像の左側に文章を回り込ませる（画像を右側に寄せる）パターンです。
<div>のボックスの中にサンプル画像があると仮定します。（テーブルの中に画像があっても同じです。）
サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。
サンプル、サンプル、サンプル。
<div> <img src="sample.jpg" width="●" height="●" border="0" style="float: right;"> <p>説明文</p> </div>
もっと解りやすくいうと【float】は自分自身をどの位置に配置するか・・・・と考えた方がよいかも。
上記サンプルは画像を右に配置しましたが、【float:left】で左に配置されます。勿論、外部スタイルシートでの指定も可能です。
ボックスの回り込み
ボックス（box）の回り込みとは、主にスタイルシートで段組（レイアウト）する際に利用します。この原理を理解出来れば、テーブルレイアウトから脱皮出来ますよ。
ではboxAを右に配置してboxBを左に配置してみます。
html上はboxAが先に記述されています。
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】指定をしておきましょう。一部ブラウザでは上手く回り込みが出来ません。
高性能サーバ
低価格サーバ
無料ホームページスペース
