XHTML&CSSレイアウトについて

Web標準という言葉を知っていますでしょうか。
Web標準とは、W3C、ISO、IETFなどの団体によって策定された、Web関連技術の総称のことです。

Web標準を重視することによる主なメリットとして、
・メンテナンスの向上
・アクセシビリティの向上
・SEO対策
があります。

そのWeb標準のなかで、中核をなすのが「(X)HTML、XML、CSS」です。

これらについては、プログラム言語と同じように力点をおいて勉強された方は少ないかと思います。それほど知識がなくても、担当のデザイナがいる場合やシンプルな画面の作成といった比較的簡単な作業に限られていた為、実際に困ったことも少なかったのではないでしょうか。
しかし、必ずといっていいくらい、Webページに触れる機会があると思います(Web系プロジェクトが前提ですが)。

という訳で、今回は、
・なぜXHTML&CSSなのかということの簡単な説明と
・XHTML&CSSを使った基本的なレイアウト手法について
書きたいと思います。

■なぜXHTML&CSSなのか

上記理由として、XHTML、CSSそれぞれに以下が挙げられます。

●XHTMLを使う主な理由
・データ処理の高速化
・データの再利用性が高い
・名前空間の利用が可能

●CSSを使う主な理由
・構造(XHTML)とデザイン(CSS)の明確な区別が可能
・コードの明瞭化・スリム化

理由の詳細については、今回割愛させてもらいますが、XHTML、CSSを使うことが、よりWeb標準に準拠することになり、その結果、多くのメリットを享受することが可能となります。

■XHTML&CSSを使った基本的なレイアウト手法について

レイアウトについて、今までは「表(テーブル)」を使って実現することが多かったのですが、出現順序やSEO上のメリットにより、CSSによるマルチカラムレイアウトの手法が多く取り入れられています。

マルチカラムレイアウトとは「段組レイアウト」と呼ばれるページレイアウト手法で、
・サイドメニューとメインコンテンツによる２段組、
・サイドメニュー、メインコンテンツ、サブコンテンツによる３段組
のようにページの内容を複数の列に分割して配置することをいいます。

今回は、そのうちの「2段組レイアウト」について、解説したいと思います。
2段組レイアウトの手法としては、大きく分けて「ポジション指定型」と「フロート指定型」の２つのタイプに分けられます。

○ポジション指定型

ポジショニング型レイアウトとは、絶対配置を使ったレイアウトのことになります。

この方法では、サイドメニューをwrapper要素内の好きな所に配置出来ます。
その為、アクセシビリティを考え、メインコンテンツの表示の後にサイドメニューを表示することが可能です。後で説明するdouble floatタイプも同様のことは可能ですが、ヘッダーの前やフッターの後に配置することは出来ません。

☆ただし、絶対配置を使っているため、絶対配置していない内容の高さを超えると重なって表示されてしまう点に注意が必要です。

○フロート指定型

フロート(float)を利用した2段組レイアウトは、コンテンツフィールド(div#maincontents)またはサイドメニュー(div#sidemenu)にfloatプロパティを指定することで実現するレイアウトのことです。
ダブルフロート型にもいくつかの種類が存在します。ここでは、2つのデザイン手法の紹介をします。

・float-marginタイプ(Jeffrey Zeldman方式)

サイドメニューは、幅を指定し、floatで一方に寄せて表示を行い、メインコンテンツは、サイドメニューと同幅をサイドメニュー側に対してmargin指定し表示する方法になります。

この方法では、メインコンテンツにも幅を指定することにより、全体の幅を固定したり、サイドメニューの幅をパーセントで指定して完全なリキッドレイアウトにすることも可能ですが、HTML上では、メインコンテンツより先にサイドメニューが配置されることになるため、サイドメニューを後回しで表示したい場合には適していません。

・double floatタイプ(Douglas Bowman方式)

floatプロパティにより各段を左右に寄せて配置する方法になります。

この方法では、必ず両方の段に幅を指定する必要があります。
また、左右の段の間に隙間が出来ないようにdiv要素(wrapper)を用意して、左右の段の幅の合計と同じ幅を指定する必要があります。HTML上では、常にメインコンテンツがサイドメニューよりも先に配置されるようにすることが可能になります。

どの方法についても一長一短がありますので、その都度ベストな方法を使用する必要があると思いますが、上記スタイルのいずれかであれば、問題は起きにくいと思います。
個人的には、double floatタイプが、細かい設定もなくて一番書きやすいかなと感じています。上記の内容を知っているだけでも、今後の作業にきっと役に立つと思います。
今回はここまで。