聖杯レイアウト

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 26/35。

ホーリーグレイル・レイアウトは、上部にヘッダー、下部にフッター、そして中央に3つのカラムを配置した、古典的なウェブデザインのパターンです：

左サイドバー (ナビゲーションまたはリンク)
メインコンテンツ (中央)
右サイドバー (追加情報、広告、またはウィジェット)

メインコンテンツを中央に配置し、ブログやニュースサイト、ダッシュボードなどで非常によく使われていることから、「聖杯（Holy Grail）」と呼ばれています。

仕組み:

CSS Flexbox または Grid で構築されています。
メインコンテンツはスペースを埋めるように広がり、サイドバーは固定幅またはより狭い幅になります。
小さな画面では、読みやすさを向上させるために、サイドバーはメインコンテンツの上または下に積み重なります。

CSS Grid を使用した例 (簡略化)

HTML:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS:

.container {
 display: grid;
 grid-template-areas:
   "header header header"
   "nav main aside"
   "footer footer footer";
 grid-template-columns: 200px 1fr 200px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

チャレンジ

簡単

以下の要件に従って、Holy Grail Layoutを作成してください：

ヘッダーとフッターの背景色に、--main-color という名前のCSS変数を使用してください。
header、footer、nav、main、および aside の grid-area 値を定義してください。
ヘッダーとフッター内のテキストを中央揃えにしてください。

チートシート

ホーリーグレイル・レイアウト（Holy Grail Layout）は、ヘッダー、フッター、そして3つのカラム（左サイドバー（ナビゲーション）、メインコンテンツ（中央）、右サイドバー）で構成される、古典的なウェブデザインのパターンです。

構造:

<div class="container">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

CSS Gridによる実装:

.container {
 display: grid;
 grid-template-areas:
   "header header header"
   "nav main aside"
   "footer footer footer";
 grid-template-columns: 200px 1fr 200px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

メインコンテンツは利用可能なスペースを埋めるように広がり（1fr）、サイドバーは固定幅を持ちます。小さな画面では、読みやすさを向上させるために、通常サイドバーは縦に積み重なるように配置されます。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Holy Grail Layout</title>
  <style>
    :root {
      --main-color: rgb(76, 175, 239); /* header/footer */
      --accent-color: #ff9800; /* highlights */
      --text-color: #333;
      --heading-color: #222;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #a9eef3;
      color: var(--text-color);
    }

    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
      grid-template-columns: 160px 1fr 180px;
      min-height: 100vh;
      gap: 1rem;
    }

    header {
      color: white;
      padding: 1.5rem;
    }

    footer {
      color: white;
      padding: 1rem;
    }

    nav {
      background: #f4f4f4;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    nav h3 {
      margin-top: 0;
      color: var(--heading-color);
    }

    nav ul {
      list-style: none;
      padding: 0;
    }

    nav li {
      margin: 0.5rem 0;
    }

    nav a {
      text-decoration: none;
      color: var(--text-color);
      padding: 0.3rem 0.5rem;
      border-radius: 4px;
      transition: background 0.2s;
    }

    nav a:hover {
      background: var(--accent-color);
      color: white;
    }

    main {
      padding: 1.5rem;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    main h2 {
      margin-top: 0;
      color: var(--heading-color);
    }

    aside {
      background: #fff7e6;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    aside h3 {
      margin-top: 0;
      color: var(--accent-color);
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>Travel Adventures</h1>
      <p>Explore the world, one journey at a time</p>
    </header>

    <nav>
      <h3>Navigation</h3>
      <ul>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Travel Tips</a></li>
        <li><a href="#">Photo Gallery</a></li>
      </ul>
    </nav>

    <main>
      <h2>Featured Destination: Japan</h2>
      <p>
        Japan is a country where ancient traditions meet modern innovation. 
        From the serene temples of Kyoto to the bustling streets of Tokyo, 
        there’s something for every traveler.
      </p>
      <p>
        Don’t forget to try sushi, explore cherry blossoms in spring, 
        and relax in an onsen hot spring bath.
      </p>
    </main>

    <aside>
      <h3>Quick Facts</h3>
      <ul>
        <li>Capital: Tokyo</li>
        <li>Language: Japanese</li>
        <li>Currency: Yen</li>
      </ul>
    </aside>

    <footer>
      <p>&copy; 2025 Travel Adventures Blog</p>
    </footer>
  </div>
</body>
</html>