この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

`grid-template-areas` プロパティとは

grid-tempalte-areas は、グリッドコンテナにアスキーアートのようにレイアウトの設計図を描くことで、非常に直感的にグリッドアウトを定義できる画期的な方法です。

grid-template-areas の仕組み

コンテナ側でエリアを定義：grid-template-areas プロパティで、各セルに名前をつけた「設計図」を作成
アイテム側でエリアを指定：各グリッドアイテムに grid-area プロパティを使い、設計図のどの名前のエリアに入るかを指定

例えば、以下の CSS だけで、ヘッダーとフッターが2列にまたがり、メインとサイドバーが中央の行に配置されるレイアウトが完成します。

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

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

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フロントエンド1000本ノック 0057</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 150px 1fr 150px;
      grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    }
    .header { grid-area: header;}
    .main { grid-area: main;}
    .nav { grid-area: nav;}
    .aside { grid-area: aside;}
    .footer { grid-area: footer;}
  </style>
</head>
<body>

  <div class="grid-container">
    <header class="header">ヘッダー</header>

    <main class="main">メイン</main>

    <nav class="nav">ナビゲーション</nav>

    <aside class="aside">サイドバー</aside>

    <footer class="footer">
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>
  </div>

</body>
</html>