グリッドの設定

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 35/43。

チャレンジ

簡単

このシリーズでは、CSS Gridを使用してレスポンシブなウェブサイトのレイアウトを構築します。

まず、これから作成するものを見てみましょう：

以下の要素を持つウェブサイトです：

ヘッダー
サイドバー
メインコンテンツエリア
フッター

完成図は以下のようになります：

まずは、ウェブサイト全体のグリッド構造を作成することから始めましょう！タスク：

.container をグリッドレイアウトにします。
3カラム（列）構造を作成します。
3つの行を定義します：ヘッダー用、メインコンテンツ用、そしてフッター用です。
グリッドエリア名を使用して、次のようにレイアウトを配置します："header header header" "hero featured featured" “footer footer footer”

5. アイテム間とコンテナの周囲に余白を追加して、見た目をすっきりさせます。

6. クラスセレクタ .header、.hero、.featured、.footer を使用して、各セクションに正しい grid-area 名を割り当てます。

自分で試してみよう

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>