From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/media_queries/index.html | 103 ++++++ .../media_queries/testing_media_queries/index.html | 91 +++++ .../media_queries/using_media_queries/index.html | 385 +++++++++++++++++++++ .../index.html | 94 +++++ 4 files changed, 673 insertions(+) create mode 100644 files/ja/web/css/media_queries/index.html create mode 100644 files/ja/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/ja/web/css/media_queries/using_media_queries/index.html create mode 100644 files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html (limited to 'files/ja/web/css/media_queries') diff --git a/files/ja/web/css/media_queries/index.html b/files/ja/web/css/media_queries/index.html new file mode 100644 index 0000000000..518d1ffdda --- /dev/null +++ b/files/ja/web/css/media_queries/index.html @@ -0,0 +1,103 @@ +--- +title: メディアクエリ +slug: Web/CSS/Media_queries +tags: + - CSS + - CSS3 メディアクエリ + - Reference + - メディアクエリ + - リファレンス + - レスポンシブデザイン + - 概要 +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

メディアクエリによって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。

+ +

これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。

+ +

CSS では、 {{cssxref("@media")}} @-規則を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。

+ +

HTML でのメディアクエリ

+ +

HTML でも、メディアクエリは様々な要素に適用することができます。

+ + + +

JavaScript でのメディアクエリ

+ +

JavaScript では、ウィンドウがメディアクエリに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。

+ +

プログラムからのメディアクエリの使用については、メディアクエリのテストで知ることができます。

+ +

リファレンス

+ +

CSS @規則

+ +
+ +
+ +

ガイド

+ +
+
メディアクエリの利用
+
メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。
+
プログラムからのメディアクエリのテスト
+
JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。
+
アクセシビリティのためのメディアクエリの使用
+
ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}}
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}}
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..cce7bfcb84 --- /dev/null +++ b/files/ja/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,91 @@ +--- +title: プログラムによるメディアクエリのテスト +slug: Web/CSS/Media_Queries/Testing_media_queries +tags: + - Advanced + - CSS + - DOM + - Guide + - JavaScript + - MediaQueryList + - matchMedia + - ウェブ + - メディアクエリ + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{cssref}}
+ +

{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、メディアクエリの結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。

+ +

メディアクエリリストの作成

+ +

クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。

+ +

例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+ +

クエリの結果の確認

+ +

メディアクエリリストが作成されると、その matches プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。

+ +
if (mediaQueryList.matches) {
+  /* 現在ビューポートが縦長である */
+} else {
+  /* 現在ビューポートが縦長ではない、すなわち横長である */
+}
+
+ +

クエリの通知の受信

+ +

クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりもリスナーを登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの addListener() メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が true から false へ移行した場合に) 呼び出されるコールバック関数を設定してください。

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
+function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
+mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
+
+handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
+
+ +

このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。

+ +

次で実装する handleOrientationChange() メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。

+ +
function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* 現在ビューポートが縦長 */
+  } else {
+    /* 現在ビューポートが横長 */
+  }
+}
+
+ +

上記で、 evt — イベントオブジェクトの引数を定義しています。これは MediaQueryList の新しい実装を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の {{domxref("MediaQueryListListener")}} メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 {{domxref("MediaQueryListEvent")}} のイベントオブジェクトをコールバック関数の引数として渡します。

+ +

このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 MediaQueryList のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。

+ +

クエリの通知の終了

+ +

メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの removeListener() メソッドを呼び出してください。

+ +
mediaQueryList.removeListener(handleOrientationChange);
+
+ +

ブラウザーの対応

+ +

MediaQueryList インターフェイス

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/media_queries/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..a24ffa4734 --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,385 @@ +--- +title: メディアクエリの使用 +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - Advanced + - CSS + - Guide + - ウェブ + - ガイド + - メディア + - メディアクエリ + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。

+ +

メディアクエリは以下の用途で使用されます。

