@blog.justoneplanet.info

■前置き

• 横2列（2カラム）レイアウトをしたいと考えている方対象
• テーブルレイアウトからCSSに移行してる方など対象
• HTMLを書いた事があればまぁ大丈夫かな

■見本

※あくまでも見本なので記載のソースとは異なります。

■HTMLソース（上記レイアウトをスタイル属性で：非推奨）

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: right; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

もしくは

<div style="width: 400px;">
<div style="background-color: orange">ヘッダー部分</div>
<div style="width: 100px; float: left; background-color: red">サイドバー</div>
<div style="width: 300px; float: left; background-color: yellow">コンテンツ部分</div>
<div style="clear: both; width: 400px; background-color: orange">フッター部分</div>
</div>

なんで非推奨なのかというとスタイルシートとは文章とデザインを分ける目的で作られたのに上記だとHTML内にある。しかもタグの中に書いてあって見にくい。スタイルシートを使うメリットが少ない。

■HTMLソース（ヘッド内へ記述タイプ）

headタグ内に以下の記述をする。

<style type="text/css">
#wrapper {
width: 400px;
}
#header {
background-color: orange;
}
#menubar {
float: left;
width: 100px;
background-color: red;
}
#content {
float: right;
width: 300px;
background-color:blue;
}
#footer {
clear: both;
background-color: orange;
}
</style>

bodyタグ内に以下の記述をする。

<div id="wrapper">
<div id="header">ヘッダー部分</div>
<div id="menubar">サイドバー</div>
<div id="content">コンテンツ部分</div>
<div id="footer">フッター部分</div>
</div>

まぁ、書き方は色いろあると思うけど。

■解説

• コンテンツの量（分量）に応じて縦の長さは変化します
• 最終的には<link rel=”stylesheet” type=”text/css” href=”” media=”” />や@importなどを使って外部のCSSファイルを読み込むようにしましょう。（上記、headタグ内のCSSは属性よりも編集しやすく論理構造から切り離されてはいますが、文章の論理構造を記述するべくHTMLファイル内にデザインがある事には変わりません）
• 上記ソースのメリットの一つとしてid=”content”をHTML上でmenubarより上に持っていける事があります。（音声ブラウザが上から読み上げる際、最初にコンテンツを読み上げてくれるため）