コーディングクイズ No.15：CSS（レスポンシブデザイン）

✅ 正解：A

解説

CSS Grid Layoutは、2次元レイアウトに最適化されており、レスポンシブデザインにおいて非常に強力で直感的な解決策を提供します。各ブレークポイントでgrid-template-columnsを変更することで、明確で保守性の高いコードを実現できます。

• 選択肢A: 正解！Grid Layoutは現代的で効率的な解決策。各ブレークポイントでgrid-template-columnsを変更するだけで、シンプルかつ明確なレスポンシブデザインが実現できます。
• 選択肢B: Flexboxも有効な選択肢ですが、複数行のグリッドレイアウトには若干複雑になります。flex-wrap: wrapと組み合わせて使用する必要があり、Grid Layoutほど直感的ではありません。
• 選択肢C: Float clearfixは古い手法で、現在は非推奨です。コードが複雑になりがちで、保守性が低く、モダンブラウザでは他の選択肢が優れています。
• 選択肢D: minmax()とfr単位の組み合わせは高度なテクニックですが、この特定の要件（固定の列数変更）には過度に複雑で、意図しない挙動を引き起こす可能性があります。

実際の開発では、Grid Layoutを使用することで、レスポンシブデザインの実装が大幅に簡素化されます。特に商品カードのような均等に配置したい要素には最適です。また、gap プロパティを使用して要素間の間隔も簡単に調整できます。

/* 正解のCSS実装例 */
.product-grid {
  display: grid;
  gap: 20px;
  padding: 20px;
}

/* モバイル（デフォルト）: 1列 */
.product-grid {
  grid-template-columns: 1fr;
}

/* タブレット: 2列 */
@media (min-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* デスクトップ: 3列 */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

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

このアプローチにより、各ブレークポイントでの挙動が明確になり、デバッグやメンテナンスが容易になります。モバイルファーストの設計原則に従って、最小画面から順に定義することで、スケーラブルなレスポンシブデザインを実現できます。