聖杯（ウェブデザイン）

ウェブデザインにおける聖杯とは、スタイルシートで定義された複数の等高列を持つウェブページレイアウトのことである。これは一般的に望まれ、実装されているが、長年にわたり、利用可能な技術で実装できるさまざまな方法には、すべて欠点があった。 ^[1]このため、最適な実装を見つけることは、とらえどころのない聖杯を探すことに例えられた。

CSS と HTML の制限、検索エンジンで上位にランクされる意味的に意味のあるページが望まれること、およびさまざまなブラウザーの欠陥が歴史的に組み合わさり、完全に正しいと見なされるこのタイプのレイアウトを作成する方法が存在しない状況が生まれました。基盤となるテクノロジが適切なソリューションを提供しなかったため、Web デザイナーはさまざまな方法で制限を回避しました。一般的な回避策には、ページ構造の変更、グラフィックスの追加、スクリプト、および CSS の創造的な使用が含まれていました。これらの方法は不完全で不便であり、Web 標準とその意図の乱用であると考える人もいました。

最近のウェブ標準では、このレイアウトを実装するためのより完全で堅牢なソリューションが提供されています。特に、CSSフレキシブルボックスレイアウトモジュールとCSSグリッドレイアウトモジュールはどちらも完全なソリューションを提供しています。^{[2] [3]}

多くの Web ページでは、複数の (多くの場合 3 つの) 列のレイアウトが必要であり、メイン ページのコンテンツは 1 つの列 (多くの場合は中央) に、メニューや広告などの補足コンテンツは他の列 (サイドバー) に表示されます。これらの列には通常、境界線のある別々の背景が必要であり、どの列のコンテンツが最も高いかに関係なく、同じ高さで表示される必要があります。一般的な要件は、サイドバーの幅を固定し、中央の列のサイズがウィンドウに合わせて調整されることです (流動レイアウトまたはリキッド レイアウト)。もう 1 つの一般的な要件は、ページに画面を埋めるのに十分なコンテンツがない場合、フッターの下に空白スペースを残すのではなく、ブラウザー ウィンドウの下部にフッターを配置することです。

これを達成するには多くの障害がありました。

• CSS はスタイル設定には非常に便利ですが、ページレイアウトの機能は限られています。
• ブロック要素 (div 要素など) の高さは通常、そのコンテンツによって決まります。そのため、コンテンツの量が異なる 2 つの分割要素が隣り合っている場合、その高さが何らかの方法で適切な値に設定されていない限り、それらの分割要素の高さは異なります。
• HTML は意味論的に使用されることを意図しており、コンテンツを正確に説明する HTML 要素を選択する必要があります。ユーザー エージェントによってレンダリングされる Web ページの外観は、スタイル ルールによって独立して決定する必要があります。多くの実装では、表形式ではないコンテンツにテーブルを使用したり、意味論的な目的なしに複数のdiv要素をネストしたりして、HTML を誤って使用しています。HTML を意味論的に使用しないと、ページ コンテンツの構造を判別しようとしているユーザーやユーザー エージェントが混乱し、アクセシビリティの問題になります。^[4]
• 検索エンジンは、 Web ページのソース コードの先頭にあるコンテンツをより関連性が高いと見なす場合があり、スクリーン リーダーなどの一部のユーザー エージェントではコンテンツがソース コードの順序で読み取られるため、Web デザイナーは、ページの外観に影響を与えずに、ページ ソース内のコンテンツを任意の順序で配置できることを望んでいます。
• ブラウザによってコンテンツが正しくレンダリングされないため、標準に準拠したブラウザで機能する方法が、CSS を正しく実装していないブラウザでは機能しない可能性があります。

CSS が広く実装される前は、デザイナーはページをレイアウトするためにテーブルをよく使用していました。複数のテーブルを互いにネストすることで、目的のレイアウトを実現することがありました。列をテーブル セル内に配置すると、目的の外観を簡単に実現できますが、テーブルを使用することは意味的に正しくありません。ただし、WAI-ARIA HTML 属性の「role」を「presentation」に設定して、意味的なコンテキストを取り戻すことはできます。また、ページ ソース内の列の順序を制御する方法はありません。

CSSプロパティを使用して列の高さを等しくすることができますdisplay。^[5]display: tableこれには、とに設定されたネストされたコンテナ区分display: table-rowと に設定された列が必要ですdisplay: table-cell。これは表示のみが影響を受けるため、意味的には正しいです。ただし、この方法ではソースコードの順序を制御することができません。また、Internet Explorer 7など、サポートされていない古いブラウザでは機能しません。

この方法では、3 つの列すべての背景色と垂直境界線を提供する背景画像を使用します。^[6]各列の内容は区切りで囲まれ、フロート、負の余白、相対配置などのテクニックを使用して背景上に配置されます。背景は通常、数ピクセルの高さで、「repeat-y」属性を使用してページを覆うように作成されます。これは固定幅レイアウトでは問題なく機能し、パーセンテージベースの可変幅ページにも適応できますが、流動的な中央ページには使用できません。

この方法では、ページが読み込まれた後、スクリプトが各列の高さを測定し、各列の高さを大きい値に設定します。これは、JavaScript をサポートしていないブラウザや、JavaScript が無効になっているブラウザでは機能しません。

