次にあなたがつくります。

テーブルレイアウトとフルCSSレイアウトの違い

サイト制作運用フロー図

サイト制作の主な作業は、画像ソフトで画像を作ることと、HTMLとCSSを記述することです。
HTMLの記述について大切なことを説明します。

「ウェブ標準」「(X)HTML+CSS」について

ホームページ制作会社のサイトで、「弊社はウェブ標準の~云々~(X)HTML+CSSで制作しております」という感じの文章見かけることがあります。
「ウェブ標準」というのは、W3Cという団体が決めたウェブ制作に関する規格のことです。
現在のサイトを作る際の規格は、(X)HTML+CSSと言われるものです。HTML(またはXHTML)で構造を作り、CSSでレイアウトや装飾し、「構造と見栄えをわける」ことができます。
この(X)HTML+CSSを徹底して「構造と見栄えをわける」方法を「フルCSSレイアウト」と言います。
2007年くらいまでは、「テーブルレイアウト」という方法で作られたサイトがほとんどでした。「テーブルレイアウト」は構造と見栄えが分離されていません。

……と、文章でズラズラ書かれても、意味がわからないですよね。

これから、「フルCSSレイアウト」と「テーブルレイアウト」で作ったサイトを比較しながら説明します。
感覚的にわかっていただけたらいいので、難しいことはあまり考えずに見てください。

「フルCSSレイアウト」と「テーブルレイアウト」の違い

左側が「フルCSSレイアウト」で右側が「テーブルレイアウト」です。
(クリックして、それぞれのページを開いてください。)
若干のズレやフォントサイズの違いがありますが、ほぼ同じに見えますね。

それぞれのページを開いた状態で、cssをはずしてみてください。
IE8.0やFirefoxは、下図のように「表示」→「スタイル」で「スタイルなし」にするとはずすことができます。

スタイルのはずし方

スタイルシートをはずすと、「フルCSSレイアウト」はレイアウトや装飾といった見栄えが反映されなくなりましたが、「テーブルレイアウト」の方はそのままです。
これが、「構造と見栄えをわける」ということです。
「フルCSSレイアウト」は、レイアウトや文字の色・サイズをCSSでコントロールしているのでCSSをはずすと下図のようになるのです。

HTMLソースを見てみましょう。
IE8.0やFirefoxでは、「表示」→「ソース」で見ることができます
「テーブルレイアウト」は、その名前の通り<table>というタグを使っています。
「フルCSSレイアウト」の方がなんとなく構造的に見えませんか?

誤解されそうなので書いておきますが、tableタグを使うことが悪いのではありません
tableタグは、表を作るためのタグです。本来の目的のために使うのは問題ありません。
しかし、レイアウトやデザインのために<table>タグを使うことは推奨されていません。

「フルCSSレイアウト」と「テーブルレイアウト」の特徴

では、「フルCSSレイアウト」と「テーブルレイアウト」の何が良くて何が悪いのかを説明します。

【変更のしやすさ】
「フルCSSレイアウト」はページの変更の手間が少なくなります。
「フルCSSレイアウト」はCSSで見栄えをコントロールします。
例えば、<p></p>で囲ったテキスのサイズを12pxから15pxに変更したいとき。cssで設定した<p>のサイズを変更すれば、全てのページのサイズが変更されます。
「テーブルレイアウト」ではページ毎にサイズを指定しているため、1ページずつ変更作業をしなくてはならなくなります。
【SEO】
「フルCSSレイアウト」で上手に論理構造を作ると検索エンジンの評価が高くなります。
「テーブルレイアウト」よりも「フルCSSレイアウト」の方がSEOに有利と一般的には言われています。ただし、上述のように「フルCSSレイアウト」で作ってもきちんとした構造とタグを使っていなければ評価は高くなりません。
【ファイルの大きさ】
「フルCSSレイアウト」は、「テーブルレイアウト」よりもファイルのサイズを小さくすることができます。
上の例で見ていただくと、一目瞭然ですが、「テーブルレイアウト」は<table>タグを使ったり、フォントのサイズを指定したりするので、その分HTMLがごちゃごちゃします。
【レイアウトの崩れやすさ】
「フルCSSレイアウト」は、「テーブルレイアウト」よりもレイアウトが崩れやすいです。
ちょっとした記述ミスで、レイアウトが崩れてしまいます。
【技術の取得】
「フルCSSレイアウト」は、「テーブルレイアウト」よりもマスターするのに時間がかかります。
「フルCSSレイアウト」にしたから上のように「変更しやすく、SEOに有利で、小さいサイズになる」ようになるわけではなく、“きちんとした”「フルCSSレイアウト」にすることで「変更しやすく、SEOに有利で、小さいサイズになる」のです
「フルCSSレイアウト」の難しさは、ブラウザによって表示が異なることが一番大きいと思います。
HTMLやCSSは数あるプログラム言語の中で一番シンプルで簡単だと思いますが、シンプルゆえに奥が深いのです。

「フルCSSレイアウト」と「テーブルレイアウト」の使い分け。

2007年以前にサイトをつくってほったらかしの中小企業のサイトは、テーブルレイアウトのままだと思います。
今後リニューアルするのでしたら、「フルCSSレイアウト」にした方がよいでしょう。

ただ、「フルCSSレイアウト」が現在の主流とはいえ、「テーブルレイアウト」を使う場合もあります。
例えば、楽天の機能は使えるHTMLタグが限られているため、「テーブルレイアウト」を使います。(楽天GOLDというサービスを利用すれば、普通のサイトのようにHTMLやCSSを使うことができます)
また、テーブルレイアウトの方が効率がいい場合、お客様に更新してもらうため、お客様もそれを望まれている場合などはテーブルレイアウトにします。

自分が置かれている状況からどちらで進むか判断してください。

なお、現在は「HTML4.01」か「XHTML1.0」という仕様をよく使うのですが、「HTML5」という次世代のウェブ標準の策定が進められています。

最近リニューアルされたサイトでは、HTML5を取り入れているところも多くあります。
私も自分のサイトではHTML5+CSS3を取り入れました。が、HTML5+CSS3は古いブラウザでは対応していないので(これはブラウザチェックや予算の関係ですね)、仕事では今のところPCサイトでは「HTML4.01」か「XHTML1.0」ばかりで、スマートフォンサイト制作のときのみHTML5+CSS3で制作しています。