画像と文字要素を、それぞれ別のブロックレベル要素に振り分けてレイアウトするスタイルをやってみよう。いわゆる段組レイアウトという状態ができあがる。画像と文字要素を完全に切り分けたスタイルはすっきりしていて読みやすいスタイルでもある。
■２段組レイアウト
------------------------------
サンプルページ
3.html
（サンプルページは別ウィンドーで開いてください。
ブラウザのソースを見るコマンドでコードを確認してください。）
------------------------------
まず各段を形成するpタグを2セット用意する。それぞれのタグには役割を区別するためidを降っておく。作例は左のpタグをid="left"、右のpタグをid="right"としている。最後にdivタグでそれぞれの段をひとまとめにくくる。次に左のpタグの中へ画像を、右のpタグへは文字要素を入れる。
CSSでは各段のidに対して、左段と右段の両方にfloat:leftを、与えている。これで右段が左段の真横に沿おうとするので、２段が並列する。このとき全体をまとめるdivの幅が、左右の段の幅全体よりも少ないと、右の段が真横に来られず、下段に折り返してしまうので注意したい【図1】。画像の入っている段には幅サイズを与えなくても、画像の幅以下に段が解釈されることはないが、文字だけの段は幅のサイズ指定が必要だ。サンプルのソースでも確認できるように、左段には文字と接する右側に12ピクセルの余白を与え、文字と画像の位置を適度に離している。
 |
| 【図１】 float:leftで要素を並列させるためには、全体の幅設定が要素の幅の合計よりも大きくなければ並んでくれない |
--------サンプルソース----------------------
p#left {
float: left;
font-size: 10px;
line-height: 130%;
color: #4A4A4A;
margin-right:12px;
}
-----------------------------------------
■上下に分ける
------------------------------
サンプルページ
4.html
（サンプルページは別ウィンドーで開いてください。
ブラウザのソースを見るコマンドでコードを確認してください。）
------------------------------
画像と文字をページの上下に分けてレイアウトすることも頻繁にあるだろう。特に画像にキャプションの要素が入るときは、単なる改行指定で両者を分けずに、それぞれ別のブロックレベル要素内に整理してレイアウトするのが基本だ。
ちょっと細かいが、キャプションが画像にくっついてしまわないように、この作例では画像の下辺に5ピクセルの余白を入れる工夫をしている。
--------サンプルソース----------------------
img {
border: 2px solid #ffffff;
margin-bottom: 5px;
}
-----------------------------------------
また、本文に比べて文字サイズの小さなキャプションには、本文ほどの行間は必要ないので、上段のスタイル設定でより狭いline-heighを指定している点もポイントになる。なんだかややこしく感じられるかもしれないが、ブロックを組み合わせて家を造るような面白みを感じてくれると幸いだ。
--------サンプルソース----------------------
p#first {
width: 182px;
font-size: 10px;
line-height: 130%;
color: #4A4A4A;
padding-top: 0px;
}
-----------------------------------------
