初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL９. 配置に関する設定　その２ ★ 回り込みの指定と解除

１．回り込み指定

「回り込み」については、HTML上で画像にテキストを回り込ませるスクリプトについて解説した時に説明しましたので、そちらを参照して頂けば分かると思いますが、ここではこれと同じことをCSSで設定する方法を紹介します。

float: <値>;

このプロパティに<値>として指定できるのは、以下の3つです。

left ... これが指定された要素は左に固定され、それに続く要素が右側に回り込んで表示される。

right ... これが指定された要素は右に固定され、それに続く要素が左側に回り込んで表示される。

none ... 回り込まずに表示される。（デフォルト）

ex. 

img { float: left;

margin-right: 30px;

margin-bottom: 20px; }

回り込みそのものに関しては表示はHTMLの時と同じですが、HTMLでは「vspace=" " 」「hspace=" "」で指定していた画像回りの空間を「margin-left (right、top、bottom):」を使って個別に指定できるようになるので、例えば上の例のように画像の上や左の空間を指定せずに0として、画像の端をテキストの上端、左端と揃えることも可能になります。（「vspace=" " 」「hspace=" "」では、左右、上下に同じ幅の空間が空いてしまうので、このようにテキストと揃えることができませんでした。）

また、CSS外部ファイルで<img>に以下のようなクラスセレクタを使って、それぞれ左寄せ、右寄せとマージンを設定しておけば、サイト内全ての画像にクラスセレクタを呼び出すだけで、これを適用することが出来るようになります。これにはHTMLを簡略化できるというメリットがあることは言うまでもありません。

なお、CSSでの回り込みがHTMLと違うところは、画像やテーブルばかりではなく、boxが形成されている要素ならば全て回り込み対象にできるという点で、従って「float:」を使っていくつものboxをレイアウトすることも可能です。boxによるレイアウトは「float:」の他に、「position:」を使っても出来ますが、どちらの場合も表示する内容によって細かい設定を組み合わせる必要があるので、それについては後の章で解説することにします。

２．回り込み解除

回り込みを指定した画像などの要素が大きいために、次に来る要素とレイアウト上のバランスが取れないことがあります。そこで、回り込んで来ている要素を、適当なところで回り込ませた要素の下へ送るのが解除指定です。

clear: <値>;

このプロパティに<値>として指定できるのは、以下の4つです。

left ... 「float: left;」の回り込みを解除。

right ... 「float: right;」の回り込みを解除。

both ... 「float: left;」、「float:right」ともに回り込みを解除。

none ... 回り込みを解除しない。（デフォルト）

ex1. br { clear: right; }

ex2. p.clear { clear: both; }

「clear:」の指定は、ex1.のように強制改行させる<br>に設定して、回り込み解除したい所にＨＴＭＬ上で<br>を入れても良いですし、ex2.のように<p>に回り込み解除する設定を持ったクラスセレクタを別に作っておいて、下に送りたい最初の段落に<p class="clear">で解除指定を呼び出すという方法も考えられます。場合に応じて工夫してみて下さい。

初級篇2.VOL9. 配置に関する設定・その1 <<

>> 初級篇2.VOL9. 配置に関する設定・その3