最終更新日：2019.06.10
公開日：2018.07.28

基礎

CSS

メディアクエリについて

レスポンシブサイトやプリンターでの印刷時に活用されるメディアクエリの基礎を解説します。

この記事のポイント

メディアクエリの基礎が分かる
CSSをメディアによって切り替える

スタイルシートの切り替えを行うメディアクエリ

メディアクエリを使うと、HTMLを読み込んだメディアの種類や解像度などに応じてCSSを切り替えることができます。

最近では様々な解像度を持った端末が増えたため、レスポンシブサイト制作でCSSを切り替える際によく使われるようになりましたが、以前から印刷用CSSの設定でも使われてきました。

このようにメディアクエリでCSSを切り替えるには、スクリーンやプリンターなどメディアの種類と、表示幅や解像度といった特性の2種類の情報を使うことができます。
どちらかだけでも、両方使うことも可能です。

画面サイズでCSSを切り替える具体的な方法については、別記事「メディアクエリを使って画面サイズごとにCSSを切り替える」をご覧ください。

メディアクエリで指定できるメディアの種類

まずはメディアクエリを使って判別することができるメディアの種類を紹介します。

all – 全ての端末
screen – パソコン、スマホ（ガラケー含む）、タブレットなど画面
print – プリンター
speech – 音声読み上げソフト

現在のメディアクエリはLevel4で、以上のメディアに種類分けされています。
Level3以前ではテレビやプロジェクターなど、もう少し細かく種類分けがされていました。

原文はこちら（英語）
Media Types – Media Queries Level4

メディアクエリで指定できるメディアの特性

メディアの特性は表示する幅、アスペクト比などです。
通常はHTMLを表示しているメディアの表示幅を取得し、CSSを切り替えて最適な表示を提供する形で活用するシーンが多いです。

width – 表示の幅
height – 表示の高さ
aspect-ratio – アスペクト比

その他にも、様々な特性を指定することができます。
詳しくは、下記ページの「メディア特性」をご覧ください。
メディアクエリの利用 – MDN web docs

メディア特性はviewport（ビューポート）の設定とセットで使われます。
HTMLページのviewport設定については、別記事「viewport(ビューポート)の設定について」をご覧ください。

メディアクエリの使用例

メディアの種類と特性が分かったところで、続いてはパターン別に使用例を解説していきます。

パソコンやスマホと、プリンターのCSSを分ける

パソコンやスマホなどのディスプレイ表示する端末と、プリンターでCSSを切り替える標準的な指定です。
画面のある端末は「style.css」を、プリンターでは「print.css」をそれぞれ読み込みます。

ディスプレイ端末／プリンターでCSSを切り替える例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メディアクエリについて</title>
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">
</head>
<body>
	<p>メディアクエリのテスト</p>
</body>
</html>

画面の表示幅でスタイルシートを分ける

先ほどのディスプレイ表示の端末とプリンターのCSS切り替えに加えて、ディスプレイの表示幅によってスタイルシートを切り替える指定を追加します。

ディスプレイの表示幅でCSSを切り替える例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メディアクエリについて</title>
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="css/sp_style.css">
<link rel="stylesheet" media="print" href="css/print.css">
</head>
<body>
	<p>メディアクエリのテスト</p>
</body>
</html>

新しく追加したlink要素には、media属性に「screen and (max-width: 480px)」を指定しています。
これはメディアの種類が「screen」で、かつ表示幅の最大が480pxの端末に「sp_style.css」を適用するという指定です。

つまり、全てのディスプレイ端末で「style.css」を読み込み、さらに表示幅が480px以下の端末は「sp_style.css」も読み込む形になります。

style.css

p {
	color: #333;
}

sp_style.css

p {
	display: inline-block;
	padding: 20px;
	border-radius: 10px;
	border: 2px solid #333;
	background: #f7f7f7;
}

2つのCSSファイルに分けてlink要素でCSSを読み込む方法の他に、CSSの中にメディアクエリを記述して1つのCSSファイルにする方法もあります。

1つのCSSファイルにまとめる

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メディアクエリについて</title>
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">
</head>
<body>
	<p>メディアクエリのテスト</p>
</body>
</html>

style.css

p {
	color: #333;
}

@media screen and (max-width: 480px) {
	p {
		display: inline-block;
		padding: 20px;
		border-radius: 10px;
		border: 2px solid #333;
		background: #f7f7f7;
	}
}

こちらの方法はファイル数を少なくできますが、に複数の表示幅のスタイルが混在するため1ファイルが長くなってしまいがちです。
表示幅ごとにCSSを分ける（パソコン版、SP版で分ける）か、1つのCSSにするかはWebサイトの規模やページボリュームによってメンテナンスしやすい方法を選択してください。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。