<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>グリッドレイアウト練習問題</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: #333;
margin-bottom: 30px;
text-align: center;
}
h2 {
color: #555;
margin: 40px 0 20px;
padding-bottom: 10px;
border-bottom: 2px solid #4caf50;
}
.problem {
background: white;
padding: 20px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.problem h3 {
color: #4caf50;
margin-bottom: 15px;
}
.problem-description {
background: #f9f9f9;
padding: 15px;
margin-bottom: 20px;
border-left: 4px solid #4caf50;
}
.problem-description ul {
margin-left: 20px;
margin-top: 10px;
}
.problem-description li {
margin: 5px 0;
}
/* ===== 問題1: grid-template-columns の練習 ===== */
.grid-problem-1 {
/* TODO: ここにCSSを追加してください
* 条件:
* - display: grid を使用
* - 3列のグリッドを作成（各列200px）
* - 列間の間隔を20px
*/
}
.grid-problem-1 .item {
background: #64b5f6;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
/* ===== 問題2: grid-template-rows の練習 ===== */
.grid-problem-2 {
/* TODO: ここにCSSを追加してください
* 条件:
* - display: grid を使用
* - 2列のグリッドを作成（各列1fr）
* - 3行のグリッドを作成（1行目:100px、2行目:150px、3行目:100px）
* - 行と列の間隔を15px
*/
}
.grid-problem-2 .item {
background: #81c784;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
/* ===== 問題3: frユニットと固定幅の組み合わせ ===== */
.grid-problem-3 {
/* TODO: ここにCSSを追加してください
* 条件:
* - display: grid を使用
* - 3列のグリッド（200px、1fr、200px）
* - 列間の間隔を20px
*/
}
.grid-problem-3 .item {
background: #ffb74d;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
/* ===== 問題4: repeatを使った記述 ===== */
.grid-problem-4 {
/* TODO: ここにCSSを追加してください
* 条件:
* - display: grid を使用
* - repeat()を使って4列のグリッドを作成（各列1fr）
* - 列間の間隔を15px
*/
}
.grid-problem-4 .item {
background: #e57373;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
/* ===== 問題5: grid-template-areas の基本 ===== */
.grid-problem-5 {
/* TODO: ここにCSSを追加してください
* 条件:
* - display: grid を使用
* - 3列のグリッド（各列1fr）
* - 以下のレイアウトを作成:
* header header header
* sidebar main main
* footer footer footer
* - 行と列の間隔を15px
*/
}
.grid-problem-5 .header {
/* TODO: grid-area: header を指定 */
background: #ab47bc;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-5 .sidebar {
/* TODO: grid-area: sidebar を指定 */
background: #42a5f5;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-5 .main {
/* TODO: grid-area: main を指定 */
background: #66bb6a;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-5 .footer {
/* TODO: grid-area: footer を指定 */
background: #ffa726;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
/* ===== 問題6: 複雑なgrid-template-areas ===== */
.grid-problem-6 {
/* TODO: ここにCSSを追加してください
* 条件:
* - display: grid を使用
* - 4列のグリッド（各列1fr）
* - 以下のレイアウトを作成:
* header header header header
* nav content content sidebar
* nav content content sidebar
* footer footer footer footer
* - 行と列の間隔を20px
*/
}
.grid-problem-6 .header {
/* TODO: grid-area を指定 */
background: #7e57c2;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-6 .nav {
/* TODO: grid-area を指定 */
background: #26a69a;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-6 .content {
/* TODO: grid-area を指定 */
background: #66bb6a;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-6 .sidebar {
/* TODO: grid-area を指定 */
background: #ff7043;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.grid-problem-6 .footer {
/* TODO: grid-area を指定 */
background: #8d6e63;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
/* ===== 解答例（最初は非表示） ===== */
.answer {
background: #f0f0f0;
padding: 15px;
margin-top: 20px;
border-radius: 4px;
display: none;
}
.answer.show {
display: block;
}
.answer h4 {
color: #333;
margin-bottom: 10px;
}
.answer pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
font-size: 14px;
line-height: 1.5;
}
button {
background: #4caf50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
button:hover {
background: #45a049;
}
.note {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
margin: 20px 0;
}
.note strong {
color: #856404;
}
</style>
</head>
<body>
<div class="container">
<h1>🎯 CSSグリッドレイアウト練習問題</h1>
<div class="note">
<strong>📝 練習の進め方:</strong><br />
各問題のコメント部分にCSSを追加して、指定されたレイアウトを実現してください。<br />
解答例は各問題の下のボタンで確認できます。
</div>
<!-- 問題1 -->
<div class="problem">
<h3>問題1: grid-template-columns の基本</h3>
<div class="problem-description">
<p><strong>目標:</strong> 3列の固定幅グリッドを作成しましょう</p>
<ul>
<li>各列の幅を200pxに設定</li>
<li>列間の間隔を20pxに設定</li>
</ul>
</div>
<div class="grid-problem-1">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
<div class="item">アイテム4</div>
<div class="item">アイテム5</div>
<div class="item">アイテム6</div>
</div>
<button onclick="toggleAnswer('answer1')">解答例を表示</button>
<div id="answer1" class="answer">
<h4>解答例:</h4>
<pre>
.grid-problem-1 {
display: grid;
grid-template-columns: 200px 200px 200px;
column-gap: 20px;
}</pre
>
</div>
</div>
<!-- 問題2 -->
<div class="problem">
<h3>問題2: grid-template-rows の基本</h3>
<div class="problem-description">
<p>
<strong>目標:</strong> 列と行を両方指定したグリッドを作成しましょう
</p>
<ul>
<li>2列のグリッド（各列1fr）</li>
<li>3行のグリッド（1行目:100px、2行目:150px、3行目:100px）</li>
<li>行と列の間隔を15px</li>
</ul>
</div>
<div class="grid-problem-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<button onclick="toggleAnswer('answer2')">解答例を表示</button>
<div id="answer2" class="answer">
<h4>解答例:</h4>
<pre>
.grid-problem-2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 150px 100px;
gap: 15px;
}</pre
>
</div>
</div>
<!-- 問題3 -->
<div class="problem">
<h3>問題3: frユニットと固定幅の組み合わせ</h3>
<div class="problem-description">
<p><strong>目標:</strong> サイドバーレイアウトを作成しましょう</p>
<ul>
<li>左右のサイドバー: 200px（固定幅）</li>
<li>中央のコンテンツエリア: 1fr（可変）</li>
<li>列間の間隔を20px</li>
</ul>
</div>
<div class="grid-problem-3">
<div class="item">左サイドバー</div>
<div class="item">メインコンテンツ</div>
<div class="item">右サイドバー</div>
</div>
<button onclick="toggleAnswer('answer3')">解答例を表示</button>
<div id="answer3" class="answer">
<h4>解答例:</h4>
<pre>
.grid-problem-3 {
display: grid;
grid-template-columns: 200px 1fr 200px;
column-gap: 20px;
}</pre
>
</div>
</div>
<!-- 問題4 -->
<div class="problem">
<h3>問題4: repeat()関数を使った記述</h3>
<div class="problem-description">
<p><strong>目標:</strong> repeat()を使って効率的に記述しましょう</p>
<ul>
<li>4列のグリッド（各列1fr）</li>
<li>repeat()関数を使用</li>
<li>列間の間隔を15px</li>
</ul>
</div>
<div class="grid-problem-4">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<button onclick="toggleAnswer('answer4')">解答例を表示</button>
<div id="answer4" class="answer">
<h4>解答例:</h4>
<pre>
.grid-problem-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 15px;
}</pre
>
</div>
</div>
<!-- 問題5 -->
<div class="problem">
<h3>問題5: grid-template-areas の基本</h3>
<div class="problem-description">
<p>
<strong>目標:</strong>
エリア名を使った基本的なレイアウトを作成しましょう
</p>
<ul>
<li>ヘッダー: 全幅</li>
<li>サイドバー: 左側1列</li>
<li>メインコンテンツ: 右側2列</li>
<li>フッター: 全幅</li>
<li>行と列の間隔を15px</li>
</ul>
</div>
<div class="grid-problem-5">
<div class="header">ヘッダー</div>
<div class="sidebar">サイドバー</div>
<div class="main">メインコンテンツ</div>
<div class="footer">フッター</div>
</div>
<button onclick="toggleAnswer('answer5')">解答例を表示</button>
<div id="answer5" class="answer">
<h4>解答例:</h4>
<pre>
.grid-problem-5 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 15px;
}
.grid-problem-5 .header {
grid-area: header;
}
.grid-problem-5 .sidebar {
grid-area: sidebar;
}
.grid-problem-5 .main {
grid-area: main;
}
.grid-problem-5 .footer {
grid-area: footer;
}</pre
>
</div>
</div>
<!-- 問題6 -->
<div class="problem">
<h3>問題6: 複雑なgrid-template-areas</h3>
<div class="problem-description">
<p><strong>目標:</strong> より複雑なレイアウトを作成しましょう</p>
<ul>
<li>ヘッダー: 全幅（4列分）</li>
<li>ナビゲーション: 左端1列、縦2行分</li>
<li>コンテンツ: 中央2列、縦2行分</li>
<li>サイドバー: 右端1列、縦2行分</li>
<li>フッター: 全幅（4列分）</li>
<li>行と列の間隔を20px</li>
</ul>
</div>
<div class="grid-problem-6">
<div class="header">ヘッダー</div>
<div class="nav">ナビゲーション</div>
<div class="content">メインコンテンツ</div>
<div class="sidebar">サイドバー</div>
<div class="footer">フッター</div>
</div>
<button onclick="toggleAnswer('answer6')">解答例を表示</button>
<div id="answer6" class="answer">
<h4>解答例:</h4>
<pre>
.grid-problem-6 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"header header header header"
"nav content content sidebar"
"nav content content sidebar"
"footer footer footer footer";
gap: 20px;
}
.grid-problem-6 .header {
grid-area: header;
}
.grid-problem-6 .nav {
grid-area: nav;
}
.grid-problem-6 .content {
grid-area: content;
}
.grid-problem-6 .sidebar {
grid-area: sidebar;
}
.grid-problem-6 .footer {
grid-area: footer;
}</pre
>
</div>
</div>
<div class="note">
<strong>💡 学習のポイント:</strong><br />
<ul style="margin-left: 20px; margin-top: 10px">
<li>
<strong>grid-template-columns:</strong>
列の幅を定義（px、fr、%など）
</li>
<li><strong>grid-template-rows:</strong> 行の高さを定義</li>
<li>
<strong>grid-template-areas:</strong>
エリア名でレイアウトを視覚的に定義
</li>
<li>
<strong>gap:</strong> grid-gap の短縮形（row-gap と column-gap
を一度に指定）
</li>
<li><strong>fr単位:</strong> 利用可能なスペースを分割（flexible）</li>
<li><strong>repeat():</strong> 同じパターンを繰り返し定義</li>
</ul>
</div>
</div>
<script>
function toggleAnswer(id) {
const answer = document.getElementById(id);
answer.classList.toggle('show');
const button = answer.previousElementSibling;
if (answer.classList.contains('show')) {
button.textContent = '解答例を非表示';
} else {
button.textContent = '解答例を表示';
}
}
</script>
</body>
</html>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme