スタイルシート|配置に関する指定|たったこれだけタグ講座

Loading

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

回り込み/float

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

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

文章の回り込み

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

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

サンプル

サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル、サンプル。

サンプル、サンプル、サンプル。

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

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

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

Back To Top

ボックスの回り込み

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

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

boxA
boxB

html上はboxAが先に記述されています。

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

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

Back To Top

回り込みの解除/clear

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

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

boxA
boxB
boxC

このようになります。

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

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

サンプル

boxA
boxB
boxC

このようになります。

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

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

Back To Top

スポンサードリンク

CSS.Design sample Home