メディアクエリの書き方
メディアクエリを記述する順番
複数条件の連結
- 「かつ」や「または」などで複数の条件を結ぶことも可能です
AND条件
- 複数の条件を「かつ」で結ぶときは「and」キーワードを利用します
@media screen and ( min-width: 480px ) and ( max-width: 640px ) {................}
この場合、「画面の幅が、480px〜640pxの場合」という意味になります。
OR条件
- 複数の条件を「または」で結ぶときには、各条件を「, カンマ」で区切って記述します
@media screen and ( min-width: 480px ) , screen and ( max-width: 640px ) {................}
この場合、「画面の幅が、480px以下、または640px以上の場合」という意味になります。
否定条件とonly
- 否定条件やIE8などの古いブラウザ対策のときに利用します
not(否定条件)の指定
- @mediaに続けて「not」キーワードを記述すると否定条件を指定できます
@media not screen and ( max-width: 480px ) {................}
この場合、「画面の幅が、480px以下ではない場合」つまり「480px以上」という意味になります。
- 否定条件を利用するときは、「メディアタイプ」の記述が必須です
onlyキーワードの指定
- メディアクエリをサポートしていないブラウザ向けの対策として利用します
- メディアクエリをサポートしているブラウザでは、問題なくメディアクエリが処理されます
@media only screen and ( max-width: 480px ) {................}
画面の幅以外の条件指定
- メディアクエリの条件指定に利用できる主なプロパティ
プロパティ | min- / max- | 条件 |
---|---|---|
width | ◯ | Web画面の幅 |
height | ◯ | Web画面の高さ |
aspect-ratio | ◯ | Web画面の縦横比 |
device-width | ◯ | デバイス画面の幅 |
device-height | ◯ | デバイス画面の高さ |
device-aspect-ratio | ◯ | デバイス画面の縦横比 |
orientation | ☓ | 画面の向き(縦方向) |
resolution | ◯ | 画面の解像度 |
height
- 「画面の高さ」を条件に指定できます
- max-height(〜以下)、min-height(〜以上)などのプロパティを使用することも可能です
- 実際には、Webの世界の高さはフレキシブルが基本のため指定することはありません
aspect-ratio
- 「画面の縦横比」を条件に指定できます
- 横方向と縦方向の比率を「/ スラッシュ」で区切って値を指定します
@media only screen and ( min-aspect-ratio: 4/3 ) {................}
この場合、画面の比率が、「4:3」より横長になったときに、メディアクエリの条件が有効になります
device-width / device-height / device-aspect-ratio
- 「画面の幅/高さ/縦横比」を条件に指定できます
- これらのプロパティで条件を指定した場合は、Webの表示領域ではなく端末の画面サイズに有効/無効が判別されます
@media only screen and ( min-device-width: 1600px ) {................}
この場合、「液晶画面の幅」が1600px以上のときに、メディアクエリの条件が有効になります。
物理的な画面サイズで判別されるため、ブラウザウィンドウを変更しても変化することはありません。
orientation
- 「画面の向き」を条件に指定できます
- 縦向き(縦長)の場合は「portrait」、横向き(横長)の場合は「landscape」を値にします
@media only screen and ( orientation: landscape ) {................}
この場合、端末を横向きしたときにだけ、メディアクエリの条件が有効になります。
ただし、この条件はパソコンでも機能することに注意しなければいけません。
よって、実際に使用するときには以下のように記述します。
@media only screen and ( max-width: 640px ) and ( orientation: landscape ) {................}
resolution
- 「画面の解像度」を条件に指定できます
以下のように記述すると、画面の解像度が300dpi以上のときにメディアクエリの書式指定が有効になります。
@media only screen and ( min-resolution: 300dpi ) {................}
resolutionのサポート状況 Can I use
メディアタイプの種類
- W3Cで定義されているメディアタイプ
メディアタイプ | デバイスの種類 |
---|---|
all | すべてのデバイス |
screen | 画面 |
印刷 | |
handheld | モバイル機器 |
projection | プロジェクター |
tv | テレビ |
tty | 文字幅固定のデバイス |
braille | 点字ディスプレイ |
embossed | 点字プリンター |
speech | 音声 |
以下のように記述すると、画面表示の色に関係なく文字色を黒色、背景を白色で印刷できるようになります。
@media print { * { color: #000 !important; background: #FFF !important; } }