Lesson 05 テキストブロックの指定で表現するレイアウト - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 5

テキストブロックの指定で 表現するレイアウト

	制作・文			境　裕司
＞	To Use			CSS
＞	Browser			IE 7over | Firefox 3over | Safari 4over

CSSには「ボックスモデル」という概念があり、Webページの構成要素を1つのボックス（箱）として扱う。行や段落に対して、サイズやマージンなどを指定するだけで、段組みに近い表現が可能。

Webページの段組レイアウトには、floatプロパティを使ったテクニックが主流になっているが、テキストブロックの指定だけでもページをレイアウトすることができる。CSS にはボックスモデルという重要な概念があり、Webページを構成するすべての要素をボックス（箱）として捉えることで、効率的なページの整形が可能になる。ボックスは、コンテンツの領域とパディン グ（内側の余白）、ボーダー（枠線）、マージン（外側の余白）で構成されており、余 白については上下左右それぞれに値を指定することができる【1-1】。


【1-1】テキストブロックの指定でレイアウト表現する場合、CSSボックスモデルの概念を理解していることが大前提となる

コンテンツ領域の幅や高さは、widthプロパティとheightプロパティで指定するが、"見た目"のコンテンツの幅は、ボーダーやパディング、マージンなどの値が含まれる。この仕様は通常の寸法指定とは異なり直感的ではないが、CSSの基本になっているので理解しておこう。文章のまとまりである段落もボックスとして扱われるので、段落と段落の間隔（マージン）もレイアウトのための重要な指定となる【2-1】【2-2】。


【2-1】

【2-2】

【2-1】【2-2】"見た目"のコンテンツの幅とCSSで指定するコンテンツの幅（width）は異なるので注意する。段落間もマージンによって指定される

サンプルページは、とてもシンプルな構成になっている【3-1】【3-2】。画像には「im」、段落にはそれぞれ「tm」と「hm」というクラス名が指定されている。さらに、これらの要素を＜div id="content"＞～＜/div＞でグループ化してある。


【3-1】


【3-2】

【3-1】【3-2】サンプルページは、img要素で指定された画像、2つの段落、address要素で構成。画像と2つの段落には、クラス名が指定されている

すべての要素をグループ化したcontent ボックスに対して、width:760pxを指定し、幅を760ピクセルに固定。このとき、 contentボックスは「親」、含有する画像や段落などは「子」という関係になっている【4-1】。【4-2】の3行目にあるmargin:0 autoは、contentボックスを中央揃えにする指定である。


【4-1】


【4-2】

【4-1】【4-2】contentボックス（画像、2つの段落、address要素を含む）の幅を760ピクセルに固定

最初の段落（クラス名：tm）に対して、margin:0 0 0 240pxを指定すると、左側のマージンに240ピクセルが適用され、同サイズの空白が出来上がる。ボックス全体の幅は後続する段落の幅と変わらな いが、左マージンが指定されたことで、520ピクセルのボックス（全体幅760px - 左マージン240px）が表示されているように見える【5-1】【5-2】。


【5-1】


【5-2】

【5-1】【5-2】段落（クラス名：tm）に対して左側のマージンに240ピクセルが適用され、大きな空白がつくられる

最上部に配置されている画像の領域と段落の左マージン（余白）を同じ色で塗りつぶしてみると、擬似的な段組みが表現できていることに気づくはずだ。このように、テキストのブロックに対して、マージ ンを指定するだけで、見た目の印象を変えることが可能である【6-1】。


【6-1】

ページ全体（body要素）の背景色と段落のコンテンツ領域、フッタ領域（address要素）の背景色を同じ値にすれば、画像の領域と段落の左マージン以外、すべての地がつながり鉤括弧（「）タイプのレイ アウトが表現さる【7-1】【7-2】。複数のテキストブロックで構成されているページは、左揃え、中央揃え、右揃えで整形されるが、特定のブロックだけにマージンを指定し、間隔をつくり、背景色によって領域のまとまりを形成することで、シンプルなレイアウト表現が可能になる。背景画像と組み合わせれば、さらに視覚表現を向上させることができる【7-3】。


【7-1】


【7-2】

【7-1】【7-2】contentボックスの背景色は白（#fff）、それ以外は青（#048）が指定されている。マージンの領域は透明なので、親ボックスの背景色（白）が表示される


【7-3】マージンを指定した段落に対して、（上部に配置されている画像とつながるような）背景画像を配置すれば、凝ったレイアウト表現も可能