【CSS】画面サイズごとにスタイルを変更するメディアクエリの記述法

2021年3月25日2022年11月14日

ポチ

PC、タブレット、スマホ。それぞれの画面サイズに応じて、CSSのスタイルを変更する方法が知りたい。

この記事では、画面（デバイス）サイズに応じたCSSスタイルの変更を、CSSの「メディアクエリ」を使って行なう方法を解説します。

ユウマ

初心者向けに、使うべき値についても詳しく解説していくので、全く分からないという方もご安心下さい。

【事前知識】メディアクエリとレスポンシブデザインについて

メディアクエリとブレイクポイント

まず、メディアクエリとは何ぞや？という方のために、簡潔に解説します。

メディアクエリはCSS3のモジュールで、簡単に説明すると、画面サイズに応じてコンテンツの描画を切り替えるための機能です。

メディアクエリ = 画面サイズに応じてコンテンツ描画切り替えを行なうCSS3の機能

そして、メディアクエリで指定する値として「ブレイクポイント」と呼ばれるものが必要になってきます。

ブレイクポイントは、デザインが切り替わる画面幅の値ことを言います。

ブレイクポイント = デザインが切り替わる画面幅の値

レスポンシブデザインとは？

レスポンシブデザインとは、サイト閲覧者の画面サイズ（ブラウザ幅）に応じて、サイト内の各コンテンツを最適化表示させるための技術です。

そして、画面サイズを変えたときに表示が崩れてしまうサイトを、画面サイズに依存せず最適化することを「レスポンシブ化」と言います。

ユウマ

最近のWebサイトでは必ずと言っていいほど、どのサイトもレスポンシブ化されていますね。

このレスポンシブ化を行なうために必要になるのが、「メディアクエリ」というわけです。

メディアクエリで任意のブレイクポイントを指定して、各画面サイズでコンテンツが崩れずに表示されるように、調整することができます。

これが、Webサイトにおける基本的なレスポンシブ化の流れです。

画面サイズごとにスタイルを変更するメディアクエリの使い方

スタイルシート内でメディアクエリを使う

一般的にメディアクエリは、スタイルシート（CSS）内に記述することで使います。

記述方法は以下の通りです。

/* 画面幅960px"以下"の時に読み込むスタイル */
@media screen and (max-width:960px) {
  div { background: blue }
}
/* 画面幅520px"以下"の時に読み込むスタイル */
@media screen and (max-width:520px) {
  div { background: red }
}

/* 画面幅960px"以上"の時に読み込むスタイル */
@media screen and (min-width:960px) {
  div { background: blue }
}
/* 画面幅520px"以上"の時に読み込むスタイル */
@media screen and (min-width:520px) {
  div { background: red }
}

上記コードを見ていただけると分かる通り、メディアクエリでは記述したブレイクポイント「以下」の画面幅でスタイルを読み込むか、「以上」の画面幅でスタイルを読み込むかを指定することができます。

この以上と以下を分けているのが、以下の箇所です。

(max-width:520px)
(min-width:520px)

メディアクエリで「max-width」を指定した場合、ブレイクポイント(上記コードでは520px)以下の画面幅でスタイルが反映されます。

逆に「min-width」を指定した場合は、ブレイクポイント以上の画面幅でスタイルが反映されるということです。

少々ややこしく感じるかもしれませんが、それぞれ以下のように覚えておくと良いでしょう。

プロパティ	意味
max-width	max(最高)◯◯pxまでスタイルを反映する
min-width	min(最低)◯◯pxからスタイルを反映する

また、基本的にPC版デザインをベースに（PCファースト）コーディングする場合、「max-width」を使い、スマホ版デザインをベースに(モバイルファースト)コーディングする場合「min-width」を使います。

HTMLのlinkタグでメディアクエリを使う

メディアクエリはスタイルシート内だけに限らず、HTMLのlinkタグでも指定することができます。

linkタグを使った場合のメディアクエリの記述方法は、以下の通りです。

<!-- 画面幅960px"以下"の時に読み込むスタイル -->
<link rel="stylesheet" href="md.css" media="screen and (max-width:960px)">
<!-- 画面幅520px"以下"の時に読み込むスタイル -->
<link rel="stylesheet" href="sm.css" media="screen and (max-width:520px)">

<!-- 画面幅960px"以上"の時に読み込むスタイル -->
<link rel="stylesheet" href="md.css" media="screen and (max-width:960px)">
<!-- 画面幅520px"以上"の時に読み込むスタイル -->
<link rel="stylesheet" href="sm.css" media="screen and (max-width:520px)">

見ていただきたい箇所は、linkタグ内の「media属性」の部分です。

media属性では、読み込む外部リソース（CSS）をどのメディアに適用するのかを、指定することができます。

「screen and (◯◯◯-widh:◯◯px)」の部分は、CSSと記述方法が同じなので、簡単に覚えておくことができますね。

スタイルシートでメディアクエリを記述する方法が一般的ではありますが、HTML側でも指定できることを覚えておくと良いでしょう。