HTML5 CSSテンプレート 3ボックス(header、main、nav)-footer

完成イメージ)

HTML5 レイアウト例

450px×234pxに縮小して表示しています。

上記のHTMLドキュメント


  1. body要素に768pxの横幅(width)を指定し、header要素とmain要素に568pxの横幅を指定し、それら2つの要素の右側に回り込むnav要素に200pxの横幅を指定。
  2. footer要素に768pxの横幅を指定しています。

スタイルシート記述例)

*{
margin: 0;
padding: 0;
}

body{
width: 768px;
}

header,footer,nav,main,section,article,aside{
display:block;
}

header{
	float: left;
	width: 568px;
	height: 60px;
	background: #c0c0c0;
}

nav{
	float: right;
	width: 200px;
	height: 310px;
	background: #8e8e8e;
}

main{
	float: right;
	width: 568px;
	height: 250px;
	background: #f5f5dc;
}

footer{
	clear: both;
	width: 768px;
	height: 60px;
	background: #c0c0c0;
}

display:block;
HTML5ではブロック・レベル要素、インライン・レベル要素といった要素の分類が、コンテンツ・モデルによるカテゴリの分類に変更されたため、新たに追加された要素が未対応のブラウザのためにレイアウトに用いる要素をブロック・レベル要素としてレンダリングするようにCSSで明示的に宣言する必要があります。

※横幅(width)を変更する場合は、3つのボックスで構成する要素のカラムで指定する横幅の合計が、body要素で指定した横幅と、1つのボックスで構成する要素のカラムで指定している横幅になるようそれぞれ指定して下さい。

※高さ(height)は、テンプレート表示の便宜上での指定です。必要がなければ、デフォルト値がautoなので指定しなくても良いです。特に、コンテンツにより、高さが変動するmain要素、aside要素のカラムはpx値で指定しない方が良いと思います。

※背景色(background)は、テンプレート表示の便宜上での指定です。変更、または、削除して下さい。


本文記述例)

<body>
<header>...</header>

<nav>...</nav>

<main role="main">...</main>

<footer>...</footer>
</body>

※HTML5ではmain要素はドキュメントのメイン・コンテンツであることを表しますが、ブラウザなどユーザー・エージェントがこれを実装するまでrole="main"をあわせて記述します。