+ + + +
+

メモ: このページの例では説明のために CSS の @media を使用していますが、基本構文はすべての種類のメディアクエリで共通です。

+
+ +

構文

+ +

メディアクエリは、任意のメディアタイプと任意の数のメディア特性の式で構成されます。論理演算子を使用して、複数のクエリを様々な形で組み合わせることができます。メディアクエリは大文字・小文字の区別がありません。

+ +

メディアクエリは、 (指定されていれば) メディアタイプが文書を表示している端末に一致しており、かつすべてのメディア特性式が真と計算されれば、真と計算されます。不明なメディアタイプに対するクエリは常に偽です。

+ +
+

メモ: {{HTMLElement("link")}} タグによるメディアクエリ付きのスタイルシートは、クエリが偽を返してもダウンロードされます。にもかかわらず、中身はクエリが真に変わらない限り、適用されません。

+
+ +

メディアタイプ

+ +

メディアタイプは端末の全般的なカテゴリを説明します。 not 又は only の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 all タイプが暗黙に含まれています。

+ +
+
all
+
すべての端末に一致します。
+
print
+
ページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのものです。 (これらの形式に特有の整形上の問題について詳しくは、ページ付きメディアをご覧ください。)
+
screen
+
主に画面のためのものです。
+
speech
+
主に音声合成のためのものです。
+
+ +
非推奨のメディアタイプ: CSS2.1 及びメディアクエリ 3 では、いくつかの追加のメディアタイプ (tty, tv, projection, handheld, braille, embossed, and aural) を定義しましたが、これらはメディアクエリ 4 で非推奨となり、使用するべきではありません。 aural タイプは似ている speech で置き換えられました。
+ +

メディア特性

+ +

メディア特性は、特定の{{glossary("user agent", "ユーザーエージェント")}}や、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前概要備考
{{cssxref("@media/any-hover", "any-hover")}}入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるかMedia Queries Level 4 で追加。
{{cssxref("@media/any-pointer", "any-pointer")}}入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるかMedia Queries Level 4 で追加。
{{cssxref("@media/aspect-ratio", "aspect-ratio")}}ビューポートの幅対高さのアスペクト比
{{cssxref("@media/color", "color")}}出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ
{{cssxref("@media/color-gamut", "color-gamut")}}ユーザーエージェント及び出力端末が対応しているおよその色の範囲Media Queries Level 4 で追加。
{{cssxref("@media/color-index", "color-index")}}出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ
{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}出力端末の幅対高さのアスペクト比Media Queries Level 4 で非推奨。
{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}出力端末のレンダリング面の高さMedia Queries Level 4 で非推奨。
{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}出力端末のレンダリング面の幅Media Queries Level 4 で非推奨。
{{cssxref("@media/display-mode", "display-mode")}}ウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モードWeb App Manifest 仕様書で定義
{{cssxref("@media/forced-colors", "forced-colors")}}ユーザーエージェントがカラーパレットを制限しているかどうかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/grid", "grid")}}出力端末はグリッドとビットマップ画面のどちらを使用するか
{{cssxref("@media/height", "height")}}ビューポートの高さ
{{cssxref("@media/hover", "hover")}}主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるかMedia Queries Level 4 で追加。
{{cssxref("@media/inverted-colors", "inverted-colors")}}ユーザーエージェントまたはその下の OS が色を反転しているかMedia Queries Level 5 で追加。
{{cssxref("@media/light-level", "light-level")}}環境の明るさレベルMedia Queries Level 5 で追加。
{{cssxref("@media/monochrome", "monochrome")}}出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ
{{cssxref("@media/orientation", "orientation")}}ビューポートの向き
{{cssxref("@media/overflow-block", "overflow-block")}}ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うかMedia Queries Level 4 で追加。
{{cssxref("@media/overflow-inline", "overflow-inline")}}ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるかMedia Queries Level 4 で追加。
{{cssxref("@media/pointer", "pointer")}}主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるかMedia Queries Level 4 で追加。
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}ユーザーがページであまり動きを望まないかどうかMedia Queries Level 5 で追加。
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}ユーザーが透明度を下げるよう望んでいるかどうかMedia Queries Level 5 で追加。
{{cssxref("@media/resolution", "resolution")}}出力端末のピクセル密度
{{cssxref("@media/scan", "scan")}}出力端末のスキャン処理方式
{{cssxref("@media/scripting", "scripting")}}スクリプト (例えば JavaScript) が利用できるかを検出するMedia Queries Level 5 で追加。
{{cssxref("@media/update-frequency", "update")}}どれだけの頻度で出力端末がコンテンツの表示を変更できるかMedia Queries Level 4 で追加。
{{cssxref("@media/width", "width")}}ビューポートの幅
+ +

