レイアウトに重要な要素

ページレイアウトを作成する時、次のようなブロックレベル要素は特に重要です。

  • header、main、footer
  • nav、article、aside

ではWEBページを作る時、ページレイアウトとしてよく使われている聖杯型を、上記の内容を使って作ってみましょう。

 

聖杯型のレイアウト

一般的によく使われる聖杯型と言われるページレイアウトは次のようなものです。

聖杯型レイアウト

そしてこれを作成する為のHTMLソースコードは次のようなものです。

 

reset.css」は「リセットCSSについて(html5reset.css)」のページで解説している「HTML5 Doctor CSS Reset」を使用してみました。

block_level.css」は次のように作成しています。
(但し、CSSの設定を解り易くする為、余分なCSSを一部追加しています。)

また、1行目の「文字化け防止」コードはあまり知られてませんが、CSSのソースコードに日本語(漢字など)を既述した際、文字化けによる誤作動を防止するのに有効な手段です。

 

今回作成されたサンプルは次のようなものです。
 →表示サンプル