9.1 プロパティ grid-template-areas
CSS Grid Layoutは、名前付きエリア (grid areas)を使用することで、複雑なレイアウトを作成するための強力な機能を提供するんだよ。
プロパティ grid-template-areas は、グリッドのエリアを設定して、要素をシンプルに配置するために使えるんだ。
このプロパティは、開発者がレイアウトを視覚的に整理し、保守を簡単にすることを可能にするよ。
grid-template-areas の基本的なコンセプト
-
エリアの定義:
- プロパティ
grid-template-areasを使って、グリッドのさまざまなエリアに名前を設定することができるんだ - 各エリアの名前は、セルの長方形のグループを表すよ
- プロパティ
-
名前付きエリアの使用:
-
定義されたエリアは、各要素に対してプロパティ
grid-areaを指定することで、要素を配置するために使用できるんだ
-
定義されたエリアは、各要素に対してプロパティ
grid-template-areas の構文:
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"
}
Grid要素の構文:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
説明:
- 各行の
grid-template-areasの値がグリッド内の行を表すんだよ - 各単語は、セルまたはセルのグループを表すよ
- ドット (.) は空のセルに使えるんだ
9.2 grid-template-areas の使用例
完全な実装例:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas の例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
コードの説明:
-
.grid-container:display: gridとgrid-template-areasを使って、Gridコンテナを定義して、グリッドレイアウトを設定するんだよ。この場合、レイアウトは3つの行で構成されているんだ：最初の行はヘッダー、2行目はサイドバーとメインコンテンツ、3行目はフッターだね -
.header,.sidebar,.main,.footer: さまざまなグリッドエリアのスタイルを定義して、grid-areaプロパティを使って、これらのエリアをgrid-template-areasの名前と関連付けるんだ
9.3 空のエリアの管理
プロパティ grid-template-areas を使用すると、ピリオド (.) を使って空のスペースを表現することで、エリアを空のままにしておくことができるんだ。
完全な実装例:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
". main ."
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空の Grid Areas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
コードの説明:
-
.grid-container: ヘッダー、メインコンテンツ、フッターの3つのエリアでGridコンテナを作成するんだ。中央の行は、メインコンテンツの左右に空のエリアがあるよ -
.header,.main,.footer: エリアのスタイルを定義して、grid-template-areasのエリア名と関連付けるんだ
GO TO FULL VERSION