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

完成イメージ)

HTML5 レイアウト例

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

上記のHTMLドキュメント


  1. body要素に768pxの横幅(width)を指定し、上から順に、2つのボックスのheader要素に300px、aside要素に468pxの横幅を指定。
  2. 2つのボックスのnav要素に200px、main要素に568pxの横幅を指定。
  3. footer要素に768pxの横幅を指定しています。

スタイルシート記述例)

*{
margin: 0;
padding: 0;
}

body{
width: 768px;
}

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

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

aside{
float: left;
width: 468px;
height: 60px;
background: #ebebbd;
}

nav{
clear: both;
float: left;
width: 200px;
height: 250px;
background: #8e8e8e;
}

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

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

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

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

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

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


本文記述例)

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

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

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

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