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

メディアタイプとメディアクエリ

記事May 5th,2015
July 7th,2020
リソースの対象とするデバイスを指定する“media”属性の値として指定するメディアタイプ、メディアクエリについて
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

media”属性

サンプルコード

外部スタイルシートの対象デバイスを指定
<link rel="stylesheet" type="text/css" href="style.css" media="screen and ( min-width: 640px )">
スタイルシートの対象デバイスを指定
<style media="all and ( max-width: 640px )">
メディアリソースの対象デバイスを指定
<source media="(max-width: 320px)" srcset="sample-320-sp.png">

media”属性はリソースの対象デバイスを指定します。

属性値はメディアクエリを利用します。

使用できる要素

media”属性

要素 説明
<link> 外部リソースの対象デバイスを指定
<style> スタイルシートの対象デバイスを指定
<source> リソースの対象デバイスを指定

メディアタイプとメディアクエリ

メディアクエリとは?

media”属性の値はCSS3で定義されているメディアクエリを使用して指定します。

メディアクエリはHTML4でlink”要素media”属性の値として定義されていた“メディアタイプ”を発展させたものです。メディアタイプでは対象とするデバイスを大まかなカテゴリで指定することができましたが、メディアクエリではメディアタイプと新たに定義されたメディア特性を使用してより細かく対象とするデバイスを指定することができるようになりました。

メディアクエリは論理演算子を使用することでメディアタイプとメディア特性を組み合わせてより詳しく対象とするデバイスを指定することができます。

メディアタイプの一覧

メディアタイプ 説明
all すべてのデバイス
print プリンターデバイス、印刷プレビューや印刷結果
screen スクリーンデバイス(パソコン、スマートフォンなど)
speech 音声出力デバイス

メディアタイプの一覧

