名前付きエリア

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

行番号を使ってアイテムを配置する代わりに、grid-template-areas プロパティを使用してグリッドの各部分に名前を付けることができます。この手法は、クリーンで読みやすいレイアウトを作成するのに最適です。特に、ヘッダー、サイドバー、フッターなどの複数のセクションを扱う場合に適しています。以下の例を確認してください。

CSS Gridを使用してコンテナを定義し、grid-template-areasを使用して名前付きレイアウトを作成します：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

テキストの各行が1つの行（row）になり、行内の各単語がグリッドの一部になります。単語を繰り返すと、その領域はより広いスペースに広がります。

次に、次のようにHTML要素をそれらの名前に対応させます：

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

下の画像のような、基本的なウェブページのCSSグリッドレイアウトを作成してください：

.containerセレクタに以下のプロパティを設定してください：

displayをgridに設定
grid-template-columnsを1fr 3frに設定
grid-template-rowsをauto 1fr autoに設定
grid-template-areasを以下のように設定：
"header header"
"profile main"
"footer footer"

各要素をそれぞれのエリアに割り当てます。例えば、.headerの場合はgrid-areaをheaderに設定します。

チートシート

grid-template-areas を使用して、名前付きグリッドレイアウトを作成します：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

テキストの各行が1つの行（row）を作成し、行内の各単語がグリッドの一部になります。単語を繰り返すと、そのエリアがより広いスペースに拡張されます。

grid-area を使用して、要素をグリッドエリアに割り当てます：

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。