↑上へ
ホーム
特集・講座編
HTMLとCSSの基本と概要講座
3章: HTML応用

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

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

この章では、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>
↑ 3章: HTML応用