いよいよCSSレイアウトに挑む

さあ！いよいよCSSでレイアウトをやっちゃいましょうね。
今まで、テーブルでレイアウトを組むことが主流だったウェブデザインも、今や、CSSが主流になりつつあります（脱テーブルレイアウトと言われたりします）。
Web標準の影響ですね。
私もほんの半年くらい前までは、思いっきりテーブルレイアウトでしたよ。

次の記事からは、「レイアウトを考える」で例にあげたレイアウトデザインを、実際にXHTML+CSSで組んでいきますね。
（HTMLでも大差ないですが、当サイトではXHTMLを採用します。）
ちょっとその前に、テーブルレイアウトとCSSレイアウトでどのくらいウェブページのソースコードに違いがあるか、簡素になるのかを見てみたいと思います。

私自身、実際にどのくらい違うのか、試したことがないので、この場を借りて、体感してみたくなっちゃったんですよ！
テーブルレイアウトから、CSSレイアウトへ移行するときには、かなり抵抗があるものです。
全く考え方が違いますからね。
CSSレイアウトはきちんと記述しないといけない分、綺麗なソースコードに仕上がるので、今までよりも職人的かもしれませんね。

下のソースコードは「レイアウトを考える」の「２カラム Type2-c」をテーブルレイアウトで組んだ時の例です。
幅640px、右メニュー幅150px、左メイン幅450px、ヘッダーとフッターのテーブル余白は、内側と外側ともに無しで、メインとメニュー部分は内側の余白が10px設けてあります。

あ！ここでは、ソースコードの量をザザーッと眺める程度でいいですよ！
詳しくは後の記事で学んでいきますからね＾＾

次に、上の例をCSSレイアウトすると、どのように書き換えられるか、その一例を書いてみましたよ。
どうですか？凄〜く簡素化されましたね。
Web標準を意識したウェブサイトのソースコードは、こんなにも綺麗になっちゃうんです。
文字数にして40%カットくらいでしょうか。

XHTML側のソースコードはたったこれだけですが、見た目の部分は、これには書いてありません。
それを担うのがCSSになるんですね。

では、見た目の部分、CSSを書いてみます。
このように、Web標準では構造の部分（XHTML）と見た目の部分（CSS）を分離して組み上げていくんですよ。

CSSの部分が長くて、テーブルレイアウトのほうが、簡素に見えるかもしれませんね。
でも、役割をそれぞれに分担することで、サーチエンジンにやさしいウェブページになるし（SEO対策のひとつ）、健常者以外の人たちにもやさしいウェブページに仕上がるんですよ。

例えば、読み上げソフトを使ったときに、左上から順番に読み上げられるだけでも、複雑なテーブルレイアウトで組んであるより、うんと理解しやすいページになるんです。

他にも、メリットはあるのですが、それは、これから体感していってもらえたらいいかな♪って思います。
慣れてくると、構築が楽チンに感じられるとか･･･色々と。