CSS 3:メディア照会

メディアクエリーは、メディアタイプメソッドを強化し、特定のデバイスの特性に基づいてスタイルを適用し、Webサイトに表示されるスタイルを異なる画面サイズなどに適応させることができます.メディアクエリには、1つのメディアタイプと0つ以上のメディアフィーチャーを表す式が含まれます.メディアクエリは、styleまたはスタイルシートで使用できます.styleで使用される構文は次のとおりです.

<style>
	@media logic type and (feature: value) {
	  /*   CSS         */
	}
</style>

例:

<style>
	@media screen and (max-width: 600px) {
	  .facet_sidebar {
		display: none;
	  }
	}
</style>

は、外部スタイルシートへのリンクとしても使用できます.

<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />

例:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

メディアクエリがtrueの場合、対応するスタイルシートまたはスタイルルールが適用されます.
注意:メディアクエリーを使用したlinkラベルに対応するスタイルシートは、メディアクエリーがfalseを返してもダウンロードされますが、適用されません.
ロジックオペレーション
論理操作にはnot、and、onlyが含まれ、andオペレータは複数のメディアフィーチャーを1つのメディアクエリーに融合させるために使用され、notオペレータはメディアクエリー全体を否定するために使用され、onlyオペレータは古いブラウザが残りのメディアクエリーを読み込まないようにするために使用されます.
notまたはonlyオペレータを使用している場合は、特定のメディアタイプを指定する必要があります.
and
andは、複数のメディア特徴を融合させるために用いられ、メディアタイプを有するメディア特徴を融合させるために用いられてもよい.以下に、allメディアタイプを使用したメディアフィーチャーを示します(allは省略できます).

@media (min-width: 700px) { ... }

このスタイルを横モードに適用したい場合は、次のようにします.

@media (min-width: 700px) and (orientation: landscape) { ... }

では、上記のメディアクエリは、幅が700 px以上であり、横モードが処理されている場合にのみtrueを返す.このスタイルをメディアタイプscreenにのみ適用する場合は、and操作を追加できます.

@media screen and (min-width: 700px) and (orientation: landscape) { ...  }

現在、上記のメディアクエリは、700 px以上の幅を有するscreenのメディアタイプにのみ適用され、横モードに表示される.
カンマ区切りリスト
メディアクエリのカンマでリストを区切る場合、リスト内のメディアクエリがtrueの場合、スタイルシートが使用されます.カンマ区切りリスト内の各メディアクエリは独立したクエリとして扱われ、1つのメディアクエリに適用されるオペレータは他のオペレータに影響しません.
たとえば、700 px以上の幅のデバイスにスタイルを適用したい場合や、横モードの便利なデバイスを適用したい場合は、次のようにします.

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

私が使用しているデバイスの画面幅が700 pxより大きい場合、メディアクエリはtrueを返し、スタイルが使用されます.横方向の便利なデバイスを使用している場合は、最初のメディアクエリーはfalseを返しますが、2番目のメディアクエリーはtrueを返し、スタイルは任意に使用されます.
not
notオペレータは、メディアクエリの結果を逆にします.notオペレータを使用するには、デバイスタイプを指定する必要があります.notオペレータは、次のような完全なメディアクエリにのみ使用できます.

@media not all and (monochrome) { ... }

このメディアクエリは、以下のように理解されるであろう.

@media not (all and (monochrome)) { ... }

リストをカンマで区切った場合:

@media not screen and (color), print and (color) { ... }

は、以下のように理解されるであろう.

@media (not (screen and (color))), print and (color) { ... }

only
onlyオペレータは、古いメディアクエリーをサポートしていないブラウザが残りのメディアクエリーを読み込まないようにし、リンクのスタイルシートを無視します.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

メディアタイプ(type)
メディアタイプは、メディアクエリが適用されるデバイスを指定します.
all
すべてのデバイスが適用されます.notまたはonly操作を使用しない限り、メディアタイプはデフォルトでallです.
print
印刷装置と他の複数ページにコンテンツを分離する装置を含むページングメディアと、プレビューモードで画面に表示されるドキュメントを印刷するのに適しています.
screen
主にコンピュータの画面を指します.
speech
音声同期器に適しています.
注意:Firefoxは現在printおよびscreenメディアタイプのみを実装しています.
メディアフィーチャー
ほとんどのメディアフィーチャーは、最小および最大を表すために「min-」および「max-」接頭辞を追加できます.メディアフィーチャーを使用して値を指定しない場合は、フィーチャー値が0以外の場合、式はtrueを返します.
color
値:
メディア:visual
min/max接頭辞を受け入れる:yes
意味:出力装置の各色コンポーネントのビット数を表す.設定がカラーデバイスでない場合は、値は0です.
例:
すべてのカラーデバイスにスタイルを適用

