コーディングクイズ No.13：CSS（Flexboxレイアウト）

July 5, 2025

毎日コーディングクイズシリーズ！今回はCSSのFlexboxレイアウトについて、実践的なクイズ形式で学習しましょう！

🎯 問題

ECサイトの商品カード一覧ページを作成しています。各商品カードには「商品画像」「商品名」「価格」「購入ボタン」が含まれており、商品名や価格の文字数が異なっても、全てのカードの購入ボタンを下端に揃えたいと考えています。

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="商品1">
    <h3>シンプルTシャツ</h3>
    <p class="price">¥2,980</p>
    <button class="buy-btn">購入する</button>
  </div>
  <div class="product-card">
    <img src="product2.jpg" alt="商品2">
    <h3>プレミアムオーガニックコットン長袖シャツ</h3>
    <p class="price">¥8,500</p>
    <button class="buy-btn">購入する</button>
  </div>
</div>

商品カードの高さが異なっても、全ての購入ボタンを各カードの下端に揃えるために、`.product-card`に適用すべきFlexboxのCSSプロパティの組み合わせはどれでしょうか？

A. display: flex; align-items: flex-end;
B. display: flex; flex-direction: column; justify-content: space-between;
C. display: flex; flex-direction: column; align-items: stretch;
D. display: flex; justify-content: space-between; align-items: center;

答えを確認する

✅ 正解：B

正解

正解は B. display: flex; flex-direction: column; justify-content: space-between; です！

解説

この問題は、Flexboxを使って要素を縦方向に配置し、最後の要素（購入ボタン）を常に下端に配置する典型的なレイアウトパターンです。各プロパティの役割を理解することが重要です。

選択肢A: `align-items: flex-end`は横軸方向の配置を制御しますが、`flex-direction`が指定されていないため、デフォルトの`row`（横方向）で要素が配置されてしまいます。縦方向のレイアウトには不適切です。
選択肢B: `flex-direction: column`で縦方向に配置し、`justify-content: space-between`で最初の要素（画像）を上端に、最後の要素（ボタン）を下端に配置します。これにより、商品名や価格の文字数が異なっても、ボタンは常に下端に揃います。
選択肢C: `align-items: stretch`は要素を横幅いっぱいに伸ばしますが、ボタンを下端に配置する効果はありません。要素は通常の流れで上から順に配置されます。
選択肢D: `flex-direction`が指定されていないため横方向の配置になり、商品カードの縦方向レイアウトには適用できません。

実際の開発では、このパターンは「Sticky Footer」と呼ばれる手法で、カードレイアウトやサイドバー、モーダルウィンドウなどで頻繁に使用されます。商品一覧ページだけでなく、ブログカードやプロフィールカードなど、様々なUIコンポーネントで応用可能です。

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 400px; /* 統一の高さを設定 */
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.buy-btn {
  margin-top: auto; /* さらに確実にするための補助 */
  padding: 12px 24px;
  background-color: #007cba;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

この手法をマスターすることで、ユーザーにとって使いやすく、視覚的に整った商品一覧ページを作成できます。特にECサイトでは、ボタンの位置が揃っていることでユーザビリティが大幅に向上します。

💡 ポイント

flex-direction: columnで縦方向レイアウトを作成し、justify-content: space-betweenで最初と最後の要素を両端に配置
カードレイアウトでは統一の高さを設定することで、より美しい見た目を実現
margin-top: autoをボタンに追加することで、さらに確実な下端配置が可能
このパターンは「Sticky Footer」として、モーダルやサイドバーなど様々なUIで応用可能

よかったらシェアしてね！

コーディングクイズ No.13：CSS（Flexboxレイアウト）

✅ 正解：B

関連記事