第16回 wrapperは必須?テーブルレイアウトを卒業しよう

wrapperは必須?

<body>以下のすべてを<div>で囲み、wrapperやcontainerという名前をつけておくケースはよくあると思います。

メリットとしては、1つのセレクタでページ全体の幅や色、配置などを一括指定できる点です。

例えばこんな感じですね。

<div id="wrapper">
<div id="header">
....
</div>
<div id="main">
....
</div>
<div id="footer">
....
</div>
</div>
/* wrapperで幅、中央寄せ、背景色一括指定 */
#wrapper {
width: 850px;
margin: 0 auto;
background: #ccc;
}

しかし、wrapperなしでもおなじことが簡単に実現できます。

こんな感じ。

/* 複数セレクタで指定 */
#header, #main, #footer {
width: 850px;
margin: 0 auto;
background: #ccc;
}

こうなると、どっちがいいのかということになってきますが、HTML文書構造という点でみると、wrapperはちょっとおかしな存在です。

前回の記事でも出てきましたが、例えばこんなソース。

<div id="contents">
<div id="contents_header">
<h1>header</h1>
</div>
<div id="contents_text">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>

このソースがまずい点は、<h1>や<p>に直接IDやクラスを指定する、または子孫セレクタを使うなどすればcontents_headerやcontents_textが全く不要になってしまう点です。要素、タグというのは「囲った範囲を意味付けする=マーク アップする」ものなので、すでに囲まれているもの「だけ」を更に2重に囲む必要はありません。

そう考えると、wrapperheadernaviなどページ全体を囲んでいるので2重ではなさそうです。

が、外側に目を向けるとページ全体を囲むのは<body>がその役割を担っています。

つまり、本来<body>が全部囲んでいたものをその内側でまた囲みなおしているのがwrapperということになります。

本来<body>が全部囲んでいたものをその内側でまた囲みなおしているのがwrapper

ですので、構造を考えるとやはりwrapperはなくてもいいわけですね。

しかし、ではwrapperが悪かというと、一概にはそうとも言い切れません。事実、世の中の非常に多くのページでwrapperやcontainerという<div>は使われていますし、やはり1つのセレクタでどかっと一気に指定できるのは制作上カンタン、スピーディです。

wrapper があるからといって誰に迷惑がかかるわけでもない(?)ので、このあたりはコダワリの世界かなという気もしますが、wrapperは絶対に必要なものでは ないということ、またベストな方法でもないことを知っておくと「ちょっとできる人」っぽい気がしませんか…!? では次回もお楽しみに。 (こう鈴木 航 (すずきこう)

次のページは…
訪問済みリンクを一工夫しよう
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読