2024/09/11

CSSのメディアクエリを使ってレスポンシブレイアウトを作成する方法

今回はCSSのメディアクエリを利用してレスポンシブなレイアウトを作成する方法についてお話ししていきたいと思います。
前半部分でメディアクエリについて紹介し、後半で実際の記述例を紹介しながらCSSのメディアクエリを利用してレスポンシブレイアウトを作成する方法についてお話ししていきます。

CSSのメディアクエリとは

CSS メディアクエリー（CSS Media Query）を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定したルールに一致する場合にのみ CSS を適用できます。メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブウェブデザイン (responsive web design) の重要な部分です
メディアクエリーの初心者向けガイド – ウェブ開発を学ぶ | MDN

メディアクエリを利用することで条件ごとに異なるCSSを適用させることができるようになります。
つまり、表示されるディスプレイの幅に応じて異なるレイアウトになるようにCSSを記述することで、HTMLをデバイスの幅に応じたレイアウトで表示させることができるようになり、レスポンシブなレイアウトを作成することができるという仕組みです。
また、メディアクエリを利用することでディスプレイ幅などの条件に応じてレイアウトを変更する以外にも、文字のサイズや余白の大きさを変更するなど条件ごとに異なるCSSをHTMLに適用させることができるようになります。
CSSの記述方法としては、@media (min-width: 600px) { }のようにディスプレイ幅の条件を指定して{ }内に適用させたいCSSを記述していきます。

[補足]
少し古い記述方法として、@media screen and (min-width: 600px) { }のように記述していたこともありましたが、現在の環境で画面に表示させることだけを考えた場合、上記で紹介したようなシンプルな記述で問題ありません。

レスポンシブレイアウトを作成するための具体的な手順

ここからは、CSSのメディアクエリを使ってレスポンシブレイアウトを作成するときの具体的な手順について記述例を交えながら紹介していきます。
HTMLのファイルとCSSのファイルそれぞれに記述が必要になりますので順に紹介していきます。

HTMLに必要な記述

CSSのメディアクエリを使ってレスポンシブレイアウトを作成するために、CSSファイルだけでなくHTMLファイルのheadタグ内にも記述が必要になるので、注意が必要です。
HTMLファイルにはheadタグ内に下記のmetaタグの記述が必要になります。

HTML
<meta name="viewport" content="width=device-width,initial-scale=1" />

こちらの記述は「ビューポートメタタグ」と呼ばれるもので、ブラウザに実際の端末幅を使用してレンダリングし既定の変倍レベルを設定するよう指示するものです。
ビューポートメタタグについて詳しくは下記のページを参考にしてみてください。

レスポンシブデザイン – ウェブ開発を学ぶ | MDN > ビューポートメタタグ

CSSに必要な記述

ここでははじめにサンプルを紹介し、その後簡単なレスポンシブレイアウトを作成するためのCSSとHTMLの記述例を紹介します。（CSSはレイアウトに関する記述以外を省略しています。）
サンプルでは例として、スマートフォンなどの狭いディスプレイでは1カラムで表示され、ディスプレイの幅が600px以上になると2カラムになり、1024px以上になると3カラムになるようなレイアウトを作成してみます。
（レイアウト作成にはグリッドレイアウトを使用しています。）

レスポンシブレイアウトのサンプル紹介

See the Pen
Untitled by saku (@web-saku)
on CodePen.

CSSの記述例紹介

CSS
/* レスポンシブレイアウトを作成する記述 */
.responsive-sample {
  width: 100%;
  display: grid;
  /*  ディスプレイ幅が最も狭いときは1カラムにする  */
  grid-template-columns: repeat(1, 1fr);
}

/* ディスプレイ幅が600px以上になると2カラムにする */
@media (min-width: 600px) {
  .responsive-sample {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ディスプレイ幅が1024px以上になると3カラムにする */
@media (min-width: 1024px) {
  .responsive-sample {
    grid-template-columns: repeat(3, 1fr);
  }
}

HTMLの記述例紹介

HTML
<div class="responsive-sample">
  <div class="items item-1">1</div>
  <div class="items item-2">2</div>
  <div class="items item-3">3</div>
  <div class="items item-4">4</div>
  <div class="items item-5">5</div>
  <div class="items item-6">6</div>
</div>