このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

メディア・クエリ~メディア・タイプ

記事Jan. 16th,2019
Jul. 14th,2021
文書を出力するデバイスによって条件づけるためのメディア・タイプ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

“メディア・タイプ”とは?

メディア・タイプ(media type)”は文書が表示される大まかなデバイスのカテゴリで条件づけるために使用できます。

メディア・タイプは記述する場合は“and”演算子を挟んでメディア・コンディションの前に記述しなければなりません。メディア・タイプはメディア・クエリに1個だけ記述することができます。

only”修飾子を使用する場合以外はメディア・タイプは任意であり、省略した場合はallと同じ意味です。

メディア・タイプの一覧

メディア・タイプ 説明
all すべてのデバイス
print プリンタ・デバイス
screen プリンタ・デバイス以外

過去のメディア・タイプ

メディア・タイプが最初に定義されたのは1997年に勧告されたHTML4の仕様で、link”要素media”属性の値として定義されました。これらのメディア・タイプはCSS2にも取り入れられ、“Media Queries Level 3”までは多くのメディア・タイプが定義されていましたが、時代の進歩とともに当初定義されたメディア・タイプでのデバイスの区別はあまり効果的でなくなりました。例えば、スマートフォンの登場により、handheld”メディア・タイプscreen”メディア・タイプの境目はかなり曖昧になりました。

その結果、後から登場したメディア・フィーチャーを使用する方がより良くデバイスの特性を表現することができるため、“Media Queries Level 4”ではメディア・タイプはall”メディア・タイプprint”メディア・タイプscreen”メディア・タイプの3個だけに集約され、他のメディア・タイプは非推奨となりました。

all”メディア・タイプprint”メディア・タイプscreen”メディア・タイプ以外の過去に定義されていたメディア・タイプは非推奨扱いとなり、ユーザー・エージェントはこれらのメディア・タイプを認識するものの、どんなデバイスにも一致しないものとして扱います。

非推奨のメディア・タイプ
メディア・タイプ 説明
speech注意 音声出力デバイス
aural注意 音声出力デバイス
braille注意 点字出力デバイス
embossed注意 点字出力プリンタ・デバイス
handheld注意 モバイル・デバイス
projection注意 プロジェクタ・デバイス
tty注意 文字幅が固定されたデバイス
tv注意 テレビ・デバイス

仕様書

定義されている仕様書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク