■前置き
- 横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より上に持っていける事があります。(音声ブラウザが上から読み上げる際、最初にコンテンツを読み上げてくれるため)