@media
@media は、条件ごとにスタイルを摘要する at-rule の１つです。 プリンタやディスプレイなどのデバイス、ブラウザ、スマートフォン、適応中のスタイルなどの特性に応じてスタイルの設定を自動で変更することができます。
@media print { body{ font-size: 11px; } } @media screen { body{ font-size: 16px; } }
詳しくは Example を参照してください
@mediaによって、PCでみる場合とモバイル端末で見る場合によってサイトのスタイル設定を変えることができます。
メディアクエリは入れ子にすることができます。
at-rule は、@-規則や@ルール、アットルールと言われます。
ページ内 Index
構文( Syntax )
@media メディアクエリー {
セレクター{
設定
}
};
メディアクエリー
は、メディア種別、メディア特性、メディアクエリーに使われる論理演算子です。
以下はメディア種別についての一覧です。メディア種別は、印刷時、ディスプレイの表示において、音声ごとに条件分けをするために使います。
メディア種別
| メディア種別名 | 概要 |
|---|---|
| all | 以下のすべて（メディア種別省略時のデフォルト） |
| 印刷用 | |
| screen | ディスプレイでの表示 |
| speech | 音声 |
メディア特性
メディア特性は、スタイシートの設定内容、出力方法、ブラウザによる特性による条件分けに利用します。
メディア特性を利用する方法は以下のように ( メディア特性 : 値 ) という記述をします。
@media (hover:hover) {
p:hover{
background-color: red;
}
};
以下はメディア特性についての一覧です。
| メディア特性 | 値 | 概要 |
|---|---|---|
| ポインター、ポインティング | ||
| any-hover | none | hover | マウスポインターのように何らかの hover が利用できるデバイスであるか |
| any-pointer | none | coarse | fine | 何らかのポインティングが利用できる場合 |
| hover | none | hover | マウスポインターのように hover が利用できるデバイスか |
| pointer | none | coarse | fine | ポインティングデバイスである場合 |
| 表示範囲、表示方法 | ||
| aspect-ratio | width / height | ビューポートのアスペクト比（幅 / 高さ）で指定 |
| display-mode | fullscreen | standalone | minimal-ui | browser | フルスクリーンであるか、または通常表示か。フルスクリーンも選ぶことができる。 |
| grid | 0 | 1 | 固定フォントやテキストのみを表示するグリッドベースのデバイスか。0.. falseなら、1..trueなら |
| height, min-height, max-height | CSS の長さ | ビューポートの高さ。最小、最大。スクロールバーによる範囲も含む |
| width, min-width, max-width | CSS の長さ | ビューポートの幅。最小、最大。スクロールバーによる範囲も含む |
| monochrome | 0 | 1 | モノクロによる表示デバイスであるなら。0.. falseなら、1..trueなら |
| orientation | portrait | landscape | portrait はビューポートが横 >= 幅であれば。landscape は横 <= 幅であれば |
| overflow-block | none | scroll | optional-paged | paged | 横書きでは上下方向に対してスクロールなどの設定によって |
| overflow-inline | none | scroll | 横書きでは左右方向に対してスクロールなどの設定によって |
| resolution, min-resolution, max-resolution | dpi 単位で | ピクセル解像度によって |
| scripting | none | initial-only | enabled | スクリプトが利用できるか |
| update | none | slow | fast | CSS アニメーションにおける描写速度によって |
| 色 | ||
| color, min-color, max-color | ビット数 | ディスプレイの発色数。ビットカラー |
| color-gamut | srgb | p3 | rec2020 | ブラウザやディスプレイの色空間の設定によって |
| color-index, min-color-index, max-color-index | 数値 | ディスプレイの出力色数 |
| forced-colors | none | active | ブラウザによるカラーパレットの制限があるか |
| inverted-colors | none | inverted | 色を反転していることによって |
| prefers-color-scheme | light | dark | 明暗によって |
| prefers-contrast | no-preference | more | dark | コントラストによって |
| その他 | ||
| prefers-reduced-motion | no-preference | reduce | 動きのあるコンテツをユーザーが望んでいるか |
論理演算子
論理演算子は、上記のメディア種別やメディア特性による条件に、論理積、論理和、NOT否定を行うことができます。only は古いブラウザのためにあります。
@media only screen and ( max-width:760px ) {
body{
font-zize: 18px;
}
};
以下は論理演算子についての一覧です。
| and | 論理積 AND。すべてのメディア種別やメディア特性の条件（クエリー）が一致したら |
,(カンマ) | 論理和 OR。いずれかのメディア種別やメディア特性の条件（クエリー）が一致したら |
| not | 否定 NOT。メディア種別やメディア特性の条件に一致しない。 |
| only | クエリーの条件に一致するもののみ。古いブラウザのためには使用したほうがよい。 |
Example
表示幅によるスタイル変更例
デバイスの表示幅ごとに設定を適応する例です。
@media only screen
and ( max-width:760px ){
body {
font-size: 15px;
line-height: 2.1;
}
}
@media only screen
and (min-width: 761px)
and ( max-width:1200px ){
body {
font-size: 15px;
line-height: 2.2em;
}
}
@media only screen
and (min-width: 1201px)
and ( max-width:1500px ){
body {
font-size: 15px;
line-height: 2.2em;
}
}
表示するデバイスごとにスタイルを変更するには、@importでデバイスごとの CSS ファイルを読み込む方が便利です。
@import url("./mobile.css") screen and (min-width:0px) and ( max-width:768px);
@import url("./pad.css") screen and (min-width:768px) and ( max-width:1024px);
@import url("./normal.css") screen and (min-width:1024px);
メディア特性、ポインターやポインティング