そんな疑問を解決します。
本記事では、これからメディアクエリを学ぶ方の為に、
メディアクエリの書き方、種類、使い方について網羅的に、分かり易く解説しています。
メディアクエリの書き方を理解すればコーディングの幅が広がり、スキルアップ出来るのでぜひ覚えてみてください。
・メディアクエリの種類・書き方
・論理演算子の種類
・メディアクエリの反映方法
・具体例
メディアクエリの種類・書き方を徹底解説「CSS」
令和3年の総務省のデータでは、日本人の個人のインターネット利用率（個人）は83.4％
そのうち「スマートフォン」（68.3％）が「パソコン」（50.4％）とスマートフォンでの閲覧が高いというデータがあります。
その為、WEBサイトはモバイルファーストなデザインが優先されるようになりましたね。
ほとんどの参考書やプログラミングスクールでもメディアクエリの事を解説しているとは思いますが、
あくまで最低限の知識のみだと思います。
私自身、正しく理解できていないまま「なんとなくの理解」や「動くからいいか」で終わっていましたが、
「よりスキルを高めたい」「自分の思うようにコーディングしたい」と思い立ち本記事をまとめています。
同様にこれからメディアクエリを学ぶ方、基本は大丈夫だけど復習したい方にはピッタリの内容になっています。
メディアクエリについて
メディアクエリは「CSS3」から登場した要素で、レスポンシブなサイトコーディングには欠かせません。
どのような効果があるか簡単に説明すると、「指定した条件でCSSを適用する」ことが出来ます。
たとえば「デバイスの画面幅が○○の時（条件）」+「フォントサイズを15pxにする（CSSを適用する）」感じ。
記述方法は以下の通り、「メディアタイプ」や「メディア特性」が条件にあたり、｛｝内に適用したいCSSを書きます。
medhia メディアタイプ and (メディア特性){指定したいCSSの記述}@medhia メディアタイプ and (メディア特性){指定したいCSSの記述}
メディアタイプはメディア特性は後半で詳しく解説します。
メディアクエリの種類・書き方
メディアタイプとメディア特性の種類、書き方について学んでみましょう。
メディアタイプは4種類、メディア特性はたくさんの種類がありますが実践的にはほんの一部しか使われていません。
知識として知っておいて、覚えるのは少しでOKです。
メディアタイプの種類
メディアタイプの種類は3つ。
・screen
| メディアタイプ | 指定できるデバイス |
| all | すべてのデバイス |
| 印刷用、プリンタ | |
| screen | PC、スマホ、タブレットの画面 |
※用途が無く非推奨となったメディアタイプ「tty/tv/projection/handoheld/braille/embossed/aural/speech」
all
「all」はすべてのデバイスに適用します。という意味です、昨今では以下の「print」と「screen」の両方という意味ですね。
また「all」の場合は記述を省略して書いてもOKです。
@media all and (メディア特性) {指定したいCSSの記述}@media (メディア特性) {指定したいCSSの記述}
「print」はプリンターで印刷時に適用させたい条件を指定することが出来ます。
あまり活躍する機会はなさそうですが、たとえばWEBサイト上のままでは大き過ぎる時など印刷用のデザインを指定するなどが可能です。
@media print and (メディア特性) {指定したいCSSの記述}
screen
「screen」はPCやスマホ、タブレットなどのデバイス（主に画面）に条件を指定することが出来ます。
レスポンシブ対応ではwidthやheightのサイズが変わるのでメディアクエリといえば「screen」に適用させるのがほとんど。
@media screen and (メディア特性) {指定したいCSSの記述}
3つのメディアタイプを紹介しましたが、
基本は「all」で印刷時だけ特別な条件を付けたいときは個別で「print」を指定するのが良いでしょう。
メディア特性の種類
メディア特性は、画面の高さや幅など環境や特徴を指定する条件です。
レスポンシブ対応では基本「width」や「max-width」「min-width」で横幅を指定することがほとんどです。
・max-width
・min-width
・height
・max-height
・min-height
など
| メディア特性 | 説明 |
| width | ブラウザの表示領域の横幅 |
| height | ブラウザの表示領域の高さ |
| device-width | デバイスの横幅 ※Media Queries Level 4 で非推奨 |
| device-height | デバイスの高さ ※Media Queries Level 4 で非推奨 |
| color | デバイスの色のビット数 |
| color-gamut | デバイスが対応しているおよその色の範囲 |
| color-index | デバイスの色参照表の項目数 |
| forced-colors | ユーザーがカラーパレットを制限しているかどうかを検出 |
| inverted-colors | ユーザーまたはその下の OS が色を反転しているか |
| prefers-color-scheme | ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出 |
| hover | ユーザーが要素上でのホバーを使用することができるか |
| any-hover | ユーザーが要素上でのホバーを使用することができるものがあるか |
| pointer | ポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか |
| any-pointer | ポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか。 |
| grid | 出力機器はグリッドとビットマップ画面のどちらを使用するか。 |
| aspect-ratio | ビューポートの幅対高さのアスペクト比 |
| device-aspect-ratio | 出力機器のレンダリング面の高さ ※Media Queries Level 4 で非推奨 |
| display-mode | ウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モード。 |
| monochrome | デバイスのモノクロフレームバッファーにおけるピクセルあたりのビット数 |
| orientation | ビューポートの向き |
| overflow-block | ビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか |
| overflow-inline | ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか |
| prefers-contrast | ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出 |
| prefers-reduced-motion | ユーザーがページであまり動きを望まないかどうか |
| resolution | 出力機器のピクセル密度 |
| scripting | 出力機器のスキャン処理方式 |
| update | どれだけの頻度でデバイスがコンテンツの表示を変更できるか |
種類はたくさんありますが、前述した通り基本は「width」を指定することがほとんど。
記述は以下の通り。
@media メディアタイプ (width:1200px) {指定したいCSSの記述}@media (max-width:1200px) {
p{
color:red;
}
}
ブレイクポイントについて
ブレイクポイントとはレスポンシブ対応で変化を与えるポイントのこと。
「max-width」で横幅を起点にサイズが変更されたタイミングを条件にすることが多いです。
ちなみに「max-○○○○」は最大○○○○、「min-○○○○」は最小○○○○の意味。
たとえばmax-widthなら最大横幅となり、それ以上横幅が大きくならないように指定できますが、
メディア特性では以下の意味合いがあります。
・(min-width:1200px) → 1200px以上の時の条件
上記を理解して希望通りのブレイクポイントを設定してましょう。
論理演算子の種類
論理演算子（ろんりえんざんし）は複数の条件を指定したい場合に使います。
メディアクエリで使える論理演算子は3種類です。
・,(カンマ)
・not
| 論理演算子 | 説明 |
| and | メディア特性を組み合わせる |
| , （カンマ） | 2個以上のメディア特性の内、いずれかが一致する場合 |
| not | 条件に一致しない場合 |
and
メディアタイプとメディア特性の間に記述し、組み合わせる意味として使われます。
複数のメディア特性を組み合わせることも出来て「○○かつ○○の時」という条件が指定できます。
@media screen and (メディア特性) {指定したいCSSの記述}@media (メディア特性) and (メディア特性) {指定したいCSSの記述}
, (カンマ)
カンマで区切ることで指定した条件の内、いずれかが一致した場合の条件を指定することが出来ます。
いわゆる「or」や「または」の意味で使うことが出来ます。
@media screen and (メディア特性) , (メディア特性) {指定したいCSSの記述}@media (メディア特性) , (メディア特性) {指定したいCSSの記述}
not
notは反転の意味で使われます。その条件に一致しないデバイスを対象にすることで否定形になります。
@media not screen and(メディア特性) {指定したいCSSの記述}@media not (メディア特性) {指定したいCSSの記述}
メディアクエリの反映方法
メディアクエリを反映させる方法は2つ。
・別CSSファイルを読み込む
同じCSS内に書き込む
基本のcssファイル内に書き込む場合は、「@medhia メディアタイプ and (メディア特性){指定したいCSSの記述}」の記述が必要です。
書き込む場所に制限はありません、自身が管理しやすい場所で大丈夫です。
SCSSで書く場合は同じネスト内に書けば管理しやすいですね。
.クラス名{
font-size:30px;
@media screen and (max-width: 1200px) {
font-size:15px;
}
}
別CSSファイルを読み込む
cssの読み込みはhtmlファイルのheadに<link>で書き込むのが基本ですよね。
メディアクエリのcssも同様にheadに書き込みますが、以下のように「media=“メディアタイプ (メディア特性)」追記が必要です。
<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:1200px)">
</head>
ファイル数は増えますが、コード量が増えると管理が大変になるのでファイルを分けておくと便利です。
ファイル数に制限が無いのでブレイクポイント毎や条件毎に指定することもできます。
<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:1200px)">
<link rel="stylesheet" href="style.css" media="screen and (max-width:780px)">
</head>
具体例
メディアクエリでブレイクポイントを設定する時、どれくらいの値で設定するべきか？
どのような条件で指定するべきかわからなくなってしまいますよね。
結論、正解は無いので自分の好み「これくらいかなー」という感覚で値を決めていいのですが、
各デバイスのサイズを載せておくので、ブレイクポイントの参考値にしてください。
| iphone機種名 | サイズ |
| iPhone 13ProMax | 428×926 |
| iPhone 13/13Pro | 390×884 |
| iPhone 13mini | 375×812 |
| 12/12 Pro | 390×844 |
| XR/11/XS Max/11 Pro Max | 414×896 |
| Plus 6/6s/7/8 | 414×736 |
| 6/6s/7/8/ X/XS/11 Pro | 375×667 |
| Android機種名 | サイズ |
| Xperia 12 | 418×976 |
| Galaxy S20 Ultra | 412×915 |
| OnePlus 8T | 412×914 |
| Pixel 5/4a | 360×800 |
| Galaxy S20 | 414×896 |
| AQUOS R3 | 360×780 |
| タブレット機種名 | サイズ |
| iPad Pro12.9(1~5) | 1,024×1,366 |
| iPad Pro11(1/2/3) | 834×1,194 |
| iPad Air(4) | 834×1,180 |
| iPad Air(3)/Pro10.5 | 834×1,112 |
| iPad Air10.9 | 820×1,180 |
| iPad(7/8/9) | 810×1,080 |
| iPad mini(6) | 744×1,133 |
ちなみにサイズは以下が一般的なので参考にしてみてください。
・ノートPC：960px～1280px
・タブレット：600px～960px
・スマホ(横)：480px～600px
・スマホ(縦)：～480px
まとめ
メディアクエリの種類・書き方を徹底解説「CSS」について解説しました。
指定出来るメディアタイプやメディア特性にたくさん種類がありましたが、
うまく使いこなすことで思い通りの操作が出来るようになります。
ぜひ見返しながら参考にしてみてください、最後までお読みいただきありがとうございました。
