3分コーディング」のコーナーです。今回のテーマ:wrapperは必須?<body>以下の全てを<div>で囲み、wrapperやcontainerという名前をつけておくケースはよくあると思います。メリットとしては、1つのセレクタでページ全体の幅や色、配置などを一括指定できる点です。#ccc;}しかし、wrapperなしでもおなじことが簡単に実現できます。#ccc;}こうなると、どっちがいいのかということになってきますが、HTML文書構造という点でみると、wrapperはちょっとおかしな存在です。前回の記事でも出てきましたが、例えばこんなソース。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は絶対に必要なものではないということ、またベストな方法でもないことを知っておくと「ちょっとできる人」っぽい気がしませんか...!?では次回もお楽しみに。トラックバック(0)この記事へのコメントあと、wrapperがあると、2カラムから3カラムといった、デザインの変更も比較的簡単にできますよね。いうよりwrapperがないと無理かな。いう理由で私はwrapperを使っています。23:47こんにちは。コメントありがとうございます。仰るとおり、全体をブロック化しておくと容易になることも多いですね。XHTMLがInvalidになるわけでもないので、アリだとおもいます。今後ともどうぞよろしくお願い申し上げます。18:20>HTML文書構造という点でみると、wrapperはちょっとおかしな存在です。HTML構造だけを見るなら全てのspan及びdivも意味を持たない要素として例外になるわけですし、不自然でもないのでは?と思います。htmlの下位要素であるbodyでラップするのは反則なんでしょうかねえ。12:14こんにちは。コメントありがとうございます。spanやdivはそれ自体の意味はないですが、文書の構造化を補助・強化する役割という位置づけになっています。文書構造を整理して意味をわかりやすくするという使い方であればベストですねー。bodyでラップするのは全然問題ないと思いますが、bodyの内側全部を内包したブロックが1個欲しくなるデザインってすごく多いですね...。15:02wrapperがあるからといって誰に迷惑がかかるわけでもないですが、無い方がすっきりして気持ちがいいですね。#yyy;}のようにに背景画像や背景色をつけていますが、こうしている人は少ないようですね。#yyy;}としている人が多いようです。10:26子要素を持っている親要素にコンテナとかラッパーといった名前をつけるのは、頭痛が痛いとかアメリカに渡米といった重複表現に思えて気持ちが悪い。使っているけど、記事を見たら、別の使い方があるんですね。11:04古いIE対策だと思いますよ。htmlやbodyにcssが効かなかったことがあったと思います。[必須入力]※画像の中の文字を半角で入力してください。研修トレーニングサービス、およびレンタル教室・会議室です。(7)RSSフィードを取得Seesaaブログ。