論理演算子

+ +

論理演算子 not, and, only を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。

+ +

and

+ +

and 演算子は、複数のメディア特性を一つのメディアクエリにまとめるために使用し、クエリが真になるためには結合されたそれぞれの特性が真を返す必要があります。メディア特性とメディアタイプを組み合わせるためにも使用します。

+ +

not

+ +

not 演算子は、メディアクエリを否定するために使用し、もしクエリが偽を返せば真を返します。カンマ区切りのクエリのリストの中にある場合、適用された特定のクエリのみを否定します。 not 演算子を使用する場合は、メディアタイプも指定しなければなりません。

+ +
+

メモ: Level 3 では、 not キーワードは個別のメディア特性式を否定するために使用することはできず、メディアクエリ全体に対してしか使用できません。

+
+ +

only

+ +

only 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 only を使用しない場合、古いブラウザーは screen and (max-width: 500px) というクエリを単なる screen として解釈してクエリの注釈を無視し、あらゆる画面にスタイルを適用します。 only 演算子を使用する場合は、メディアタイプも指定しなければなりません。

+ +

, (カンマ)

+ +

カンマは、複数のメディアクエリを一つのメディアクエリに結合するために使用します。カンマで区切ったリストの中にあるそれぞれのクエリは、他とは別なものとして扱われます。よって、リストの中の何れかのクエリが真になれば、メディアステートメント全体が真を返します。言い換えれば、リストは論理 or 演算子のように動作します。

+ +

メディアタイプの対象化

+ +

メディアタイプは、その端末の一般的なカテゴリを記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや音声ベースのスクリーンリーダーのような、特殊な端末を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。

+ +
@media print { ... }
+ +

複数の端末を対象にすることもできます。例えば、この @media ルールは2つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。

+ +
@media screen, print { ... }
+ +

すべてのメディアタイプの一覧は、メディアタイプを参照してください。とても広い用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりにメディア特性を使用してください。

+ +

メディア特性を対象とする

+ +

メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。この例はユーザーの主な入力手段 (マウスなど) が要素の上で停止できる時にスタイルを適用します。

+ +
@media (hover: hover) { ... }
+ +

多くのメディア特性は範囲特性であり、 "min-" 又は "max-" の接頭辞をつけて「最小条件」又は「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12,450px 以下である場合のみ、スタイルを適用します。

+ +
@media (max-width: 12450px) { ... }
+ +

値を指定せずにメディア特性クエリを作成した場合、特性の値がゼロ (または Level 4 では none) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。

+ +
@media (color) { ... }
+ +

ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

その他のメディア特性の例については、それぞれの特性のリファレンスページを参照してください。

+ +

複雑なメディアクエリの作成

+ +

時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 not, and, only の論理演算子の出番です。その上、複数のメディアクエリをカンマ区切りのリストで結合することができます。これによって、同じスタイルを異なる場面に適用することができます。

+ +

