ページのレイアウト
HTML5で2カラムレイアウトを作成
レイアウト作成の前に
サイト名、各ファイル名とディレクトリー構造を決めておきます。
- サイト名：Samplesサイト
- HTMLファイル名：example.html
- CSSファイル名：style.css
- HTMLファイルを置く同じ場所に”css”ディレクトリー（フォルダ）を作成してCSSファイルを置きます。
- 同じく、同じ場所に”jp”ディレクトリーを作成、ここにはJavaScriptファイルを置きます。
取りあえず旧バージョン仕様で
まず、旧バージョンで一般的に使われていた方法で2カラムのレイアウトを作成してから、HTML5でのレイアウトに修正します。ファイル名をHTML文書は”Sample.html”、スタイルシートは”samplestyle.cssとしておきます。
<html>
<head>
<meta charset="utf-8">
<title>Sampleサイト</title>
<link href="css/samplestyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="siteTitle">
header：サイトタイトル領域
</div>
<div id="nav">
nav：グローバルナビゲーション領域
</div>
<div id="main">
main：主コンテンツ領域
</div>
<div id="side">
aside：サイドバー、nav要素のグループ、広告等の領域
</div>
<div id="footer">
footer：フッター領域
</div>
</body>
</html>
上記HTMLに適用している下記スタイルシートでは、分かりやすくするために”height”と”background-color”を設定しています。また、#maintは左に、#sideは右にfloatさせています。
body,#siteTitle,#nav,#footer{
width: 1024px;
}
#siteTitle{
height:100px;
background: #faa;
}
#nav{
height:30px;
background-color:#d8bfd8;
}
#main{
width: 724px;
float: left;
height:100px;
background: #afa;
}
#side{
width: 300px;
float: right;
height: 100px;
background: #aaf;
}
#footer{
clear: both;
height: 40px;
background: #ffa;
color:gray;
}
上記のHTML文をHTML5仕様に修正します。
修正するといってもdiv要素をHTML5のセクショニングコンテンツの要素に置き換えるだけなのですが、セクショニングコンテンツについてはこちらを参照してください、修正するのはHTML文だけです。
HTML5仕様に修正
<head>
<meta charset="utf-8">
<title>Sampleサイト</title>
<link href="css/samplestyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="siteTitle"> ← <header id="siteTitle">に変更
header：サイトタイトル領域
</div> ← </header>に変更
<div id="nav"> ← <nav id="nav">に変更
nav：グローバルナビゲーション領域
</div> ← </nav>に変更
<div id="main"> ← <main id="main">に変更
main：主コンテンツ領域
</div> ← </main>に変更
<div id="side">
aside：サイドバー、nav要素のグループ、広告等の領域
</div>
<div id="footer"> ← <footer id="footer">に変更
footer：フッター領域
</div> ← </footer>に変更
</body>
</html>
修正後のsampleを見るにはここをクリック
次に、このレイアウトでページを作って行くことにします。