レイアウト方法の歴史
始めは、 行と列の概念があるtable要素だと、 左右に分かれたレイアウトの実現が簡単ということで、 tableレイアウトが流行りました。
後に、tableはレイアウトをする要素ではなく、 表を作るもので、 本来の用途とは違うと言うことと、 柔軟性がないということで、 tableレイアウトがなくなり、 今度はCSSレイアウトが流行りました。
嘘のCSSレイアウト
CSSレイアウトは、 table要素を使わなければ良いというわけではありません。 table要素を使わないことが目的ではなく、 メンテナンス性やSEO効果を高めることが、 本来の目的です。
例えば、
以下のなんちゃってCSSレイアウトのソースを見て下さい。
<div class="table">
<div class="tr">
<div class="td">
左メニュー
</div>
<div class="td">
本文
</div>
</div>
</div>
分かりやすくclass属性を設定してみましたが、
このclass属性値が何であっても関係ないので、
構造を見てください。
またtr要素が1つしかないので、 以下のような、 なんちゃってCSSレイアウトのように、 省略する場合が多いです。
<div class="container">
<div class="menu">
左メニュー
</div>
<div class="contents">
本文
</div>
</div>
こちらのclass属性値は、
よく使われているものを当ててみました。
この例のなんちゃってCSSレイアウトのソースのように、 table要素を、ただdiv要素に変更しただけでは、 なにも変わってないのは分かりますよね。 ただ分かりにくくなっただけで、 これだと、まだtable要素を使った方が分かりやすい。
意味の無いCSSレイアウトをして、 費用の無駄遣いをしているだけです。
残念ながら今までのCSSレイアウトは、 こういう、 なんちゃってCSSレイアウトがほとんどでした。
なぜ今なのか？
HTML5が勧告される年と言うのが、 大きな理由になります。
HTML5では、多くの要素が追加されます。 この記事に関係あるものでは、 nav要素とarticle要素があります。
そう、 class=”menu”とclass=”contents”に相当するものです。 これにより、 <div><div><div><div>・・・ という分かりにくいCSSレイアウトにならなくなります。
もちろんこの外を、 div要素あるいは、別のブロック要素で囲んでしまうと、 tableレイアウトと同じになってしまい、 意味がなくなります。
また、HTML5と同時に、CSS3の登場により、 真CSSレイアウトがやり易くなったというのもあります。
真CSSレイアウト用の基本マークアップ例
このブログでも使っているマークアップになります。
<body>
<header>
ページのタイトルなど
</header>
<article>
記事などの本文
</article>
<nav>
メニュー
</nav>
<footer>
コピーライトなど
</footer>
</body>
メニューは、正しくnav要素を使用すれば、
メニューということに違いがないので、
articleの上でも問題有りません。
SEO的にも違いはありません。
nav要素ではなくdiv要素などを使えば、
答えは違ってきますので、
注意してください。
このホームページで下に書いている理由は、 ガラケーなど、CSSが使えない環境で 下に表示してほしいからです。
あとはCSSを使い、 自由にレイアウトしてください。 HTMLをいじらずに。