はじまりはじまり。
今回のテーマ：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やcontainerという<div>は使われていますし、やはり1つのセレクタでどかっと一気に指定できるのは制作上カンタン、スピーディです。
wrapperがあるからといって誰に迷惑がかかるわけでもない（？）ので、このあたりはコダワリの世界かなという気もしますが、wrapperは絶対に必要なものではないということ、またベストな方法でもないことを知っておくと「ちょっとできる人」っぽい気がしませんか…！？
では次回もお楽しみに。
そういう理由で私はwrapperを使っています。
仰るとおり、全体をブロック化しておくと容易になることも多いですね。XHTMLがInvalidになるわけでもないので、アリだとおもいます。
今後ともどうぞよろしくお願い申し上げます。
HTML構造だけを見るなら全てのspan及びdivも意味を持たない要素として例外になるわけですし、不自然でもないのでは？と思います。
htmlの下位要素であるbodyでラップするのは反則なんでしょうかねえ。
spanやdivはそれ自体の意味はないですが、文書の構造化を補助・強化する役割という位置づけになっています。ですので、文書構造を整理して意味をわかりやすくするという使い方であればベストですねー。
bodyでラップするのは全然問題ないと思いますが、bodyの内側全部を内包したブロックが1個欲しくなるデザインってすごく多いですね…。
私ん所は
html{background-color: #xxx;}
body{margin:10px auto; background-color: #yyy;}
のようにに背景画像や背景色をつけていますが、こうしている人は少ないようですね。
bodyの下に#wrapperなどを作って
body{background-color: #xxx;}
#wrapper{margin:0px auto; background-color: #yyy;}
としている人が多いようです。
使っているけど、記事を見たら、別の使い方があるんですね。
htmlやbodyにcssが効かなかったことがあったと思います。