HTML5のレイアウト

HTML5では、要素自体にドキュメントの構造的な意味を持つheader要素nav要素main要素aside要素footer要素などが追加されたことでブラウザや検索エンジンなどに、単なるレイアウトだけでなくそれぞれのボックスの意味や目的を伝えることができるようになりました。

HTML5 例)

HTML5 レイアウト例

上記のHTMLドキュメント

ソース 例)

<body>
<header>header</header>
<nav>nav</nav>

<main role="main">main</main>
<aside>aside</aside>

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

※記述例の便宜上各ボックスに高さと背景色を設定しています。
※HTML5ではmain要素はドキュメントのメイン・コンテンツであることを表しますが、ブラウザなどユーザー・エージェントがこれを実装するまでrole="main"をあわせて記述します。


スタイルシート 例)

*{
margin: 0;
padding: 0;
}

body{
width: 600px;
}

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

header{
display:block;
width: 600px;
height: 60px;
background: #c0c0c0;
}

nav{
width: 600px;
height: 30px;
background: #8e8e8e;
}

main{
float: left;
width: 450px;
height: 250px;
background: #f5f5dc;
}

aside{
float: left;
width: 150px;
height: 250px;
background: #ebebbd;
}

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

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

例)

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

おまけ

HTML4.01のレイアウト 例)

HTML4.01 レイアウト例

上記のHTMLドキュメント


ソース 例)

<body>
<div id="header">id="header"</div>
<div id="nav">id="nav"</div>

<div id="main">id="main"</div>
<div id="aseide">id="aside"</div>

<div id="footer">id="footer"</div>
</body>

※記述例の便宜上各ボックスに高さと背景色を設定しています。