この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「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>