メディアクエリ@mediaの使い方について。
目次
メディアクエリとは？
対象のデバイス（メディアタイプ）と画面幅や画面の向きなど（メディア特製）を指定するコード。
スマホやPCなどデバイスの画面幅によってページの文字サイズや横幅を変更する際に使用する。（レスポンシブデザイン）
メディアクエリの使い方
ビューポートの指定
メディアクエリを適用するためにはhtmlのheadタグ内にビューポートを記述する必要がある。
<metaname="viewport"content="width=device-width, initial-scale=1.0">・width=device-width
表示幅は閲覧しているデバイスの表示幅とする。
・initial-scale=1.0
表示倍率を拡大・縮小なしに指定。
メディアクエリの記述方法
記述には２つの方法がある。
- linkタグに記述する方法
- .cssのファイル（スタイルシート）に記述する方法
指定がmedia属性か@mediaの違いで基本文法は同じ。
//.html
media = "[メディアタイプ] [論理演算子] [(メディア特性: 値)]"
//.css
@media{ [メディアタイプ] [論理演算子] [(メディア特性: 値)] { セレクタ {処理} }
- メディア特性は
( )で囲む。 - メディアタイプや特性を追加したい場合は、
and (メディア特性: 値)でつなぐ。 - 複数のメディアクエリをつなげたい場合はカンマを使う。
1. linkタグに記述する方法
・<link rel="stylesheet" href="ファイルパス" media="[メディアタイプ] [論理演算子] [(メディア特性: 値)]">
<linkrel="stylesheet"href="style.css"media="screen and (min-width:375px)">2. .cssのファイル記述する方法
・{ @media [メディアタイプ] [論理演算子] [(メディア特性: 値)]{ セレクタ{ 処理 }}>
@mediascreenand(min-width:375px){div{color:red;}}メディアタイプ一覧
| メディアタイプ | 内容 |
|---|---|
| screen | ディスプレイ（スマホ、PC、デスクトップなど） |
| 印刷プレビューモード | |
| speech | 音声合成 |
| all | すべての端末 |
WEBサイト作成の場合は基本的にscreen一択。
メディアタイプの指定がない場合はall。
論理演算子一覧
| 演算子 | 内容 |
|---|---|
| and | 複数のメディア特性を一つにまとめる |
| , | 複数のメディアクエリを連結する（orのような挙動） |
| not | メディアクエリを否定する |
| only | クエリすべてが一致した場合のみスタイルを適用する |
・only
onlyを使用しない場合、古いブラウザーは screen and (max-width: 500px) というクエリを単なる screen として解釈する。
結果、クエリの注釈（メディア特性）を無視し、あらゆる画面にスタイルを適用してしまう。
only演算子を使用する場合は、メディアタイプも指定しなければなりません。
主なメディア特性一覧
| メディア特性 | 内容 | min-/max- |
|---|---|---|
| width | 表示幅を指定する | ✔︎ |
| max-width | 最大幅を指定（表示をこれ以上大きくしない） | |
| min-width | 最少幅を指定（表示をこれ以上小さくしない） | |
| height | 表示高さを指定する | ✔︎ |
| orientation | 画面の向き。値は、縦長ならportrait、横長ならlandscapeとなる | |
| resolution | 解像度。値はdpiで指定 | ✔︎ |
| aspect-ratio | アスペクト比。値は、横/縦 で指定。 | ✔︎ |
他にも多数ある。
（参考）mozilla メディア特性
レスポンシブの設定で使うのは、max-width, min-width, widthがメイン。
メディアクエリの使用例
画面幅○○px以上に適用するcssを定義する場合はmin-widthを使う。
@mediascreenand(min-width:○○px){.class{処理}
▼適用範囲を指定する場合
○○px〜△△pxというように範囲を指定したい場合は、min-widthとmax-widthを使う。
@mediascreenand(min-width:○○px)and(max-width:△△px){.class{処理}この○○pxや△△pxなど適用されるcssが変わるポイントをブレイクポイント(breakpoint)という。
実例
メディアクエリを使うことで画面の幅によって適用するcssを切り替えることができる。
<!-- headタグの記述にviewport必須 --><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- bodyタグの記述 --><divclass="elem1 media"><p>メディアクエリを使った画面サイズ毎のcssの適用</p></div>.media{height:20%;background:red;min-width:60px;max-width:50%;font-size:12px;color:white;padding:5px;}@mediascreenand(min-width:200px)and(max-width:400px){.media{/* 画面サイズ200~400px */}.media{background:gold;font-size:14px;color:gray;max-width:60%;}.media::before{content:"【200px~400px】";color:black;}}@mediascreenand(min-width:600px)and(max-width:800px){.media{/* 画面サイズ600~800px */}.media{background:yellowgreen;height:30%;font-size:20px;color:white;max-width:80%;}.media::before{content:"【600px~800px】";color:black;}}@mediascreenand(min-width:1000px){.media{/* 画面サイズ1000px以上 */}.media{background:cornsilk;height:40%;font-size:32px;color:darkgray;max-width:90%;}.media::before{content:"【1000px~】";color:black;}}- 後ろにある記述が優先される。
上記記述の場合、400px < 画面幅 < 600px は指定がないため、デフォルトのcssが適用される（ここではbackground 赤色）。
途切れない適用例
メディア特性でmin-widthを小さい順に記載すれば、画面サイズに合わせ順にcssを適用できる。
| 画面サイズ | 適用される処理 |
|---|---|
| 375px以下 | 処理０ |
| 375px以上 | 処理１ |
| 680px以上 | 処理２ |
| 960px以上 | 処理３ |
.class{デフォルトの処理０}@mediascreenand(min-width:375px){/* 画面サイズ375px~ */.class{処理１}}@mediascreenand(min-width:680px){/* 画面サイズ680px~ */.class{処理２}}@mediascreenand(min-width:960px){/* 画面サイズ960px以上 */.class{処理３}}