聖杯（ウェブデザイン）
フッターをドロップする聖杯レイアウト

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

CSSとHTMLの限界、検索エンジンで上位に表示される意味的に意味のあるページへの要望、そして様々なブラウザの欠陥が歴史的に相まって、完全に正しいとみなされるレイアウトを作成することが不可能な状況を生み出しました。基盤となる技術が適切な解決策を提供しなかったため、Webデザイナーは様々な方法で限界を回避しようとしました。一般的な回避策としては、ページ構造の変更、グラフィックの追加、スクリプトの記述、CSSの独創的な活用などが挙げられました。しかし、これらの方法は不完全で不便であり、Web標準とその意図を乱用していると考える人もいました。

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

問題

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

フロート列とクリアフッターを備えた CSS レイアウト（聖杯機能なし）

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

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

既知の回避策

表

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

display:table による分割

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

偽の柱

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

JavaScript

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

固定または絶対位置

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

ネストされた分割

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

境界線の色

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

下部パディング

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

現在の解決策

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

CSS フレキシブルボックスレイアウト（Flexbox）

ワールド・ワイド・ウェブ・コンソーシアム（W3C）は、様々な提案を通じてレイアウト問題に取り組んできました。最も成熟した提案は、フレキシブルボックスレイアウトモジュール（Flexbox）であり、2018年11月現在、勧告候補となっています。[ 11 ]フレキシブルボックスレイアウトモジュールは、すべての最新ブラウザでサポートされています。[ 12 ]

要素の display プロパティをdisplay: flexまたはに設定するdisplay: inline-flexと、その要素は新しいタイプのコンテナ（それぞれブロックまたはインラインブロックに類似）になり、子オブジェクトの配置方法が新しくなります。W3C の提案には、4 つのシンプルな CSS ルールで究極の列レイアウトを実現し、シンプルなメディアクエリルールでレイアウトをレスポンシブにする例が含まれています。このモジュールは、その他多くのレイアウトの問題にも対処できます。

CSSグリッドレイアウト

グリッドレイアウトモジュールは、同様に、デザイナーがレイアウト用のコンテナを作成できるようにします。コンテナには、要素を配置できる固定または可変サイズの行と列が含まれます。これは勧告候補のステータスにあり、2025年3月時点で新しいドラフトが公開されています。 [ 13 ] Opera Miniを除くすべての最新ブラウザでサポートされています。[ 14 ]このモジュールは、グリッド配置モジュール、テンプレートレイアウトモジュール、および高度なレイアウトモジュールとして行われた以前の作業の続きです。[ 15 ]

このモジュールの特徴の一つは、コンテナ内にグリッドスロットを半グラフィカルに作成できることです。これは、廃止されたテンプレートレイアウトモジュールと同様に、「ASCIIアート」と表現される手法です。例えば、以下は全幅ヘッダー、3つの列、全幅フッターを持つページレイアウトグリッドを定義しています（グリッドアイテムのサイズを設定するには、追加のCSSルールが必要です）。 

本文{ディスプレイ:グリッド;グリッド: "hh h" "lc r" "ff f" ; }

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

歴史

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

このデザインアプローチは後にGlish.comのエリック・コステロによって「聖杯」と称され[ 18 ]、ウェブ開発におけるその重要性を際立たせました。この画期的な出来事は、複雑なレイアウトにおけるCSSの威力を示しただけでなく、数え切れないほどのデザイナーがプロジェクトにおいてカスケーディング・スタイルシートの可能性を最大限に探求するきっかけとなり、ウェブデザインの実践に大きな変化をもたらしました。

参照

参考文献

  1. ^ a b .appendTo: 聖杯レイアウトの解決
  2. ^ a b Walton, Philip. 「Holy Grail Layout」 . Flexboxで解決. 2019年3月26日閲覧。
  3. ^ 「5行のCSSで作る聖杯レイアウト」 CSS -Tricks . 2019年3月26日閲覧。
  4. ^ 「HTML 標準」 . html.spec.whatwg.org .
  5. ^ 「インターネットを構築する：高さが同じ柱を作る4つの方法」。2012年4月6日時点のオリジナルよりアーカイブ。2012年2月27日閲覧。
  6. ^ Cederholm, Dan (2004年1月9日). 「Faux Columns」 . A List Apart .
  7. ^ 「テーブルレスレイアウトHOWTO」www.w3.org。
  8. ^ 「等高列（CSSグリッド、フレックスボックス、テーブルメソッド）」マシュー・ジェームズ・テイラー。
  9. ^ Pearce, Alan (2008年8月6日). 「Multi-Column Layouts Climb Out of the Box」 . A List Apart .
  10. ^ 「CSS 等高列：コード例付き実践ガイド」 www.positioniseverything.net 2021年12月15日。
  11. ^ 「CSS フレキシブルボックスレイアウトモジュール レベル 1 」。www.w3.org 。
  12. ^ 「HTML5、CSS3などのテーブルをサポートできますか？」 CanIUse.com 。 2016年2月27日閲覧。
  13. ^ 「CSS グリッドレイアウトモジュールレベル1 」。www.w3.org 。
  14. ^ 「CSS グリッド レイアウト (レベル 1) | 使用できますか... HTML5、CSS3 などのテーブルをサポートします」。caniuse.com 。
  15. ^ Bos, Bert; Acebal, César (2015年3月26日). 「CSSテンプレートレイアウトモジュール」 . www.w3.org .
  16. ^ 「フレックスボックスがページレイアウトに適さない理由 - タブ補完」www.xanthir.com。
  17. ^ 「Blue Robot | メッセージング、チャットボット、ソーシャルエクスペリエンス」 www.bluerobot.com 。 2013年4月25日時点のオリジナルよりアーカイブ。
  18. ^ 「Glish.com レイアウトテクニック – 3カラム、聖杯」 2008年12月1日時点のオリジナルよりアーカイブ。 2013年5月15日閲覧。
「 https://en.wikipedia.org/w/index.php?title=Holy_grail_(web_design)&oldid=1317293332」より取得