10.1 メディアクエリとの組み合わせ
CSS Grid Layoutは、複雑で適応性のあるレイアウトを作成するための素晴らしいツールを提供します。CSS Gridとメディアクエリを組み合わせることで、様々な画面サイズやデバイスに適応するレイアウトを作成できます。ここでは、どのようにメディアクエリをCSS Gridと一緒に使って柔軟で適応性のあるウェブページを作成するかを見てみましょう。
メディアクエリの基本概念
メディアクエリは、例えば画面の幅、高さ、向きなどのデバイスの特性に応じて異なるCSSスタイルを適用できます。CSS Gridと組み合わせることで、画面サイズに応じて要素の構造や配置を変更できます。
メディアクエリの構文:
@media (条件) {
/* 条件が満たされた場合に適用されるスタイル */
}
ここで「条件」は、スタイルが適用される条件です。通常、画面の幅に関連する条件、例えばmax-widthやmin-widthなどが使われます。
10.2 列の数の変更
完全な実装例（画面幅に応じた列数の変更）:
CSS
/* すべての画面に対する基本スタイル */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* 600px以上の画面用 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* 2列 */
}
}
/* 900px以上の画面用 */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 3列 */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gridによるレスポンシブレイアウト</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">エレメント1</div>
<div class="grid-item">エレメント2</div>
<div class="grid-item">エレメント3</div>
<div class="grid-item">エレメント4</div>
<div class="grid-item">エレメント5</div>
<div class="grid-item">エレメント6</div>
</div>
</body>
</html>
コードの説明:
- 基本スタイル: すべての画面に対して1列のGridコンテナを作成
- 600px以上の画面用メディアクエリ: レイアウトを2列に変更
- 900px以上の画面用メディアクエリ: レイアウトを3列に変更
10.3 画面の幅に依存する配置
完全な実装例（画面幅に応じた要素の配置変更）:
CSS
/* すべての画面に対する基本スタイル */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
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;
}
/* 600px以上の画面用 */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* 900px以上の画面用 */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gridによるレスポンシブ配置</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>
コードの説明:
- 基本スタイル: すべての画面に対して4行1列のGridコンテナを作成
- 600px以上の画面用メディアクエリ: レイアウトを2列に変更し、エリアの配置を変更: ヘッダーが2列を占め、メインとサイドバーが各1列、フッターが2列を占めます
- 900px以上の画面用メディアクエリ: レイアウトを3列に変更し、エリアの配置を変更: ヘッダーが3列を占め、メインとサイドバーが1列と2列を占め、フッターが3列を占めます
10.4 要素のサイズ変更
完全な実装例（画面幅に応じた要素のサイズ変更）:
CSS
/* すべての画面に対する基本スタイル */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* 600px以上の画面用 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* 900px以上の画面用 */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gridによるレスポンシブサイズ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">エレメント1</div>
<div class="grid-item item2">エレメント2</div>
<div class="grid-item item3">エレメント3</div>
<div class="grid-item item4">エレメント4</div>
<div class="grid-item item5">エレメント5</div>
<div class="grid-item item6">エレメント6</div>
</div>
</body>
</html>
コードの説明:
- 基本スタイル: すべての画面に対して2列と自動的な100pxの高さを持つ行のGridコンテナを作成
- 600px以上の画面用メディアクエリ: レイアウトを3列に変更し、行の高さを150pxに拡大
- 900px以上の画面用メディアクエリ: レイアウトを4列に変更し、行の高さを200pxに拡大
GO TO FULL VERSION