ブロックレベル要素

ページ上の文章の塊を一つに纏める為、次のような要素が用意されています。
これらをブロックレベル要素と言い、ページレイアウトに欠かせない要素です。

・header、main、footer
・nav、article、aside

また、文章の脈絡を伝える時「第〇章-第△節-第×項」のように、文章をいくつかの塊として纏める時は「section」要素が用意されてます。

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

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

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

「reset.css」はこちらを参照しました。
「block_level.css」は次のように作成しています。
(但し、見栄えをよくするために不要なCSSも一部入れています。)

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

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