2009年07月14日

wrapperは必須?:CSS 3分コーディング

CSS(スタイルシート)の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ: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重に囲む必要はありません。

そう考えると、wrapperはheaderやnaviなどページ全体を囲んでいるので2重ではなさそうです。が、外側に目を向けるとページ全体を囲むのは<body>がその役割を担っています。

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

wrapperはなくてもいい

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

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

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

では次回もお楽しみに。

レイアウト自由自在!Dreamweaver CS4 CSSデザイン手法
posted by こう at 11:15
連載:CSS 3分コーディング | コメント(9) | トラックバック(0)
この記事へのコメント
あと、wrapperがあると、2カラムから3カラムといった、デザインの変更も比較的簡単にできますよね。というよりwrapperがないと無理かな。
そういう理由で私はwrapperを使っています。
Posted by yoshimasa at 2010年03月15日 23:47
こんにちは。コメントありがとうございます。

仰るとおり、全体をブロック化しておくと容易になることも多いですね。XHTMLがInvalidになるわけでもないので、アリだとおもいます。

今後ともどうぞよろしくお願い申し上げます。
Posted by こう at 2010年03月18日 18:20
>HTML文書構造という点でみると、wrapperはちょっとおかしな存在です。
HTML構造だけを見るなら全てのspan及びdivも意味を持たない要素として例外になるわけですし、不自然でもないのでは?と思います。

htmlの下位要素であるbodyでラップするのは反則なんでしょうかねえ。
Posted by 通りすがり at 2010年10月22日 12:14
こんにちは。コメントありがとうございます。

spanやdivはそれ自体の意味はないですが、文書の構造化を補助・強化する役割という位置づけになっています。ですので、文書構造を整理して意味をわかりやすくするという使い方であればベストですねー。

bodyでラップするのは全然問題ないと思いますが、bodyの内側全部を内包したブロックが1個欲しくなるデザインってすごく多いですね…。
Posted by こう at 2010年10月27日 15:02
wrapperがあるからといって誰に迷惑がかかるわけでもないですが、無い方がすっきりして気持ちがいいですね。
私ん所は
html{background-color: #xxx;}
body{margin:10px auto; background-color: #yyy;}
のようにに背景画像や背景色をつけていますが、こうしている人は少ないようですね。
bodyの下に#wrapperなどを作って
body{background-color: #xxx;}
#wrapper{margin:0px auto; background-color: #yyy;}
としている人が多いようです。
Posted by sugiyama at 2011年09月23日 21:34
面白くてわかりやすい記事
Posted by 今更だけど at 2012年09月14日 10:26
子要素を持っている親要素にコンテナとかラッパーといった名前をつけるのは、頭痛が痛いとかアメリカに渡米といった重複表現に思えて気持ちが悪い。
Posted by jislotz at 2013年10月24日 05:11
ぼくの場合は、













使っているけど、記事を見たら、別の使い方があるんですね。
Posted by Leon at 2013年12月19日 11:04
古いIE対策だと思いますよ。
htmlやbodyにcssが効かなかったことがあったと思います。
Posted by eguchi at 2015年11月16日 10:47
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/123465458

この記事へのトラックバック