@media all and (color) { ... }

各色コンポーネントの少なくとも4ビットのデバイスにスタイルを適用する

@media all and (min-color: 4) { ... }

color-index
値:
メディア:visual
min/max接頭辞を受け入れる:yes
意味:出力デバイスのカラールックアップテーブルのエントリ数を示します.
例:
インデックスカラーを使用するすべてのデバイスにスタイルを適用

@media all and (color-index) { ... }

スタイルシートをインデックスカラーのデバイスに適用し、少なくとも256色

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

aspect-ratio
値:
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:出力装置の表示領域のアスペクト比を表す.値は2つの整数で構成され、"/"で区切られ、最初の値は横方向、2番目は縦方向です.
例:
アスペクト比が少なくとも1のデバイスにスタイルを適用

@media screen and (min-aspect-ratio: 1/1) { ... }

device-aspect-ratio
値:
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:出力装置のアスペクト比を表す.値は2つの整数で構成され、"/"で区切られ、最初の値は横方向、2番目は縦方向です.
例:
ワイドスクリーンデバイスへのスタイルの適用

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

このスタイルは、デバイスのアスペクト比が16:9または16:10の場合に適用されます.
device-height
値:
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:出力デバイスの高さ(レンダリング領域だけでなく、画面全体またはページ全体の高さ)を表します.
例:
デバイスの高さが800 px未満のデバイスにスタイルを適用

<link rel="stylesheet" media="screen and (max-device-height: 799px)" />

device-width
値:
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:出力デバイスの幅(レンダリング領域だけでなく、画面全体またはページ全体の幅)を表します.
例:
デバイス幅が800 px未満のデバイスにスタイルを適用

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

display-mode
値:表示モード、オプションfullscreen、standalone、minimal-ui、browser
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:現実モードに基づくタイプ適用スタイル.
例:

	@media all and (display-mode: fullscreen) {
	  body {
		margin: 0;
		border: 5px solid black;
	  }
	}

grid
値:ブール型
メディア:visual,tactile
min/max接頭辞を受け入れる:no
意味:出力装置がグリッド装置またはビットマップ装置であることによって決定される.デバイスがグリッドベースのデバイスの場合、値は1、そうでない場合は0です.
例:

@media handheld and (grid) and (max-width: 15em) { ... }

height
値:
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:出力デバイスのレンダリング領域の高さを説明します.
monochrome
値:
メディア:visual
min/max接頭辞を受け入れる:yes
意味:単色デバイスのピクセルあたりのビット数を表す.デバイスが単色デバイスでない場合、値は0です.
例:
すべての単色デバイスにスタイルを適用するには、次の手順に従います.

@media all and (monochrome) { ... }

は、1画素当たり少なくとも8ビットの単色デバイスにスタイルを適用する.

@media all and (min-monochrome: 8) { ... }

orientation
値:landscape|portrait
メディア:visual
min/max接頭辞を受け入れる:no
意味:ビューがlandscape(幅が高さより大きい)またはportrait(高さが幅より大きい)モードであることを示します.
例:
portraitモードにスタイルを適用するには、次の手順に従います.

@media all and (orientation: portrait) { ... }

resolution
値:
メディア:bitmap
min/max接頭辞を受け入れる:yes
意味:出力装置の解像度を表します.解像度は、dpi(インチ当たりの点数)またはdpcm(センチメートル当たりの点数)と表すことができる.
例:
1インチあたり少なくとも300ドットのピクセルにスタイルを適用するデバイス:

@media print and (min-resolution: 300dpi) { ... }

scan
値:progressive|interlace
メディア:tv
min/max接頭辞を受け入れる:no
意味:テレビ出力装置のスキャン手順を説明する.
例:
プログレッシブスイープテレビにスタイルのみ適用:

@media tv and (scan: progressive) { ... }

width
値:
メディア:visual,tactile
min/max接頭辞を受け入れる:yes
意味:出力デバイスのレンダリング領域の幅を表します.
例:
幅が20 emより大きいハンドヘルドデバイスまたはスクリーンデバイスにスタイルを適用したい場合は、次の操作を行います.

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

の下には、8.5インチより大きいサイズの印刷装置があります.

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

の下には、スクリーン幅500 pxから800 pxまでのスタイルを指定するデバイスがあります.

@media screen and (min-width: 500px) and (max-width: 800px) { ... }