第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重に囲む必要はありません。
- CSSの使い方を実用サンプルで学ぶ
-
XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。
- XHTML & CSS 実践講座
そう考えると、wrapperはheaderやnaviなどページ全体を囲んでいるので2重ではなさそうです。
が、外側に目を向けるとページ全体を囲むのは<body>がその役割を担っています。
つまり、本来<body>が全部囲んでいたものをその内側でまた囲みなおしているのがwrapperということになります。
ですので、構造を考えるとやはりwrapperはなくてもいいわけですね。
しかし、ではwrapperが悪かというと、一概にはそうとも言い切れません。事実、世の中の非常に多くのページでwrapperやcontainerという<div>は使われていますし、やはり1つのセレクタでどかっと一気に指定できるのは制作上カンタン、スピーディです。
wrapper があるからといって誰に迷惑がかかるわけでもない（？）ので、このあたりはコダワリの世界かなという気もしますが、wrapperは絶対に必要なものでは ないということ、またベストな方法でもないことを知っておくと「ちょっとできる人」っぽい気がしませんか…！？ では次回もお楽しみに。 （こう
）
お問い合わせ
メルマガ