CSSはウェブページデザインを構築する最良の方法です
特にテーブルを使用して魅力的なWebページレイアウトを作成することに慣れている場合は、 CSSレイアウトを書くことが難しい場合があります。 HTML5ではレイアウト用のテーブルが使用できますが、それは良い考えではありません。
テーブルにアクセスできない
検索エンジンと同様に、ほとんどのスクリーンリーダーはHTMLで表示されている順序でWebページを読み取ります。 また、スクリーンリーダーが解析するためにテーブルが非常に難しい場合もあります。 これは、表レイアウト内のコンテンツは、左から右、上から下に読むと常に直線的な意味を持つわけではないためです。 さらに、ネストした表では、表のセルにさまざまなスパンがあるため、そのページを把握することが非常に難しくなります。
これは、HTML5仕様書がレイアウトのためにテーブルに対して推奨している理由と、HTML 4.01がそれを許可しない理由です。 アクセス可能なウェブページは、より多くの人々がそれらを使用することを可能にし、プロのデザイナーのマークです。
CSSを使用すると、セクションをページの左側に属するものとして定義できますが、HTMLの最後に配置します。 次にスクリーンリーダと検索エンジンは、重要な部分（コンテンツ）を最初に読み、重要でない部分（ナビゲーション）を最後に読みます。
テーブルは厄介です
Webエディタを使用してテーブルを作成しても、Webページは依然として非常に複雑で維持管理が困難です。 最もシンプルなWebページ設計を除き、ほとんどのレイアウト表では、多数の属性とネストした表を使用する必要があります。
テーブルを作成するのは簡単なように見えますが、それを維持する必要があります。 6ヵ月後には、なぜテーブルをネストしたのか、いくつのセルが並んでいるのかなどを覚えておくのは簡単ではありません。 さらに、Webページをチームメンバーとして管理している場合は、どのようにテーブルが機能しているかを説明したり、変更が必要なときに時間を要すると考えたりする必要があります。
CSSも同様に複雑になる可能性がありますが、プレゼンテーションをHTMLと区別して保持し、長期的に維持するのがずっと簡単です。 さらに、CSSレイアウトを使用すると、1つのCSSファイルを作成して、すべてのページをそのように見えるようにスタイルできます。 また、サイトのレイアウトを変更する場合は、CSSファイルを1つずつ変更し、サイト全体を変更するだけで、レイアウトを更新するためにテーブルを更新するために各ページを一度に1つずつ移動する必要はありません。
テーブルは柔軟性がありません
パーセンテージ幅のテーブルレイアウトを作成することは可能ですが、読み込みが遅くなることが多く、レイアウトの見た目を劇的に変えることがあります。 しかし、テーブルに指定された幅を使用すると、自分とは異なるサイズのモニターではうまく見えない非常に頑丈なレイアウトになります。
多くのモニター、ブラウザー、および解像度で見た目がよくなる柔軟なレイアウトを作成するのは比較的簡単です。 実際、CSSのメディアクエリでは、サイズの異なる画面用に別々のデザインを作成できます。
ネストした表は、同じデザインのCSSよりも遅くロードされます
テーブルを使って空想レイアウトを作成する最も一般的な方法は、テーブルを「入れ子にする」ことです。 これは、1つ（またはそれ以上）のテーブルが別のテーブル内に配置されることを意味します。 ネストされたテーブルが多いほど、Webブラウザがページをレンダリングするのにかかる時間が長くなります。
ほとんどの場合、テーブルレイアウトはCSSデザインより多くの文字を使用して作成します。 文字数が少なくても、ダウンロードすることは少なくなります。
テーブルが検索エンジンの最適化を傷つけることがある
最も一般的なテーブル作成レイアウトには、ページの左側にナビゲーションバーがあり、右側にメインコンテンツがあります。 表を使用する場合、これは（一般的に）HTMLに表示される最初のコンテンツが左側のナビゲーションバーであることが必要です。 検索エンジンはコンテンツに基づいてページを分類し、多くのエンジンはページの上部に表示されるコンテンツが他のコンテンツよりも重要であると判断します。 したがって、左側のナビゲーションが最初に表示されたページには、ナビゲーションより重要度の低いコンテンツが表示されます。
CSSを使用すると、重要なコンテンツをHTMLに配置してから、CSSを使用してデザインに配置する場所を決定できます。 これは、デザインがページの下に置かれたとしても、検索エンジンが重要なコンテンツを最初に見ることを意味します。
テーブル常に印刷しないでください
多くのテーブルデザインは、プリンタにはあまりにも幅があるため、適切に印刷されません。 したがって、ブラウザを適切にするために、ブラウザはテーブルを切り取り、下のセクションを印刷して、非常にばらばらのページを作成します。 ときには、大丈夫なページで終わることもありますが、右端全体が欠落しています。 他のページでは、さまざまなシートのセクションが印刷されます。
CSSを使用すると、ページを印刷するためだけに別のスタイルシートを作成できます。
レイアウトのテーブルがHTML 4.01で無効です
HTML 4仕様では、「非ビジュアルメディアにレンダリングするときに問題が発生する可能性があるため、ドキュメントコンテンツをレイアウトするための手段としてテーブルを使用すべきではありません。
したがって、有効なHTML 4.01を作成する場合は、レイアウト用にテーブルを使用することはできません。 表形式のデータに対してのみ表を使用する必要があります。 表形式のデータは、一般にスプレッドシートやデータベースに表示されるようなものです。
しかし、HTML5ではルールが変更されていましたが、今はレイアウト用のテーブルが推奨されていませんが、有効なHTMLになりました。 HTML5の仕様では、「表はレイアウト補助として使用しないでください。
上記のように、スクリーンリーダーが差別化するためのレイアウトのテーブルは難しいためです。
CSSを使用してページの配置とレイアウトを行うのは、テーブルの作成に使用したデザインをHTML 4.01で作成する唯一の方法です。 HTML5ではこの方法も強く推奨されています。
レイアウトの表はあなたの仕事の見通しに影響を与える可能性があります
新しいデザイナーがHTMLとCSSを学ぶにつれて、テーブルレイアウトを構築する上でのスキルはますます低くなります。 はい、お客様は通常、お客様がウェブページを構築するために使用すべき正確な技術を教えているわけではありません。 しかし、彼らはあなたに次のようなことを求めます。
- アクセシブルなWebページ：スクリーンリーダーが見ることができるデザインは、多くの国で義務付けられており、企業は毎日アクセシビリティがますます重要になっています。
- メンテナンス可能なウェブページ：将来もそれらを維持しない場合でも、それらのデザインを取り入れることができます。
- フレキシブルなデザイン：多くのブラウザ、解像度、デバイスで機能するデザイン。
- 高速ダウンロードページ：SEOにとってもスピードはますます重要になっています。
- 印刷可能なデザイン：特殊なスクリプトや余白なしで印刷するページ。
クライアントが求めるものを提供できない場合は、おそらく今日ではなく、おそらく来年または年後に、デザインのためにあなたに来るのをやめます。 1990年代後半以降に使用されていた技術を学び始める意思がないため、ビジネスに苦労することは本当にありますか？
道徳：CSSを使うことを学ぶ
CSSは学ぶのが難しいかもしれませんが、何か価値のあるものは努力する価値があります。 あなたのスキルを停滞させないでください。 CSSを学び、レイアウト用にCSSを組み込んだようにWebページを構築します。