以前の例で、すでに and 演算子がメディアタイプとメディア特性をグループ化するために使用されているのを見ました。 and演算子は、複数のメディア特性を1つのメディアクエリに結合することもできます。一方で not 演算子は、メディアクエリを反転し、基本的に普通の意味とは逆になります。 only 演算子は古いブラウザーでスタイルが適用されるのを防止します。

+ +
+

メモ: 多くの場合、 all メディアタイプが他のタイプが指定されない場合に既定で使用されます。しかし、 not 又は only 演算子を使用する場合は、メディアタイプを明示的に指定する必要があります。

+
+ +

複数のタイプ又は特性の組み合わせ

+ +

and キーワードはメディア特性をメディアタイプ、又は他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

スタイルを画面に限定する場合は、メディア特性に screen メディアタイプを結合します。

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+ +

複数のクエリの検査

+ +

カンマ区切りのリストを使うと、ユーザーの端末が様々なメディアタイプ、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下の規則はユーザーの端末の高さが 680px 以上又は画面が縦長モードであるときにスタイルが適用されます。

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリが適用され、 media ステートメントはやはり真を返します。

+ +

クエリの意味の反転

+ +

not キーワードはメディアクエリ全体の意味を反転します。これは、適用される特定のメディアクエリを単純に反転します。 (従って、メディアクエリのカンマ区切りのリストの中では、それぞれのメディアクエリは適用されません。) not キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 not は以下のクエリの最後に評価されます。

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

... よって、上記のクエリは次のように評価されます。

+ +
@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 キーワードは、メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。最近のブラウザーでは効果がありません。

+ +
@media only screen and (color) { ... }
+
+ +

Level 4 での構文の拡張

+ +

Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために範囲コンテキストを追加しています。例えば、幅について max- の特性を使用する場合は、以下のように書くことができます。

+ +
+

注: Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は @media ブラウザー互換性一覧表を参照してください。

+
+ +
@media (max-width: 30em) { ... }
+ +

Media Queries Level 4 では、これを次のように書くことができます。

+ +
@media (width <= 30em) { ... }
+ +

min- および max- を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。

+ +
@media (min-width: 30em) and (max-width: 50em) { ... }
+ +

Level 4 の構文に変換すると、次のようになります。

+ +
@media (30em <= width <= 50em ) { ... }
+
+ +

また、 Media Queries Level 4 では and, not, or を伴う完全な論理代数を使ったメディアクエリの組み合わせの方法も追加されました。

+ +

not による特性の否定

+ +

メディア特性を not() を使用して囲むことで、クエリでその特性を否定します。例えば、 not(hover) は端末でホバーができない場合に一致します。

+ +
@media (not(hover)) { ... }
+ +

or による特性の結合

+ +

or を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば true になります。例えば、次のクエリは端末がモノクロ画面である、またはホバーができるかどうかを検査します。

+ +
@media (not (color)) or (hover) { ... }
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..02eaddac0f --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,94 @@ +--- +title: アクセシビリティのためのメディアクエリの使用 +slug: Web/CSS/Media_queries/Using_Media_Queries_for_Accessibility +tags: + - '@media' + - CSS + - アクセシビリティ + - アニメーション + - メディア特性 +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +

メディアクエリは、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。

+ +

動きの縮減

+ +

点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。

+ +

また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。

+ +

構文

+ +
+
no-preference
+
システムが把握している設定をユーザーが行っていないことを示します。
+
reduce
+
ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。
+
+ +

Example

+ +

この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ +

高コントラストモード

+ +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -ms-high-contrast メディア特性は Microsoft 拡張で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

+ +

これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。

+ +

構文

+ +

-ms-high-contrast メディア特性は、以下の値のうちの一つで指定します。

+ +

値

+ +
+
active
+
+

配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。

+
+
black-on-white
+
+

配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。

+
+
white-on-black
+
+

配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。

+
+
+ +

例

+ +

以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。

+ +
@media screen and (-ms-high-contrast: active) {
+  /* すべての高コントラストの整形規則 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
-- cgit v1.2.3-54-g00ecf