div#wrapperは必要ない! HTMLはシンプル且つセマンティックで

制作したサイトにdiv#wrapperはありませんか？

あなたが制作したサイトに div#wrapper が存在していたら、なぜ、 div#wrapper を使っているのか、きちんとした理由は知っていますか？ もしそれができないのなら、そのdivは必要ないのかもしれません。

div#wrapperが使われていた理由

いろいろなソースコードを見てみると、今でも目にするdiv#wrapper。
そもそも、それがなぜ使われていたかの理由はご存知でしょうか？

その理由はIE6の「過去互換モード」にありました。IE6の過去互換モードではブロック要素を

margin: 0 auto;

を使ってセンタリングすることができません。その代わりにtext-align:center;を使っての中央寄せが可能できたので、その時代のデザイナーたちはbody内にdiv#wrapperを作り、

body {text-align: center}
#wrapper {text-align: left}

というように一度bodyにセンタリングし、中に入る要素に対して

text-align:left

を使って文字列を左寄りにしていました。

div#wrapperは必要ない

現在マイクロソフトは、IE6がデフォルトで搭載されているXPのサポートを打ち切りました。今後は IE6 からのアクセスはさらに少なくなりますし、対応する必要はありません。 IE6に対応する必要がなければ、div#wrapperも必要ありません。

理由を知らず慣習的に使っていたとすれば、この機会に改めていきたいですね。もう一度、ブラウザの進化と対応を正しく見直していきましょう。

HTML5+CSS基礎講座では既に教えていない。

IE6への対応は、ほぼなくなっている現在ではdiv#wrapperがないのが当たり前のことですが、allWebクリエイター塾ではXHTML講座があった時からセマンティックでマークアップする方法を紹介しています。

当時は、 IE6対応としてのものだと紹介していたので、受講生はIE6が対象外になったらなくなることを理解していると思いますが、最近受講される方には、その内容の解説がなくシンプルでスマートなHTMLの書き方を教えているので、「div#wrapper がなくても大丈夫ですか？」の質問があるのでご紹介してみました。

シンプルな書き方はallWebクリエイター塾のHTML5+CSS基礎講座かHTML5マークアップ講座を受講して勉強してみてください。