演習課題
Flexboxを使って実用的なレイアウトを段階的に作成してみましょう。各レベルをクリアして、Flexboxマスターを目指しましょう！
レベル1: 基本的な配置
まずは基本的な配置から始めましょう。
課題1-1: 水平中央配置
3つの要素を横一列に並べ、コンテナの中央に配置してください。
期待される結果:
- 3つの要素が水平方向に並んでいる
- 要素全体がコンテナの中央に配置されている
- 要素間に適度な余白がある
ヒント: display: flex, justify-content, gap プロパティを使用してください。
解答例を見る
.container {
height: 200px;
background-color: #f0f0f0;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
課題1-2: 完全中央配置
1つの要素をコンテナの完全な中央（水平・垂直ともに中央）に配置してください。
ヒント: justify-content と align-items の両方を使用してください。
解答例を見る
.container {
height: 200px;
background-color: #f0f0f0;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
課題1-3: 縦並び配置
3つの要素を縦一列に並べ、中央に配置してください。
ヒント: flex-direction: column を使用してください。
解答例を見る
.container {
height: 300px;
background-color: #f0f0f0;
border: 2px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
}
レベル2: 実用的なコンポーネント
実際のWebサイトでよく見かけるコンポーネントを作成してみましょう。
課題2-1: ナビゲーションバー
ロゴを左側に、メニューを右側に配置したナビゲーションバーを作成してください。
期待される結果:
- ロゴが左端に配置されている
- メニューが右端に配置されている
- メニュー項目が横並びに配置されている
解答例を見る
.navbar {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
課題2-2: カードコンポーネント
製品カードのレイアウトを作成してください。画像、タイトル、価格、ボタンが含まれます。
期待される結果:
- カードが縦方向にレイアウトされている
- コンテンツエリア内の要素が適切に配置されている
- ボタンがコンテンツエリアの下部に配置されている
解答例を見る
.card {
width: 250px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.card-content {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
課題2-3: ボタングループ
異なるサイズのボタンを横並びに配置し、中央揃えにしてください。
解答例を見る
.button-group {
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
レベル3: 複合レイアウト
より複雑なレイアウト構造を作成してみましょう。
課題3-1: ヘッダー・サイドバー・メインレイアウト
Webサイトの基本的な構造を作成してください。ヘッダー、サイドバー、メインコンテンツの3つのセクションからなります。
期待される結果:
- ヘッダーが上部に固定されている
- サイドバーが固定幅（約200px）で左側に配置されている
- メインコンテンツが残りのスペースを占有している
解答例を見る
.main-layout {
display: flex;
height: calc(100% - 80px);
}
.sidebar {
background-color: #f8f9fa;
padding: 20px;
border-right: 1px solid #ddd;
flex: 0 0 200px;
}
.content {
padding: 20px;
flex: 1;
}
課題3-2: カードグリッド
複数のカードを格子状に配置し、画面幅に応じて自動的に折り返すレイアウトを作成してください。
期待される結果:
- カードが横に並んで表示される
- 画面幅が狭くなると自動的に次の行に折り返される
- カード間に適切な余白がある
- カードの高さが揃っている
解答例を見る
.card-grid {
padding: 20px;
background-color: #f8f9fa;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1 1 250px;
}
レベル4: 高度なレイアウト
最後に、より実践的で高度なレイアウトに挑戦してみましょう。
課題4-1: フッター固定レイアウト
コンテンツの量に関係なく、フッターを常にページの下部に固定するレイアウトを作成してください。
期待される結果:
- ヘッダーが上部に配置されている
- メインコンテンツが中央の領域を占有している
- フッターが下部に固定されている
- コンテンツが少なくてもフッターは下部に位置する
解答例を見る
.page {
height: 400px;
border: 2px solid #ccc;
display: flex;
flex-direction: column;
}
.page-main {
padding: 20px;
background-color: white;
flex: 1;
}
課題4-2: レスポンシブダッシュボード
統計カードとチャートエリアを含むダッシュボードレイアウトを作成してください。
期待される結果:
- 統計カードが横並びに表示される（画面幅に応じて折り返し）
- チャートエリアが下部に配置される
- 全体的にバランスの取れたレイアウト
解答例を見る
.dashboard {
padding: 20px;
background-color: #f8f9fa;
min-height: 400px;
display: flex;
flex-direction: column;
}
.stats-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.stat-card {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1 1 200px;
}
.chart-area {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 30px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1;
}
おめでとうございます！🎉
すべての課題をクリアした方は、Flexboxの基本から応用まで習得できています。これらの知識を活用して、より複雑で実用的なWebレイアウトを作成してみてください。
次のステップ
- CSS Grid - より複雑な2次元レイアウトに挑戦
- レスポンシブデザイン - メディアクエリと組み合わせた実装
- アニメーション - CSS TransitionsやAnimationsと組み合わせ
- 実際のプロジェクト - 学んだ知識を実際のWebサイト作成に活用
Flexboxマスターへの道のりを楽しんでください！