テーブルレスウェブデザイン

テーブルレス Web デザイン(またはテーブルレス Web レイアウト) は、ページレイアウトの制御にHTML テーブルを使用しないWeb デザイン手法です。HTML テーブルの代わりに、カスケーディング スタイル シート(CSS)などのスタイル シート言語を使用して、 Web ページ上の要素とテキストを配置します。

HTML は、当初は視覚的な表現がユーザーに任されていたマークアップ言語です。しかし、 1990 年代半ばにインターネットが学術研究の世界から主流へと拡大し、よりメディア指向になったため、グラフィック デザイナーは Web ページの視覚的な外観を制御する方法を模索しました。特にデザイナーのDavid Siegelが著書「Creating Killer Web sites」で広めたように、テーブルとスペーサー(通常は幅、高さ、または余白が明示的に指定された透明な 1 ピクセルのGIF画像) がページ レイアウトの作成と維持に使用されました。^[1]

1990 年代後半、初めてかなり強力なWYSIWYGエディタが市場に登場し、Web デザイナーは Web ページを作成するために HTML の技術的な理解が不要になりました。^[2]このようなエディタは、間接的に、デザイン要素を配置するためにネストされたテーブルを多用することを促しました。デザイナーがこれらのエディタでドキュメントを編集すると、不要なコードと空の要素がドキュメントに追加されました。さらに、熟練していないデザイナーは、WYSIWYG エディタを使用する際に、必要以上にテーブルを使用する傾向がありました。この習慣により、テーブル内に多くのテーブルがネストされ、テーブルに不要な行や列が含まれることがよくありました。HTML と画像を直接出力するスライス ツールを備えたグラフィック エディタの使用も、1 ピクセルの高さまたは幅の行が多数あるテーブルで、品質の低いコードを促進しました。場合によっては、実際のコンテンツ自体よりも多くのコード行がコンテンツをレンダリングするために使用されることがありました。

レイアウト目的でテーブルに依存したことで、多くの問題が発生しました。多くの Web ページはテーブルの中にテーブルがネストされた状態で設計されており、その結果、よりシンプルな書式のドキュメントよりも多くの帯域幅を使用する大きな HTML ドキュメントが作成されました。さらに、スクリーン リーダーや検索エンジンによって解析されるなど、テーブルベースのレイアウトが線形化されると、結果として生じるコンテンツの順序が多少ごちゃごちゃしてわかりにくくなる可能性があります。

カスケード スタイル シート (CSS) は、デザインとコンテンツの分離を改善し、Web 上のコンテンツをセマンティックに編成する方向に戻るために開発されました。「テーブルレス デザイン」という用語は、ページ上の HTML 要素を配置するためにレイアウト テーブルではなく CSS を使用することを意味します。HTML テーブルは、Web ページ内で表形式の情報を表示する場合に依然として正当な位置を占めており、^[3]また、要素を垂直方向に中央揃えするなど、CSS サポートが貧弱または問題がある状況でレイアウト デバイスとして使用されることもあります。テーブルが依然として使用されているもう 1 つの分野は電子メールです。これは、多くの一般的な電子メール クライアントが最新の HTML および CSS レンダリングに追いついていないためです。このようなシナリオでは、複雑な電子メールは構造的および創造的な配置の一部を失います。

CSS1仕様は、 Webアクセシビリティの向上と、スタイルシートのプレゼンテーションの詳細とHTML文書の意味内容の分離を強調することを目的として、1996年12月にW3C ^[4]によって公開されました。1998年5月のCSS2（後にCSS 2.1およびCSS 2.2に改訂）では、CSS1に位置決めとテーブルレイアウトの機能が追加されました。

Web ページ全体のレイアウトを制御するために CSS ではなく HTML テーブルを使用することが好まれたのは、いくつかの理由によるものです。

• コンテンツ発行者が自社の Web サイトに既存の企業デザイン要素を複製したいという要望。
• ブラウザでの CSS サポート時の制限。
• CSS をサポートしていないブラウザのインス​​トールベース。
• 新しい Web デザイナーが CSS 標準に精通していないこと。
• 意図したレイアウトを素早く実現するより簡単な方法として認識されていた方法の代わりに CSS を使用する理由 (HTML の意味論やWeb アクセシビリティを含む) に関する知識の欠如、または懸念、および
• この実践を奨励する新しいタイプのWYSIWYG Web デザイン ツール。

CSSベースのレイアウト採用の画期的な出来事としては、 2001年2月のWeb Standards Projectのブラウザアップグレードキャンペーンと、ウェブデザイン雑誌A List Apartの同時リニューアル、それに続く2002年のWiredのリニューアルが挙げられる。 ^[5] 2003年に立ち上げられたCSS Zen Gardenのウェブサイトは、テーブルレスレイアウトを普及させたとされている。^[6]

HTML テーブルが意図した意味上の目的は、ページをレイアウトすることではなく、表形式のデータ^{[3] [7]を提示することです。 [8]ページ レイアウトに CSS を使用する利点には、さまざまな}ユーザー エージェントを 使用して、より多様なユーザーが情報にアクセスしやすくなることが挙げられます。意味的に無意味なタグが多数削除され、より意味のある見出し、段落、リストが少数残るため、帯域幅が節約されます。レイアウト指示はサイト全体の CSS スタイルシートに転送され、これを<table>一度ダウンロードしてキャッシュし、各訪問者がサイト内を移動するときに再利用できます。特定の CSS のマークアップを変更するだけで、そのスタイルシートに依存するすべてのページに影響し、サイト全体のスタイルやブランドを 1 回で変更できるため、サイトの保守性が向上する可能性があります。新しい HTML コンテンツを追加しても、既存の CSS によって一貫したレイアウト ルールが即座に適用されるため、それ以上の作業は必要ありません。 <tr><td>

インターネットの急速な成長、障害者差別法の拡大、携帯電話やPDAの使用増加により、Web コンテンツは、Web が最初に普及したデスクトップ コンピューターとCRT モニターの比較的均一なエコシステムを超えて、さまざまなデバイスを操作するユーザーがアクセスできるようにする必要があります。テーブルレス Web デザインは、この点でWeb アクセシビリティを大幅に向上させます。画面に対して幅が広すぎるテーブルは、全体を読むために横にスクロールする必要がありますが、テキストは折り返すことができるからです。

スクリーン リーダーや点字デバイスは論理構造に従うため、テーブルレス デザインで問題が発生する可能性は低くなります。検索エンジンの Web クローラーでも同じことが言えます。これは、ほとんどの Web サイト発行者がページを見つけて正確に分類し、潜在的なユーザーが適切な検索で簡単にページを見つけられるようにするソフトウェア エージェントです。

デザイン (CSS) と構造 (HTML) を分離した結果、ハンドヘルド デバイスや携帯電話などのさまざまなデバイスに異なるレイアウトを提供することもできます。また、印刷用に異なるスタイル シートを指定して、ページの印刷バージョンでは無関係で邪魔になる広告やナビゲーション要素の外観を非表示にしたり変更したりすることもできます。

W3CのWebコンテンツアクセシビリティガイドラインのガイドライン3では、「マークアップとスタイルシートを適切に使用してください」と記載されています。^[9] ガイドラインのチェックポイント3.3（優先度2のチェックポイント）では、「スタイルシートを使用してレイアウトとプレゼンテーションを制御してください」と記載されています。^[10]

テーブルレス設計では、コンテンツを配置するためだけに使われる HTML タグが少ない Web ページが作成されます。これは通常、ページ自体のダウンロードサイズが小さくなることを意味します。この考え方では、レイアウトと配置に関するすべての指示を外部スタイルシートに移動することを意味しています。HTTP の基本機能によると、これらはめったに変更されず、多くの Web ページに共通して適用されるため、最初のダウンロード後にキャッシュされ、再利用されます。これにより、サイト全体の帯域幅とダウンロード時間がさらに削減されます。^{[11] [12]}

ウェブサイトのメンテナンスでは、サイトの目的に応じて、ウェブサイトのビジュアル スタイルを頻繁に変更する必要があります。変更の規模は大小さまざまです。テーブル ベースのレイアウトでは、レイアウトは HTML 自体の一部です。そのため、HTML エディターなどのテンプレート ベースのビジュアル エディターの助けがなければ、サイト全体の要素の位置レイアウトを変更するには、必要な繰り返しの変更の量に応じて、多大な労力が必要になる場合があります。sed や同様のグローバル検索および置換ユーティリティを使用しても、問題を完全に軽減することはできません。

CSS を使用したテーブルレス レイアウトでは、レイアウト情報が CSS ドキュメント内に存在する場合があります。レイアウト情報が一元化されるため、これらの変更はデフォルトで迅速かつグローバルに実行できます。レイアウトを変更するときに、HTML ファイル自体を調整する必要がない場合があります。

また、レイアウト情報は HTML の外部に保存できるため、既存のページを変更する場合でも、新しいページを追加する場合でも、テーブルレス デザインで新しいコンテンツを追加するのは非常に簡単です。対照的に、このようなデザインがない場合、各ページのレイアウトには、各インスタンスを手動で変更したり、グローバルな検索と置換ユーティリティを使用したりする必要があるため、時間のかかる作業になります。ただし、サイト所有者は、短期的または長期的に、特定のページをサイト上の他のページと異なるものにしたいと考えることがよくあります。このため、そのページ用に別のスタイル シートを開発する必要が生じることがよくあります。ページ (またはテンプレート) のコンテンツは通常は変更せずにそのままにできますが、テーブルベースのデザインではそうではありません。

• フレーミング（ワールドワイドウェブ）
• レスポンシブウェブデザイン
• Webリテラシー（デザインとアクセシビリティ）
• Holy Grail（ウェブデザイン）

• W3C テーブルレスレイアウト HOWTO
• ウェブサイトのデザインにおいて CSS がテーブルよりも優れている 13 の理由
• Open Designs (W3C 準拠のテーブルレス Web テンプレートのコレクション)