2カラムレイアウト − 外枠を作る
いよいよここからが、2カラムレイアウトのコーディング作業の本番です。 「2段組レイアウトのイメージ」では、「外枠を作り、その中に内枠を作る」と説明しました。CSSレイアウトの実作業は、この「外枠作り」から始まります。
まず外枠の幅を決めます。横幅100％の可変幅とするか、ピクセル数を指定し固定するか、固定した場合何ピクセルにするかを決めたら、そのようにHTMLタグとCSSを記述していきます。下の例では、横幅750pxの固定幅で説明します。なお、「HTMLの記述」で示されるタグはbodyタグ内の記述、「CSSの記述」で示されるものは外部CSSファイルへの記述となります。
また、ここでは左右両端に設ける余白を10pxとして、その指定も行っています。
HTMLの記述
<div id="outline">
<div class="outline-marign">
ここに左右の内枠を作ります。
</div><!-- end outline-marign -->
</div><!-- end outline -->
<div id="outline">
<div class="outline-marign">
ここに左右の内枠を作ります。
</div><!-- end outline-marign -->
</div><!-- end outline -->
CSSの記述
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
「<div id="outline">〜</div>」が外枠となり、その間に左右のスペースを作成します。CSSでは、「width:750px;」で横幅を750pxに、「text-align:left;」で枠内の文字揃えを左に指定しています（指定はなくても構いません）。 また、外枠の内側には別途DIVタグを設置し、左右の余白を10pxずつ設けています。
たったこれだけで外枠の指定は終わりです。例では枠をセンターに寄せるためbodyに「text-align:center;」、#outlineに「margin:0 auto;」と記述していますが、枠を左に寄せる場合、この記述は必要ありません。