レイアウト練習

下記レイアウトの練習を再現しつつ、視覚的に分かりやすいようにcssを追加して確認してください。

練習 1: 二列比率指定（CSS Gridを使用）

目標

グリッドシステムを使用して、指定された比率で2列のレイアウトを作成します。

html
<div class="grid-container">
  <div class="column1">カラム1</div>
  <div class="column2">カラム2</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1:2の比率 */
}

.column1, .column2 {
  padding: 10px;
  border: 1px solid #ddd;
}

練習 2: 一列max-width付きauto, 一列比率指定

目標

一つのカラムに最大幅を設定し、残りのスペースをもう一つのカラムが占めるようにします。

html
<div class="grid-container">
  <div class="column1">カラム1（最大幅あり）</div>
  <div class="column2">カラム2</div>
</div>
css
.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.column1 {
  max-width: 200px;
  padding: 10px;
  border: 1px solid #ddd;
}

.column2 {
  padding: 10px;
  border: 1px solid #ddd;
}

練習 3: 二列flex比率指定

目標

フレックスボックスを使用して、指定された比率で2列のレイアウトを作成します。

html
<div class="flex-container">
  <div class="flex-item1">フレックスアイテム1</div>
  <div class="flex-item2">フレックスアイテム2</div>
</div>
css
.flex-container {
  display: flex;
}

.flex-item1 {
  flex: 1;
}

.flex-item2 {
  flex: 2;
}

練習 4: 二列flex比率指定+flex-grow/flex-shrink

目標

フレックスグローとフレックスシュリンクを使用して、柔軟な2列のレイアウトを作成します。

html
<div class="flex-container">
  <div class="flex-item1">フレックスアイテム1</div>
  <div class="flex-item2">フレックスアイテム2</div>
</div>
css
.flex-container {
  display: flex;
}

.flex-item1 {
  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
}

.flex-item2 {
  flex: 2 1 200px;
}

練習 5: 三列flex比率指定+flex-grow/flex-shrink+max-width+width:auto

目標

3列のフレックスボックスレイアウトを作成し、各カラムに柔軟性と最大幅の制約を適用します。

html
<div class="flex-container">
  <div class="flex-item1">フレックスアイテム1</div>
  <div class="flex-item2">フレックスアイテム2</div>
  <div class="flex-item3">フレックスアイテム3</div>
</div>
css
.flex-container {
  display: flex;
}

.flex-item1, .flex-item2, .flex-item3 {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 200px;
  width: auto;
}

これらの問題を解くことで、レイアウトの様々な側面を理解し、CSSのフレックスボックスとグリッドシステムの使い方に慣れることができます。実際にコードを書き、ブラウザで表示を確認してみてください。