名前付きエリア

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

行番号を使って項目を配置する代わりに、grid-template-areasプロパティを使って、grid の各部分に名前を付けることができます。この方法は、特に header、sidebar、footer のような複数のセクションを扱う場合に、すっきりして読みやすいレイアウトを作成するのに適しています。以下の例を見てみましょう。

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";
}

テキストの各行が行になり、行内の各単語がグリッドの一部になります。単語を繰り返すと、そのareaはより広いスペースにまたがって広がります。

次に、HTML要素を次のようにそれらの名前に対応付けます。

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

チャレンジ

簡単

下の画像のように、次のareaを持つ基本的なWebページのCSSグリッドレイアウトを作成してください。

.containerセレクターに次のプロパティを設定してください。

displayをgridにする
grid-template-columnsを1fr 3frにする
grid-template-rowsをauto 1fr autoにする
grid-template-areasを次のようにする：
"header header"
"profile main"
"footer footer"

各要素をそれぞれ対応するareaにAssignしてください。たとえば、.headerにはgrid-areaをheaderに設定します。

自分で試してみよう

<!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>