グリッドレイアウトを活用したレスポンシブデザイン

この章では、CSS Gridを使用して、レスポンシブデザインを実現する方法について学びます。CSS Gridは、ウェブページのレイアウトを簡単に作成・管理できる強力なレイアウトシステムです。

グリッドコンテナとグリッドアイテム

まず、グリッドコンテナとグリッドアイテムについて理解しましょう。グリッドコンテナは、グリッドアイテムを配置する親要素で、display: grid;を設定します。グリッドアイテムは、グリッドコンテナ内に配置される子要素です。

グリッドテンプレート

次に、グリッドテンプレートについて学びましょう。グリッドテンプレートは、グリッドコンテナ内に行と列を作成するために使用されます。以下は、3列のグリッドテンプレートを作成する例です。

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
</style>

メディアクエリを用いたレスポンシブデザイン

メディアクエリを使用して、デバイスの画面サイズに応じてグリッドテンプレートを変更することができます。以下は、デバイスの幅が600px未満の場合に1列、600px以上の場合に3列のグリッドレイアウトを適用する例です。

<style>
.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>

演習問題

1. 2列のグリッドレイアウトを作成して、デバイスの幅が900px以上の場合に4列のグリッドレイアウトに変更するCSSを記述してください。
2. 3行2列のグリッドレイアウトを作成し、特定のグリッドアイテムが2行分の高さを持つように設定してください。
3. 画面サイズが450px未満の場合、2列のグリッドレイアウトに変更し、450px以上の場合には4列のグリッドレイアウトに変更するCSSを記述してください。

解説

1. 以下のように記述することで、2列のグリッドレイアウトが作成され、デバイスの幅が900px以上の場合に4列のグリッドレイアウトに変更されます。

   <style>
   .container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
   @media (min-width: 900px) {
     .container {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   </style>

2. 以下のように記述することで、3行2列のグリッドレイアウトが作成され、特定のグリッドアイテムが2行分の高さを持つように設定できます。

   <style>
   .container {
     display: grid;
     grid-template-rows: repeat(3, auto);
     grid-template-columns: repeat(2, 1fr);
   }
   .item-span-2-rows {
     grid-row: span 2;
   }
   </style>

3. 以下のように記述することで、画面サイズが450px未満の場合、2列のグリッドレイアウトに変更し、450px以上の場合には4列のグリッドレイアウトに変更されます。

   <style>
   .container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
   @media (min-width: 450px) {
     .container {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   </style>