2カラムレイアウト - 外枠を作る

CSSレイアウトはまず外枠を作ることから始まります。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

2カラムレイアウト - 外枠を作る

いよいよここからが、2カラムレイアウトのコーディング作業の本番です。 「2段組レイアウトのイメージ」では、「外枠を作り、その中に内枠を作る」と説明しました。CSSレイアウトの実作業は、この「外枠作り」から始まります。

まず外枠の幅を決めます。横幅100%の可変幅とするか、ピクセル数を指定し固定するか、固定した場合何ピクセルにするかを決めたら、そのように HTML タグとCSSを記述していきます。下の例では、横幅750pxの固定幅で説明します。なお、「HTMLの記述」で示されるタグはbodyタグ内の記述、「CSSの記述」で示されるものは外部CSSファイルへの記述となります。

また、ここでは左右両端に設ける余白を10pxとして、その指定も行っています。

HTMLの記述

<div id="wrap">
	<div id="inner">
		ここに左右の内枠を作ります。
	</div><!-- /inner -->
</div><!-- /wrap -->

CSSの記述

body { text-align:center; }
#wrap { width:780px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }

「<div id="wrap">~</div>」が外枠となり、その間に左右のスペースを作成します。CSSでは、「width:780px;」で横幅を780pxに、「text-align:left;」で枠内の文字揃えを左に指定しています(指定はなくても構いません)。また、外枠の内側には別途DIVタグ(id="inner")を設置し、左右の余白を10pxずつ設けています。

たったこれだけで外枠の指定は終わりです。例では枠をセンターに寄せるためbodyに「text-align:center;」、#wrapに「margin:0 auto;」と記述していますが、枠を左に寄せる場合、この記述は必要ありません。