メディア特性
メディア特性 説明 説明
(min-/max-)
width
出力デバイスの描画域(ビューポート)の横幅 長さ 出力デバイスの描画域(ビューポート)の横幅
(min-/max-)
height
出力デバイスの描画域(ビューポート)の高さ 長さ 出力デバイスの描画域(ビューポート)の高さ
(min-/max-)
aspect-ratio
出力デバイスの描画域(ビューポート)のアスペクト比 画面比率 出力デバイスの描画域(ビューポート)のアスペクト比
orientation 出力デバイスの描画域(ビューポート)の向き portrait 出力デバイスの描画域(ビューポート)の高さが横幅よりも大きいか等しい
landscape 出力デバイスの描画域(ビューポート)の横幅が高さよりも大きい
(min-/max-)
resolution
出力デバイスの解像度 解像度 出力デバイスの解像度
scan 出力デバイスの走査方式 interlace 出力デバイスはインターレース方式
progressive 出力デバイスはプログレッシブ方式
grid 出力デバイスがグリッドデバイスかどうか 1 出力デバイスはグリッドベース
0 出力デバイスはグリッドベースでない
update 出力デバイスがどれだけの頻度でコンテンツの表示を更新できるか none 一度表示されるとコンテンツは更新されない
slow コンテンツは更新できるが変更をすばやく表示することができない
fast コンテンツは更新でき、速度の制約なく変更を表示できる
overflow-block 出力デバイスがブロック軸方向に溢れたコンテンツをどのように扱うか none ブロック軸方向に溢れたコンテンツは表示されない
scroll ブロック軸方向に溢れたコンテンツはスクロールすることで表示される
optional-paged ブロック軸方向に溢れたコンテンツはスクロールすることで表示されるが、ページ区切りを入れることで次のページに表示させることができる
paged ブロック軸方向に溢れたコンテンツは不連続のページに分割され、溢れた分は次のページに表示される
overflow-inline 出力デバイスがインライン軸方向に溢れたコンテンツをどのように扱うか none インライン軸方向に溢れたコンテンツは表示されない
scroll インライン軸方向に溢れたコンテンツはスクロールすることで表示される
(min-/max-)
color
出力デバイスのカラーコンポーネントあたりのビット数 整数 出力デバイスのカラーコンポーネントあたりのビット数
0 出力デバイスはカラーデバイスではない
(省略) 出力デバイスはカラーデバイスである
color-gamut 出力デバイスが対応する色の範囲 srgb sRGBの色域、もしくはそれより広い範囲
p3 DCI-P3の色域、もしくはそれより広い範囲
rec2020 Rec.2020の色域、もしくはそれより広い範囲
(min-/max-)
color-index
出力デバイスのカラーテーブルのエントリ数 整数 出力デバイスのカラーテーブルのエントリ数
0 出力デバイスはカラーテーブルを使用しない
(省略) 出力デバイスはカラーテーブルを使用している
display-mode アプリケーションの表示モード fullscreen 表示領域がすべて使用され、ユーザインターフェースは表示されない
standalone スタンドアロンアプリケーションのように表示領域がすべて使用されるがステータスバーのようなユーザインターフェースは表示される
minimal-ui スタンドアロンアプリケーションのように表示するがナビゲーションのための最小限のナビゲーションのためのユーザインターフェースが表示される
browser ブラウザのようにナビゲーションのためのユーザインターフェースが表示される
(min-/max-)
monochrome
出力デバイスのモノクロフレームバッファのビット数 整数 出力デバイスのモノクロフレームバッファのビット数
0 出力デバイスはモノクロームデバイスではない
(省略) 出力デバイスはモノクロームデバイス
inverted-colors コンテンツが色を反転させて表示されるかどうか none 色を通常通り表示する
inverted 色が反転されて表示される
pointer 出力デバイスのメインの入力メカニズムがポインティングデバイスかどうか none 出力デバイスのメインの入力メカニズムはマウスなどのポインティングデバイスはない
coarse 出力デバイスのメインの入力メカニズムはポインティングデバイスであるが、正確性に制約がある
fine 出力デバイスのメインの入力メカニズムはポインティングデバイスであるが、正確性が高い
hover 出力デバイスのメインの入力メカニズムが要素にホバーできるかどうか none 出力デバイスのメインの入力メカニズムはホバーができない
hover 出力デバイスのメインの入力メカニズムはホバーができる
any-pointer 出力デバイスにポインティングデバイスがあるどうか none 出力デバイスはマウスなどのポインティングデバイスはない
coarse 出力デバイスはポインティングデバイスがあるが、正確性に制約がある
fine 出力デバイスはポインティングデバイスがあり、正確性が高い
any-hover 出力デバイスにホバーができる入力メカニズムがあるどうか none 出力デバイスはホバーができる入力メカニズムはない
hover 出力デバイスはホバーができる入力メカニズムがある
light-level 出力デバイスが置かれた環境の明るさ dim 出力デバイスは薄暗く、明るい画面が見づらい環境にある
normal 出力デバイスは画面の明るさと同等の明るさで見やすい環境にある
washed 出力デバイスは過度に明るく、ディスプレイに反射して見づらい環境にある
prefers-reduced-motion ユーザーが最小限のアニメーションを望むかどうか no-preference ユーザーは設定を行っていない
reduce ユーザーは最小限のアニメーションを望む
prefers-reduced-transparency ユーザーは最小限の透明効果を望むかどうか no-preference ユーザーは設定を行っていない
reduce ユーザーは最小限の透明効果を望む
prefers-contrast ユーザーが高いコントラストを望むか低いコントラストを望むか no-preference ユーザーは設定を行っていない
high ユーザーは高いコントラストを望む
low ユーザーは低いコントラストを望む
prefers-color-scheme ユーザーが明るい色遣いを望むか暗い色遣いを望むか no-preference ユーザーは設定を行っていない
light ユーザーは明るい色遣いを望む
dark ユーザーは暗い色遣いを望む
scripting スクリプトが利用できるかどうか none スクリプトは利用できない
initial-only スクリプトは文書を読み込んでいる間のみ利用できる
enabled スクリプトが利用できる

論理演算子の一覧

演算子 説明
and 複数の条件を一つのメディアクエリに組み合わせる
not メディアクエリを否定する
only メディアクエリ全体を満たす
, 複数のメディアクエリのうちいずれかを満たす

使用例

すべてのデバイスを対象とする

<link rel="stylesheet" type="text/css" href="style.css" media="all">

media”属性を省略した場合もすべてのデバイスが対象となります。

スクリーンとプリンターを対象とする

<link rel="stylesheet" type="text/css" href="style.css" media="screen, print">

ビューポートの幅ごとにスタイルを切り替える

<link rel="stylesheet" type="text/css" href="style-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" type="text/css" href="style-tb.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" type="text/css" href="style-pc.css" media="( min-width: 1280px )">

レスポンシブウェブデザインのウェブサイトではビューポートの横幅に応じてスタイルシートを切り替えることでウェブページのレイアウトを切り替えます。

HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク