テンプレートをセンタリング(中央寄せ)

|

テーブルを使わずに、div構造でテンプレートを画面の真ん中に寄せる方法です。わかりやすいように最小限のソースしか書いていません。

(X)HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="temp">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>
</body>
</html>

CSSコード

div#temp {
margin:0 auto;
width:800px;
}

ポイントは、テンプレートを囲むdivのスタイルシートのmarginを「margin:0 auto」にすることと、テンプレートの横幅を指定すること、そしてhtmlのバージョンを指定する(ドキュメントタイプを宣言する)ことです。

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事