CSS 入門

CSS Grid でレスポンシブレイアウトを作成する

レスポンシブレイアウトの構築は、あらゆるデバイスで一貫したユーザー体験（UX）を提供するために不可欠です。CSS Gridはその強力な機能により、柔軟で適応性の高いレイアウト設計をこれまで以上に容易にしました。

本章では、異なる画面サイズにシームレスに適応するレスポンシブ・グリッドを構築するための高度なテクニックを探索します。前モジュールで学んだGridの基礎概念の上に、メディアクエリ（Media Queries）とGridプロパティを組み合わせて複雑なレスポンシブデザインを実現する方法を学びましょう。

1. メディアクエリと CSS Grid

メディアクエリはレスポンシブWebデザインの基石です。画面の幅、解像度、向きといったデバイスの特性に応じて、異なるCSSルールを適用できます。

メディアクエリをCSS Gridと組み合わせることで、グリッド構造、アイテムの配置、間隔を修正し、あらゆるデバイスに最適化されたレイアウトを提供できます。

1.1 メディアクエリの基本構文

メディアクエリは @media ルールを使用し、その後にメディアタイプ（例：screen）や特性（例：max-width）を記述します。

@media (max-width: 768px) {
  /* 画面幅が 768px 以下の時に適用されるスタイル */
}

1.2 グリッドへの適用例

CSS Gridレイアウトをレスポンシブにするには、Gridプロパティをメディアクエリでラップします。

CSS例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* デスクトップ：3列 */
  grid-gap: 20px;
}

/* 768px 以下のデバイス向け */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* モバイル：1列に切り替え */
  }
}

この設定により、小さな画面ではグリッドアイテムが垂直に積み重なるようになります。

2. メディアクエリで Grid プロパティを調整する

列数の変更以外にも、メディアクエリ内で以下のプロパティを調整することで、より洗練されたレイアウトを作成できます。

  • grid-template-columns / rows: トラックの数とサイズを定義し直す。
  • grid-gap: 画面が狭い時に余白を減らしてスペースを節約する。
  • grid-template-areas: 命名エリアを再定義して、要素の並び順を劇的に変更する。
  • Align / Justify プロパティ: デバイスに応じて整列方法を変える。

2.1 grid-template-areas による再配置

grid-template-areas は、異なる画面サイズで要素の表示順序を完全に組み替えるのに非常に強力です。

CSS例：

/* デスクトップ：サイドバーあり */
.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
}

/* モバイル：すべてを垂直に並べる */
@media (max-width: 768px) {
  .grid-container {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

3. 「魔法」の関数：auto-fit と minmax

メディアクエリを一行も書かずにレスポンシブな挙動を実現できる手法があります。これが暗黙的グリッドの能力を活かした方法です。

.grid-container {
  display: grid;
  /* 最小200px、最大1frの列を、スペースが許す限り自動で作成 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

この repeat(auto-fit, minmax(200px, 1fr)) という記述は、「各列は最低200px確保し、余れば均等に広がりなさい。もし200pxを維持できなくなったら、自動で改行しなさい」という命令です。これにより、非常に流動的なレスポンシブ挙動が得られます。

4. レスポンシブ CSS Grid のベストプラクティス

  • モバイルファースト (Mobile-First): 最小の画面から設計を開始し、min-width を使って大きな画面向けに機能を強化しましょう。これは、モバイルでのパフォーマンス最適化に直結します。
  • 相対単位を活用: 列や行のサイズには fr、%、em、rem を使い、px のような固定単位は極力避けましょう。
  • セマンティクスとアクセシビリティ: レイアウトをどれだけ組み替えても、HTMLの論理構造（文書構造）が正しいことを確認してください。
  • ブラウザのデベロッパーツールを活用: グリッドの線やエリア名を視覚的に確認しながら調整しましょう。

5. 実戦例：レスポンシブ・プロダクトギャラリー

最後に、実用的な商品ギャラリーのコードを見てみましょう。

<div class="gallery">
  <div class="product">
    <img src="product1.jpg" alt="商品1">
    <h3>商品 1</h3>
    <p>魅力的な商品の説明文がここに入ります。</p>
  </div>
</div>
.gallery {
  display: grid;
  /* メディアクエリなしでレスポンシブ化 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 15px;
  text-align: center;
  background: #fff;
  transition: transform 0.3s ease;
}

.product img {
  max-width: 100%;
  height: auto; /* アスペクト比を維持 */
}

.product:hover {
  transform: translateY(-5px); /* 少し浮かせる演出 */
}