ページ定義タグと構造化タグとdivタグの関係

本記事のポイント

htmlとheadとbodyというページ定義タグで定義されたコンテンツ部に対して、構造化タグ(header, nav, article, aside, footer)でWEBサイト全体を「ヘッダー領域」「ナビゲーション領域」「コンテンツ領域」「サイドバー領域」「フッター領域」の5つに区切ってレイアウトし、コンテンツの意味のカタマリをdivタグにid属性とclass属性を定義します。

HTMLの変遷に置いてかれた・・・

僕は2000年にジャカルタからバリ島に引越し、会社立ち上げや家具・雑貨の輸出業務に伴う仕入れ・梱包等肉体労働で多くの時間を取られるあまり、WEBの技術変遷を追うことができない時期がありました。

ちょうどその時期に世間ではHTMLのバージョンアップが急激にブーストし、1999年のHTML4.01でHTMLは構造の定義に特化し、装飾はCSSに任せるという大きな方向転換がなされ、HTMLタグ自身に属性を書くという時代からスタイルシートの時代に入りました。

2001年には次世代のXHTML1.1が出されるともうわけわかめ状態で、文書型定義(Document Type Definition)が複数乱立し、しかも記述方法が長いという弊害が発生してきましたが、2014年に正式にW3Wの標準規格となったHTML5ではこのDTDの出だし部分が短いので済みます。

DOCTYPEは「Strict(厳密な)」「Transitional(移行期)」「Frameset(フレームセット用)」の3種類ありまして、書き方によってブラウザは「互換モード」「標準準拠モード」に切り替わり、表示状態に差が出てきます。

ページ定義タグと構造化タグ

僕は1994年頃にWindows3.1搭載のIBM PCを購入して趣味のインド音楽のサイトを立ち上げたのですが、htmlとheadとbodyの3つは当時から既に存在するページ定義タグであり、全体をメタデータ部(HTMLドキュメント自身の情報)とコンテンツ部に分ける目的があります。headタグ内の情報はブラウザ上表示されません。

ページ定義タグで定義されたコンテンツ部に対してHTML5では構造化タグ(header, nav, article, aside, footer)でWEBサイト全体を「ヘッダー領域」「ナビゲーション領域」「コンテンツ領域」「サイドバー領域」「フッター領域」の5つに区切ってレイアウトします。

コンテンツの意味のカタマリはdivタグにID属性やclass属性で定義するのが基本ですが、ヘッダーとかナビゲーションとかメジャーなヤツはHTML5のタグで標準装備してあげましょう、という趣旨です。

divタグのid属性とclass属性に対してCSSでレイアウト

で、ページタグと構造化タグで骨格を定義した後にはじめて、divタグでid属性とclass属性を定義しCSSを使ってレイアウトを整えていきます。

CSSは1999年頃にCSS2.1の仕様が確定してからCSS3にいたるまで機能が追加されるのみで仕様変更はないため、HTMLのようにバージョンによって表示が変わるということはありません。

id属性とclass名にネーミングルールはありませんが、一般的な作法として

  1. containerをbody直下に置いてheaderからfooterまでのコンテンツ全体を囲む
  2. wrapperでheaderやnavやasideを囲む

のように使われます。

html

body

container

header-wrapper

left

ブロック要素をまたなんでわざわざwrapperで囲むか?

WEBサイトのデザインで気をつけるべきことは「読みやすさ」と「見た目の良さ」だと思いますが、ブラウザ幅一杯に文字が広がっていると読みにくいし、かといって全体が両サイドから締め付けられると窮屈な印象を与えます。

このブログテーマもそうですが、最近のレスポンシブなテーマはほとんどと言っていいほどヘッダーにブラウザ幅一杯に背景画像を配置したり、キービジュアルをウィンドウの中央部に配置して見た目のインパクトを重視しています。

  1. 読みやすさ > 両サイドにスペース
  2. 見た目の良さ > 背景画像をブラウザ幅一杯に広げて開放する

header領域やnav領域をわざわざwrapperで囲みなおすのは、背景画像をブラウザ一杯に広げて開放感を出すためであり、このブログのヘッダー部分もそうしています。

test_floatまたサイトのウィジェット部分に最新のエントリーをサムネイル付きで表示して文字を右に回り込ませています。
これを実現するには画像のimgタグに「float:left;」を設定した後、親要素としてwrapperで囲って「overflow:hidden」でフロートの解除をしています。ちょうどこんな感じです。