スタイルシートテクニックの基本

CSSレイアウト

#header：ロゴやナビゲーションなどを含む
#sidebar：関連リンクや情報を含む
#content：テキストの本文とページのフォーカスを含む
#footer：著作権情報、クレジット、付加的なリンクなどを含む

マークアップ

方法A:サイドバーの浮動化

CSS

ヘッダとフッタのスタイル定義

#header {
	padding: 20px;
	background: #ccc;
	}
	
#footer {
	padding: 20px;
	background: #eee;
	}

サイドバーの浮動化

floatプロパティを使用して、メインコンテンツをおさめた<div>のどちらか一方の側に#sidebarを配置する。
ここではコンテンツの右側にサイドバーを配置しているが、反対側でも同様。

★#sidebarを浮動させるカギは、マークアップ上で#contentの前に記述する必要があるということである。このようにすると、サイドバーの先頭はコンテンツ領域の先頭と揃う。 floatプロパティを#sidebarに追加し、30パーセントの幅と背景色を設定する。

#header {
	padding: 20px;
	background: #ccc;
	}
#sidebar {
	float: right;
	width: 30%;
	background: #999;
	}
#footer {
	padding: 20px;
	background: #eee;
	}

#contentに右側のカラムと同じ幅の右マージンを設定すると、#sidebarがうまく収まる適切なスペースを設けることができる。

#header {
	padding: 20px;
	background: #ccc;
	}
#sidebar {
	float: right;
	width: 30%;
	background: #999;
	}
#content {
	margin-right: 34%;
	}
#footer {
	clear: right;
	padding: 20px;
	background: #eee;
	}

★ここでは、カラムにパーセンテージ幅を使用し、基本的に柔軟な幅のレイアウトを作成している。（カラムはユーザのウィンドウ幅に応じて伸縮する）。固定幅のレイアウトではカラム幅にピクセル単位を使用することもできるが、どちらか一方のカラムにマージンやパディングを追加する場合は、Windows版IEがCSSボックスモデルを誤って解釈することを認識しておく必要がある。

▲このページのトップへ

方法B：ダブルフロート

方法Aを使用する場合、マークアップ上でサイドバーをコンテンツよりまえんい配置する必要がある。CSSをサポートしていない閲覧環境では、メインであるページコンテンツの前にサイドバーのコンテンツが表示され（または読み上げられ）るため、理想的とは言えない。
floatメソッドを使用しながらこの問題を回避するにはマークアップ上でコンテンツとサイドバーの両<div>要素の場所を入れ替え、CSSを使ってそれぞれを反対側に浮動させる。

マークアップ

CSS

#header {
	padding: 20px;
	background: #ccc;
	}
#content {
	float: left;
	width: 66%;
	}
#sidebar {
	float: right;
	width: 30%;
	background: #999;
	}
#footer {
	clear: both;
	padding: 20px;
	background: #eee;
	}

★二つの<div>を互いに浮動させることにより、ソースの記述順において、マークアップ上で理想的な順序となり、しかも結果は方法Aと同じとなる。

▲このページのトップへ

方法C：コンテンツの浮動化

ひとつのfloatプロパティを使用してマークアップ上でサイドバーの前にコンテンツを配置する別の方法。コンテンツを収めた<div>要素を左に浮動させ、100パーセント未満の幅を設定する。・・・①
サイドバーはコンテンツが使用しない残りの幅（ここでは34パーセント）に埋め込まれるので、その幅を定義する必要がない。
浮動化したコンテンツの後ろにサイドバーの背景色が透けて見えてしまうのを回避するためには、コンテンツ領域の幅と同じ左マージンをサイドバーに追加する。・・・②
実際には、カラム間に多少の余白を追加するために、マージンの数値はコンテンツの幅より若干広くする。

CSS

#header {
	padding: 20px;
	background: #ccc;
	}
#content {
	float: left;　・・・①
	width: 66%;
	}
#sidebar {
	margin-left: 70%;　・・・②
	background: #999;
	}
#footer {
	clear: left;
	padding: 20px;
	background: #eee;
	}

背景色を削除した場合

背景色がデザイン上必要ない場合は②の左マージンは不要。
#sidebar宣言全体も削除できる。
この場合、二つのカラムは、ページに指定されたデフォルト背景色を共有することになる。

CSS

#header {
	padding: 20px;
	background: #ccc;
	}
#content {
	float: left; 
	width: 66%;
	margin-right: 6%;　・・・若干の右マージンを追加する。
	}
#footer {
	clear: left;
	padding: 20px;
	background: #eee;
	}

▲このページのトップへ

方法D:ポジショニング

フッタの問題

floatプロパティを用いてカラムを浮動化すると、コンテンツまたはサイドバーのカラムの高さに関係なく、clearプロパティによってフッタをブラウザウィンドウの幅全体に拡張することができる。
positionプロパティを使用した場合、サイドバーがコンテンツ領域より長い場合には、フッタと重なってしまう。
解決案として・・・
コンテンツ領域と同じ右マージンをフッタに設定し、コンテンツとフッタを通り過ぎて右側カラムを広げる。
ちょっと変だが、サイドバーとフッタの重なりは回避され、きちんと機能する。

CSS

body {
	margin: 0;
	padding: 0;
	}
#header {
	heigh: 40px;
	background: #ccc;
	}
#content {
	margin-right: 34%;
	}
#sidebar {
	position: absolute;
	top: 40px;
	right: 0;
	width: 30%;
	backgorund: #999;
	}
#footer {
	margin-right: 34%;
	padding: 20px;
	background: #eee;
	}

重なった例	回避策

▲このページのトップへ

三段組レイアウト