この方法では、列の区切りの角がページ上の特定の場所に固定されます。^[7]これは許容できる、あるいは望ましいことかもしれませんが、レイアウトが大幅に異なるため、聖杯の問題を解決することはできません。この方法の結果、列の下に表示されるコンテンツ（フッターなど）が画面の下部に固定され、列コンテンツの下に空白スペースができ、すべてのコンテンツを表示するには各列にスクロールバーが必要になる可能性があります。

背景を持つ区画は、そのコンテンツを収めるために高さが増します。この動作は、3 つの背景を提供する 3 つの区画を互いにネストすることで問題を解決するために使用されます。これらの区画は、配置技術を使用して適切な場所に配置され、3 つのコンテンツ区画は、それぞれの背景の上に配置される最も内側の背景区画内に配置されます。すると、背景区画は最も高いコンテンツ区画と同じ高さになります。この方法の欠点は、3 つの非セマンティックな区画と、この複雑なレイアウトの要素を配置するのが難しいことです。^[8]

ネストされた分割方法のより単純なバージョンでは、単一のコンテナ分割を使用します。この分割の背景プロパティは中央の列の背景を提供し、左右の境界線はサイドバーの背景色を提供します。左右の境界線の幅は、サイドバーの列の幅と同じになります。各列の内容は、背景の上に配置されます。この方法では、依然として 1 つの非セマンティック分割が使用され、サイドバーに背景画像と境界線を適用することが困難になります。^[9]

列コンテナの下部に大量のパディングを配置すると、背景は列コンテンツよりはるかに下まで広がります。対応する負のマージンにより、列の下のコンテンツが適切な位置に戻ります。この方法では、列のコンテンツのコンテナに背景も含まれるため、配置が簡単です。32767px のパディング値は、すべての最新ブラウザで認識される最大の値です。列の高さの差がこれより大きい場合、短い列の背景は列を完全に埋めません。^[10]

CSS3標準には、ページ要素を適切にレイアウトできるモジュールが含まれています。これらのうち2つは、聖杯問題を完全に解決します。^{[1] [11]}これらのモジュールのサポートは、古いブラウザーでは欠如しているか、不十分です。多くのデザイナーは、古いブラウザーと互換性のあるスタイルを提供しながらこれらのモジュールを実装しますが、これは新しい構文によって最新のブラウザーで上書きされます。2020年にWindows 7の延長サポートが終了し、Internet Explorerの使用が一般的ではなくなったため、古いブラウザーのサポートはそれほど重要ではなくなりました。

ワールドワイドウェブコンソーシアム（W3C）は、さまざまな提案を通じてレイアウトの問題に取り組んできました。最も成熟した提案は、2018年11月現在、勧告候補となっているフレキシブルボックスレイアウトモジュール（別名フレックスボックス）です。 ^[12]要素のdisplayプロパティをdisplay: flexまたはに設定すると、display: inline-flex要素は新しいタイプのコンテナ（それぞれブロックまたはインラインブロックに類似）になり、子オブジェクトを配置する新しい方法が使用されます。W3Cの提案には、4つのシンプルなCSSルールを使用して究極の列レイアウトを実現し、シンプルなメディアクエリルールでレイアウトをレスポンシブにする例が含まれています。このモジュールは、他の多くのレイアウトの問題に対処するためにも使用できます。

フレキシブルボックスレイアウトモジュールはすべての最新ブラウザでサポートされていますが、Internet Explorerの実装には問題があります。^[13]

グリッドレイアウトモジュールも同様に、デザイナーがレイアウト用のコンテナを作成できるようにします。このコンテナには、要素を配置できる固定サイズまたは可変サイズの行と列が含まれます。2020年12月現在、勧告候補の状態です。 ^[14]すべての最新ブラウザでサポートされていますが、Internet Explorerの実装には問題があります。^[15]このモジュールは、グリッド配置モジュール、テンプレートレイアウトモジュール、および高度なレイアウトモジュールとして行われた以前の作業の続きです。^[16]

このモジュールの 1 つの特徴は、廃止されたテンプレート レイアウト モジュールと同様に、 「 ASCII アート」と呼ばれる方法で、コンテナー内に半グラフィカルにグリッド スロットを作成できることです。

フレキシブルボックスモジュールは2次元のページレイアウトを実行できますが、その本来の目的は、主に単一の軸に沿って要素を配置することです。グリッドレイアウトは、複雑なページや、レスポンシブデザインでレイアウトが大きく変化するページのレイアウトに適しています。^[17]

2001年、BlueRobot ^[18]の Rob Chandanai 氏は、wrongwaygoback.com というウェブサイトで、純粋な CSS を使用した最初の 3 列のフランキング デザインを開発しました。この革新以前は、Neale Talbot 氏が右側の列の配置に JavaScript を利用していました。Chandanais 氏の画期的な発明により、スクリプトの必要性がなくなり、レイアウト作成が簡素化される、より洗練されたソリューションが実現しました。

このデザインアプローチは後にGlish.comのEric Costelloによって「聖杯」というニックネームが付けられ、^[19]ウェブ開発におけるその重要性を強調しました。このマイルストーンは、複雑なレイアウトにおけるCSSの威力を示しただけでなく、数え切れないほど多くのデザイナーがプロジェクトでカスケーディングスタイルシートの可能性を最大限に探求するきっかけとなり、ウェブデザインの実践に大きな変化をもたらしました。

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