トップ > いつか記憶がなくなる自分へ > レスポンシブ対応で知ったメディアクエリの基本

レスポンシブ対応で知ったメディアクエリの基本

いつか記憶がなくなる自分へ

メディアクエリは、表示するディバイスなどによって適用するCSSを切り替える機能です。

表示された画面環境に応じて適用するスタイルを切り替える機能。
メディアクエリ（Media Queries）とは - IT用語辞典 e-Words

メディアクエリは画面の解像度 (例えばスマートフォンの画面とコンピュータの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。
メディアクエリ - Wikipedia

メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN

メディアクエリの指定方法

HTMLファイルにタグの属性として指定する

<!--linkタグのmedia属性で指定する-->
<link rel="stylesheet" href="hoge.css" media="screen, projection, tv" />
<!--styleタグのmedia属性で指定する-->
<style type="text/css" media="aural, speech">
...スタイルの指定...
</style>
<!--pictureタグの内部でのみsourceタグで使える-->
<picture>
  <source media='(min-width: 650px)' srcset='hoge.png'>
</picture>

CSSファイルに指定する

/* @mediaで指定する */
@media only screen and (max-device-width: 480px){
...スタイルの指定...
}
/* @importでCSSファイルと一緒に指定する */
@import url(example.css) screen and (color);

メディアは、メディアタイプかメディア特性を論理演算子で組み合わせて指定します。

メディアタイプの種類

メディアタイプは端末の全般的なカテゴリを説明します。 not 又は only の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 all タイプが暗黙に含まれています。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN

メディアタイプ 対象
all すべての端末
screen printに一致しないすべての端末
print ページ付きの素材や、印刷プレビューモードで画面に表示された文書
  • 以下のメディアタイプは、メディアクエリ4から非推奨
    • tty(文字幅が固定の機器) / tv(テレビ) / projection(プロジェクタ) / handheld(携帯機器) / braille(点字ディスプレイ) / embossed(点字プリンタ) / aural(音声出力) / speech(音声出力)
    • 参考 : Media Queries Level 4

メディア特性の種類

メディア特性は、特定のユーザーエージェントや、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN

名前 概要 値
color 出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ
height ビューポートの高さ
orientation ビューポート (またはページ付きメディアではページボックス) の向き portrait(縦長) / landscape(横長)
scripting スクリプト(例えばJavaScript)が利用できるかを検出する
width ビューポートの幅

※. 使いそうなのだけ抜き出したましたが、@media - CSS: カスケーディングスタイルシート | MDNにはたくさん乗っているので参照してください。

ブレイクポイントは、CSSを切り替えるサイズのことです。

https://unt-ad.jp/img/blog/article/images/0131_02%281%29.jpg
「運用中のサイトをレスポンシブにしたい！」できる？できない？ | 株式会社アントのブログ

https://nuconeco.net/wp-content/uploads/2017/12/responsive-ui-breakpoints_02-768x435.jpg
【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ！ | nuconeco

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hashimotoblog/20190528/20190528165249.png
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

論理演算子の種類

論理演算子 not, and, only を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN

論理演算子 意味 例
and 複数のメディア特性・メディアタイプをまとめる。
真になるためには結合されたそれぞれの特性が真を返す必要がある。		 @media (min-width: 30em) and (orientation: landscape) { ... }
not メディアクエリを否定する。
クエリが偽を返せば真を返す。
使用する場合は、メディアタイプも指定しなければならない。		 @media not all and (monochrome) { ... }
上記の解釈は以下
正解:
@media not (all and (monochrome)) { ... }
誤り:
@media (not all) and (monochrome) { ... }
only クエリ全体が一致した場合にスタイルを適用。
使用する場合は、メディアタイプも指定しなければならない。
メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぐ。
最近のブラウザーでは効果がない。		 @media only screen and (color) { ... }
,(カンマ) 複数のメディアクエリを一つのメディアクエリに結合する。
リストは論理 or 演算子のように動作する。		 @media (min-height: 680px), screen and (orientation: portrait) { ... }

スマートフォン用にはどんな指定がいいか集めてみました。

いろいろやると訳わかんなくなるので、シンプルにスマートフォンの縦用だけをいろんなサイトから集めてみました。
スマートフォンの横からはPCと共通のCSSで頑張って見てもらう感じ。

@media screen and (max-width: 480px) { }
スマートフォンのシェアが増え、かつほとんどが縦画面で見ていると想定するなら、これが落ち着きどころと言える
【2020年4月修正追記】レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ | モバイル・スマホWeb・WordPressのSEO塾.com

スマホ向けは「タブレットじゃなくなったら」の否定法で
@media only screen and (max-width: 767px)
が主流。
レスポンシブウェブデザインのメディアクエリのオススメの書き方 [無料ホームページ作成クラウドサービス まめわざ]

@media screen and (max-width:768px) {
/*スマホ用のcssを記述*/
}
CSSでメディアクエリ（@media）を使ってレスポンシブ（スマホ対応）にする方法 | HikoPro Blog

560px未満をスマホと設定
ポートレートとランドスケイプは用途を分けて考える。←これ重要
※iPhoneSEのランドスケープ（568px）、iPad Pro 11の5:5 Split Viewもタブレット扱いにするために560pxに設定。<省略>
560px未満 @media screen and (max-width: 559px) {...}
960px未満 @media screen and (max-width: 959px) {...}
※「以下」ではなく「未満」にするために、メディアクエリの数字を一つ減らすのがポイントですね。
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

スマホ縦 @media screen and (max-width: 480px)

【2020年3月】レスポンシブ CSSブレイクポイント・メディアクエリ（@media） | SEO塾/株式会社アルゴリズム

メディアクエリを使うにはHTMLのheadタグにviewportを指定します。

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

developer.mozilla.org
developers.google.com