positionプロパティを使用し、三番目のカラムに設定したい幅として、コンテンツおよびフッタ領域に左マージンを追加する。
追加サイドバーは、positionプロパティをもう一度使用して配置することになるので、好きな場所に置くことができる。

マークアップ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
</head>

<body>
<div id="header">
    <h1>Beautifuldays</h1>
</div>
<div id="content">
    <h2>美しき日々</h2>
    <p>・・・コンテンツ・・・</p>
    <h2>オールイン</h2>
    <p>・・・コンテンツ・・・</p>
</div>
<div id="sidebar">
    <ul>
        <li>イ・ミンチョル</li>
        <li>キム・ヨンス</li>
        <li>カン・ナレ</li>
        <li>キム・セナ</li>
        <li>イ・ミンジ</li>
    </ul>
</div>
<div id="sidecolumn>
<p>映画</p>
    <ul>
        <li>JSA</li>
        <li>我が心のオルガン</li>
        <li>夏物語</li>
        <li>甘い人生</li>
        <li>中毒</li>
        <li>HERO</li>
        <li>ランナウエイ</li>
        <li>バンジージャンプする</li>
        <li>誰にでも秘密はある</li>
        <li>マリ物語</li>
    </ul>
<p>ドラマ</p>
    <ul>
        <li>白夜3.98</li>
        <li>美しい彼女</li>
        <li>オールイン　運命の愛</li>
        <li>Happy Together</li>
        <li>アスファルトの男</li>
        <li>恋の香り</li>
        <li>ポリス</li>
        <li>美しき日々</li>
    </ul>
</div>
<div id="footer">
    <p>・・・フッター・・・</p>
</div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	}
#header {
	heigh: 40px;
	background: #ccc;
	}
#content {
	margin-right: 24%;
	margin-left: 24%;
	}
#sidecolumn {
	position: absolute;
	top: 40px;
	left: 0;
	width: 20%;
	background: #999;
	}
#sidebar {
	position: absolute;
	top: 40px;
	right: 0;
	width: 20%;
	background: #999;
	}
#footer {
	margin-right: 24%;
	margin-left: 24%;
	padding: 20px;
	background: #eee;
	}

★値にパーセンテージを使用しているため、ブラウザの幅に比例して伸縮する。これらのカラムの一部または全部にピクセル幅を割り当て、固定幅のレイアウトを作成することもできる。

▲このページのトップへ

ボックスモデルの問題

Windows版InternetExplorer5および5.5の、CSSボックスモデルのあやまった解釈により、widthプロパティだけでなく、パディングやボーダーを追加すると、コンテナの幅を間違って計算する。

このボックスモデルの問題はIE6では解決されている。IE6では、文書方宣言に基づきレンダリングモードを切り替える機能が実装されたため。後方互換モードではIE5同様の解釈がなされるが、標準互換モードではただし解釈がなされる。XHTML文書においてXML宣言を記述した場合、必ず後方互換モードでレンダリングされるので注意すること。
XHTML使用においては、エンコーディングがUTF-8でない場合、特にXML宣言が強く求められているが、記述しなくとも文法違反ではない。このため、IE6の挙動を考慮のうえXML宣言を記述しないという判断がなされるケースが出てくる。

正しいボックスモデルの意図するところ

widthプロパティは常にボックスのコンテンツ領域を定義し、パディングとボーダーはその値に追加する。

例：200ピクセル幅のボックス(サイドバー）。両端に10ピクセルのパディングと、5ピクセルのボーダーを持つ。

CSS

#sidebar {
	width: 200px;
	padding: 10px;
	border: 5px solid gray;
	}

実際にサイドバーが必要とする物理的領域は230ピクセルとなる。

Windows版IE5における誤った計算

CSS

#sidebar {
	width: 200px;
	padding: 10px;
	border: 5px solid gray;
	}

widthの200ピクセルにパディングとボーダーが含まれる。ゆえに、必要な物理領域が200ピクセルとなる。

ボックスモデルハック

Windows版IE5について「230」ピクセル（両端のパディングとボーダーを含めた総計）の幅を指定し、正しい解釈がなされるブラウザを対象とした200ピクセルで上書きする。

CSS

#sidebar {
	width: 200px;
	padding: 10px;
	border: 5px solid gray;
	width: 230px;　　/* IE5/Win用の値 */
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 200px;　　/* 実際の値 */
	}

Be Nice to Opera5

すべてのブラウザで正しい値が提供されるよう、さらに以下を追加する。
子どもセレクタ「>」は、Windows版IEに対応していない。

#sidebar {
	width: 200px;
	padding: 10px;
	border: 5px solid gray;
	width: 230px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 200px;　　/* 実際の値 */
	}
html>body #sidebar {
	width: 200px;
	}

▲このページのトップへ

垂直方向のストレッチ

各カラムに固有の背景色を設定したい場合、含まれているコンテンツの量に応じて、二つの等しい高さのカラムがあるレイアウトを作成するのが難しくなる。

カラムを等しい長さで表示する方法

2ピクセルの高さの背景画像を作り、垂直方向にタイリングする。

CSS

body {
	background: #ccc url(tile.gif) repeat-y 50% 0;
	}

「50% 0」の部分で背景画像の描画位置を指定。この場合はブラウザウィンドウの左端から50パーセント（＝中央揃え）、上端から0ピクセル。

カラムでボーダー、パディング、マージンを使用する場合は、ボックスモデルハックで補う必要がある。これを避けるためには、widthプロパティとborderプロパティまたはpaddingプロパティを同じ宣言の中で同時に使用しないこと、または、背景画像に透過的に配置することで解決できる。

▲このページのトップへ