演習課題

Flexboxを使って実用的なレイアウトを段階的に作成してみましょう。

課題1: ヘッダー・サイドバー・メインレイアウト

Webサイトの基本的な構造を作成してください。ヘッダー、サイドバー、メインコンテンツの3つのセクションからなります。

⛳目標レイアウト

Webサイトのタイトル

メインコンテンツ

ここにメインのコンテンツが入ります。サイドバーは固定幅で、メインコンテンツは残りのスペースを占有します。

🎨Playground

HTML

Loading...

CSS

Loading...

プレビュー

期待される結果:

• ヘッダーが上部に固定されている
• サイドバーが固定幅（約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;
}

課題2: フッター固定レイアウト

コンテンツの量に関係なく、フッターを常にページの下部に固定するレイアウトを作成してください。 コンテンツが少なくてもフッターは下部に位置するようにします。

⛳目標レイアウト

ヘッダー

メインコンテンツ

コンテンツの量が少なくても、フッターはページの下部に固定されます。

コンテンツを追加してみてください。

© 2025 My Website. All rights reserved.

🎨Playground

HTML

Loading...

CSS

Loading...

プレビュー

解答例を見る

.page {
  height: 400px;
  border: 2px solid #ccc;
  display: flex;
  flex-direction: column;
}

.page-main {
  padding: 20px;
  background-color: white;
  flex: 1;
}