diff options
Diffstat (limited to 'files/ja/web')
86 files changed, 3085 insertions, 3344 deletions
diff --git a/files/ja/web/api/windoweventhandlers/onafterprint/index.html b/files/ja/web/api/windoweventhandlers/onafterprint/index.html index a74a5592d7..97472b8b60 100644 --- a/files/ja/web/api/windoweventhandlers/onafterprint/index.html +++ b/files/ja/web/api/windoweventhandlers/onafterprint/index.html @@ -17,7 +17,7 @@ original_slug: Web/API/Window/onafterprint <p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onafterprint</code></strong> プロパティは、現在のウィンドウの {{event("afterprint")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、ユーザーが印刷した後や、ユーザーが印刷ダイアログで中止した場合に発生します。</span></p> -<p>{{event("beforeprint")}} イベントと <code>afterprint</code> イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、<code><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types">@media print</a></code> CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。</p> +<p>{{event("beforeprint")}} イベントと <code>afterprint</code> イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、<code><a href="/ja/docs/Web/CSS/@media#メディア種別">@media print</a></code> CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html b/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html index 7460c9bedc..a98af47caf 100644 --- a/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html +++ b/files/ja/web/api/windoweventhandlers/onbeforeprint/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/WindowEventHandlers/onbeforeprint <p>{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onbeforeprint</code></strong> プロパティは、現在のウィンドウの {{event("beforeprint")}} イベントを処理するための {{event("Event_handlers", "event handler")}} です。 このイベントは、印刷ダイアログウィンドウが開く前に発生します。</p> -<p><code>beforeprint</code> イベントと {{event("afterprint")}} イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、<code><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types">@media print</a></code> CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。</p> +<p><code>beforeprint</code> イベントと {{event("afterprint")}} イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、<code><a href="/ja/docs/Web/CSS/@media#メディア種別">@media print</a></code> CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html index 79081a08d0..85eb9de41f 100644 --- a/files/ja/web/css/@import/index.html +++ b/files/ja/web/css/@import/index.html @@ -70,7 +70,7 @@ translation_of: Web/CSS/@import <tr> <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td> <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>単純な <a href="/ja/docs/Web/CSS/@media#Media_types" title="CSS/@media#Media_types">メディアタイプ</a> だけでなく、いかなるメディアクエリもサポートするよう構文拡張</td> + <td>単純な <a href="/ja/docs/Web/CSS/@media#メディア種別" title="CSS/@media#Media_types">メディア種別</a> だけでなく、いかなるメディアクエリもサポートするよう構文拡張</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> diff --git a/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html deleted file mode 100644 index b1264d8f6b..0000000000 --- a/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: '-moz-device-pixel-ratio' -slug: Web/CSS/@media/-moz-device-pixel-ratio -tags: - - '@media' - - CSS - - Deprecated - - Non-standard - - media feature -translation_of: Web/CSS/@media/-moz-device-pixel-ratio ---- -<div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}</div> - -<p><strong><code>-moz-device-pixel-ratio</code></strong> は Gecko 独自の <a href="/ja/docs/Web/CSS">CSS</a> の Gecko のみの<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、 CSS ピクセルあたりのデバイスピクセル数に基づいてスタイルを適用することができます。</p> - -<div class="warning"> -<p><strong>この特性を使用しないでください。</strong> <code><a href="/ja/docs/Web/CSS/@media/resolution">resolution</a></code> 特性と <code>dppx</code> の単位を代わりに使用してください。unit instead.</p> -</div> - -<div class="note"><strong>注</strong>: このメディア特性は Webkit 及び <a href="https://msdn.microsoft.com/ja/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> でも <code>-webkit-device-pixel-ratio</code> として実装されています。 min 及び max 接頭辞は、 Gecko では <code>min--moz-device-pixel-ratio</code> 及び <code>max--moz-device-pixel-ratio</code> です。しかし、同じ接頭辞が Webkit では <code>-webkit-min-device-pixel-ratio</code> 及び <code>-webkit-max-device-pixel-ratio</code> として実装されています。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<dl> - <dt>{{cssxref("<number>")}}</dt> - <dd>CSS ピクセルあたりのデバイスピクセル数。</dd> -</dl> - -<p><br> - <strong>メディア:</strong> {{cssxref("Media/Visual")}}<br> - <strong>min/max 接頭辞の受付:</strong> はい</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_compatibility_example" name="Basic_compatibility_example">基本的な互換コード</h3> - -<p><code>-moz-device-pixel-ratio</code> は Firefox のバージョン 16 以前や、 <code>dppx</code> に未対応の WebKit ベースのブラウザーの <code>-webkit-device-pixel-ratio</code> との互換性のために使用されることがあります。</p> - -<p>例:</p> - -<pre class="brush: css notranslate">@media (-webkit-min-device-pixel-ratio: 2), /* Webkit ベースのブラウザー */ - (min--moz-device-pixel-ratio: 2), /* 古い Firefox ブラウザー (Firefox 16 以前) */ - (min-resolution: 2dppx), /* 標準の方法 */ - (min-resolution: 192dpi) /* dppx のフォールバック */ </pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <code>resolution</code> 及び <code>dppx</code> に関わる互換性の良い習慣については、 <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG の記事</a>を参照してください。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>どの仕様書にも含まれていません。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}</p> diff --git a/files/ja/web/css/@media/-moz-device-pixel-ratio/index.md b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.md new file mode 100644 index 0000000000..bf15f8243f --- /dev/null +++ b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.md @@ -0,0 +1,57 @@ +--- +title: '-moz-device-pixel-ratio' +slug: Web/CSS/@media/-moz-device-pixel-ratio +tags: + - '@media' + - CSS + - 非推奨 + - 標準外 + - media feature +browser-compat: css.at-rules.media.-moz-device-pixel-ratio +translation_of: Web/CSS/@media/-moz-device-pixel-ratio +--- +{{CSSRef}} {{Non-standard_header}} {{Deprecated_header}} + +**`-moz-device-pixel-ratio`** は Gecko 独自の [CSS](/ja/docs/Web/CSS) の Gecko のみの[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、 CSS ピクセルあたりのデバイスピクセル数に基づいてスタイルを適用することができます。 + +> **Warning:** この特性を使用しないでください。代わりに [`resolution`](/ja/docs/Web/CSS/@media/resolution) 特性と `dppx` の単位を使用してください。 + +> **Note:** このメディア特性は Webkit および [IE 11 for Windows Phone 8.1](https://msdn.microsoft.com/ja/library/ie/dn760733(v=vs.85).aspx) でも `-webkit-device-pixel-ratio` として実装されています。 min および max 接頭辞は、 Gecko では `min--moz-device-pixel-ratio` および `max--moz-device-pixel-ratio` です。しかし、同じ接頭辞が Webkit では `-webkit-min-device-pixel-ratio` および `-webkit-max-device-pixel-ratio` として実装されています。 + +## 構文 + +- {{cssxref("<number>")}} + - : CSS ピクセルあたりのデバイスピクセル数。 + +**メディア:** {{cssxref("@media")}} +**min/max 接頭辞の受付:** はい + +## 例 + +### 基本的な互換コード + +`-moz-device-pixel-ratio` は Firefox のバージョン 16 以前や、 `dppx` に未対応の WebKit ベースのブラウザーの `-webkit-device-pixel-ratio` との互換性のために使用されることがあります。 + +例: + +```css +@media (-webkit-min-device-pixel-ratio: 2), /* Webkit ベースのブラウザー */ + (min--moz-device-pixel-ratio: 2), /* 古い Firefox ブラウザー (Firefox 16 以前) */ + (min-resolution: 2dppx), /* 標準の方法 */ + (min-resolution: 192dpi) /* dppx のフォールバック */ </pre> +``` + +> **Note:** `resolution` および `dppx` に関わる互換性の良い習慣については、 [CSSWG の記事](http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/)を参照してください。 + +## 仕様書 + +どの仕様書にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/-ms-high-contrast/index.html b/files/ja/web/css/@media/-ms-high-contrast/index.html deleted file mode 100644 index d81fe0097f..0000000000 --- a/files/ja/web/css/@media/-ms-high-contrast/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: '-ms-high-contrast' -slug: Web/CSS/@media/-ms-high-contrast -tags: - - '@media' - - CSS - - Microsoft 拡張 - - Reference - - メディア特性 - - 標準外 -translation_of: Web/CSS/@media/-ms-high-contrast -original_slug: Web/CSS/-ms-high-contrast ---- -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-ms-high-contrast</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は <a href="/ja/docs/Web/CSS/Microsoft_extensions">Microsoft 拡張</a>で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。</p> - -<p>高コントラストモードとは、前景色と背景色をユーザーが指定したテーマに動的に置き換えることで、コンテンツを可能な限り見やすくすることを優先した表示モードです。ウェブコンテンツの場合、テーマカラーはコンテンツタイプに対応付けられます。</p> - -<p>このメディア特性はビットマップメディア型に適用されます。 <em>min/max</em> 接頭辞は受け付けません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><strong><code>-ms-high-contrast</code></strong> メディア特性は以下の値のうちの一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code> {{Deprecated_Inline}}</dt> - <dd>...<br> - <strong>Microsoft Edge 18 で対応がなくなりました。</strong></dd> - <dt><code>active</code></dt> - <dd> - <p>配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。</p> - </dd> - <dt><code>black-on-white</code></dt> - <dd> - <p>配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。</p> - </dd> - <dt><code>white-on-black</code></dt> - <dd> - <p>配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。</p> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{CSSSyntax}} - -<h2 id="Example" name="Example">例</h2> - -<p>以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。</p> - -<pre class="brush: css">@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'); } -}</pre> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<h3 id="Theming" name="Theming">テーマ</h3> - -<p>高コントラストモードのテーマカラーは、非推奨となったの <a href="https://www.w3.org/TR/2018/REC-css-color-3-20180619/#css2-system">CSS2 システムカラー</a>の限られたサブセットに由来しています。利用可能な色のキーワードは以下の通りです。</p> - -<ul> - <li><code>windowText</code>: テキストコンテンツの色を制御します。</li> - <li><code>highlightText</code>: 選択されたテキストの色を制御します。</li> - <li><code>highlight</code>: 選択されたテキストの背景色を制御します。</li> - <li><code>buttonFace</code>: {{HTMLElement("button")}} 要素のテキストの色を制御します。</li> - <li><code>window</code>: 背景色を制御します。</li> - <li>{{HTMLElement("a")}} 要素でリンクの色を制御します。</li> -</ul> - -<p>高コントラストモードのテーマは動的なので、他の <a href="/ja/docs/Web/CSS/color">CSS カラー値</a>の代わりにこれらのカラーキーワードを使用してください。これにより、コンテンツが常に認識できるようになります。</p> - -<h3 id="Content" name="Content">コンテンツ</h3> - -<p>可能な限り、 CSS2 システムカラーのキーワードを使用してコンテンツを変更するよりも、 HTML マークアップを更新することをお勧めします。これは、コンテンツをより予測しやすくするのに役立ちます。</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<p>何れかの仕様書の一部ではありません。</p> - -<h2 id="Remarks" name="Remarks">注釈</h2> - -<p>Microsoft Edge 18 で、 <code>-ms-high-contrast: none</code> は対応がなくなりました。 Microsoft Edge バージョン18以降では、代わりに <a href="/ja/docs/Web/CSS/@media/forced-colors"><code>forced-colors</code> メディア特性</a>が使用される予定ですが、 <code>forced-colors</code> メディア特性の仕様は現在も作業中です。</p> - -<p><code>-ms-high-contrast</code> メディア特性は、 {{CSSxRef("-ms-high-contrast-adjust")}} プロパティと共に動作します。</p> - -<p><code>-ms-high-contrast</code> メディア特性は Windows 8 で導入されました。</p> diff --git a/files/ja/web/css/@media/-ms-high-contrast/index.md b/files/ja/web/css/@media/-ms-high-contrast/index.md new file mode 100644 index 0000000000..e5b328076e --- /dev/null +++ b/files/ja/web/css/@media/-ms-high-contrast/index.md @@ -0,0 +1,97 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/@media/-ms-high-contrast +tags: + - '@media' + - CSS + - 標準外 + - リファレンス + - メディア特性 +translation_of: Web/CSS/@media/-ms-high-contrast +original_slug: Web/CSS/-ms-high-contrast +--- +{{CSSRef}}{{Non-standard_header}} + +**-ms-high-contrast** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、 [Microsoft 拡張](/ja/docs/Web/CSS/Microsoft_Extensions)であり、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。 + +高コントラストモードとは、前景色と背景色をユーザーが指定したテーマに動的に置き換えることで、コンテンツを可能な限り見やすくすることを優先した表示モードです。ウェブコンテンツの場合、テーマカラーはコンテンツタイプに対応付けられます。 + +このメディア特性はビットマップメディア型に適用されます。 *min/max* 接頭辞は受け付けません。 + +## 構文 + +**`-ms-high-contrast`** メディア特性は以下の値のうちの一つで指定します。 + +### 値 + +- `none` {{Deprecated_Inline}} + - : ... + **Microsoft Edge 18 で対応がなくなりました。** +- `active` + - : 配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。 +- `black-on-white` + - : 配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。 +- `white-on-black` + - : 配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。 + +## 例 + +### 何らかの high-contrast 変化形に一致 + +```css +@media screen and (-ms-high-contrast: active) { + /* All high contrast styling rules */ +} +``` + +### black-on-white の変化形に一致 + +```css +@media screen and (-ms-high-contrast: black-on-white) { + div { background-image: url('image-bw.png'); } +} +``` + +### white-on-black の変化形に一致 + +```css +@media screen and (-ms-high-contrast: white-on-black) { + div { background-image: url('image-wb.png'); } +} +``` + +## アクセシビリティの考慮 + +### テーマ + +高コントラストモードのテーマカラーは、非推奨となったの [CSS2 システムカラー](https://www.w3.org/TR/2018/REC-css-color-3-20180619/#css2-system)の限られたサブセットに由来しています。利用可能な色のキーワードは以下の通りです。 + +- `windowText`: テキストコンテンツの色を制御します。 +- `highlightText`: 選択されたテキストの色を制御します。 +- `highlight`: 選択されたテキストの背景色を制御します。 +- `buttonFace`: {{HTMLElement("button")}} 要素のテキストの色を制御します。 +- `window`: 背景色を制御します。 +- {{HTMLElement("a")}} 要素でリンクの色を制御します。 + +高コントラストモードのテーマは動的なので、他の [CSS カラー値](/ja/docs/Web/CSS/color)の代わりにこれらのカラーキーワードを使用してください。これにより、コンテンツが常に認識できるようになります。 + +### コンテンツ + +可能な限り、 CSS2 システムカラーのキーワードを使用してコンテンツを変更するよりも、 HTML マークアップを更新することをお勧めします。これは、コンテンツをより予測しやすくするのに役立ちます。 + +## 仕様書 + +何れかの仕様書の一部ではありません。 + +## 注釈 + +Microsoft Edge 18 で、 `-ms-high-contrast: none` は対応がなくなりました。 Microsoft Edge バージョン 18 以降では、代わりに [`forced-colors` メディア特性](/ja/docs/Web/CSS/@media/forced-colors)が使用される予定ですが、 `forced-colors` メディア特性の仕様は現在も作業中です。 + +`-ms-high-contrast` メディア特性は、 {{CSSxRef("-ms-high-contrast-adjust")}} プロパティと共に動作します。 + +`-ms-high-contrast` メディア特性は Windows 8 で導入されました。 + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/-webkit-animation/index.md b/files/ja/web/css/@media/-webkit-animation/index.md new file mode 100644 index 0000000000..8816fd567b --- /dev/null +++ b/files/ja/web/css/@media/-webkit-animation/index.md @@ -0,0 +1,55 @@ +--- +title: '-webkit-animation' +slug: Web/CSS/@media/-webkit-animation +tags: + - '@media' + - CSS + - リファレンス + - WebKit + - メディア特性 +browser-compat: css.at-rules.media.-webkit-animation +translation_of: Web/CSS/@media/-webkit-animation +--- +{{ CSSRef }} {{ Non-standard_header }} + +**`-webkit-transition`** は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、 [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、ベンダー接頭辞つきの CSS {{cssxref("animation")}} に対応していれば値が `true` になります。 + +Apple には [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3)に説明があります。eference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). + +> **Note:** このメディア特性は WebKit のみが対応しています。可能であれば、代わりに {{cssxref("@supports")}} 機能クエリーを使用してください。 + +## 構文 + +`-webkit-animation` メディア特性は論理型で、ベンダー接頭辞つきの CSS アニメーションプロパティに対応していれば `true` になります。 + +### 値 + +- `true` + - : ブラウザーが `-webkit` の接頭辞の付いた CSS {{cssxref("animation")}} に対応しています。 +- `false` + - : ブラウザーは接頭辞つきの CSS アニメーションに対応していません。 + +## 例 + +### -webkit-animation の例 + +```css +@media (-webkit-animation) { + /* CSS to use if animations are supported */ +} +``` + +## 仕様書 + +どの標準でも定義されていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`-webkit-transform-3d`](/en-US/docs/Web/CSS/@media/-webkit-transform-3d) +- [`-webkit-transform-2d`](/en-US/docs/Web/CSS/@media/-webkit-transform-2d) +- [`-webkit-transition`](/en-US/docs/Web/CSS/@media/-webkit-transition) +- [Test page at quirksmode.org](https://www.quirksmode.org/css/tests/mediaqueries/animation.html) diff --git a/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html deleted file mode 100644 index 16d2f85038..0000000000 --- a/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: '-webkit-device-pixel-ratio' -slug: Web/CSS/@media/-webkit-device-pixel-ratio -tags: - - '@media' - - CSS - - NeedsBrowserCompatibility - - Non-standard - - WebKit - - media feature -translation_of: Web/CSS/@media/-webkit-device-pixel-ratio ---- -<div>{{ CSSRef }} {{ Non-standard_header }}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-webkit-device-pixel-ratio</code></strong> 標準外の真偽値<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、標準の<a href="/ja/docs/Web/CSS/@media/resolution"><code>resolution</code></a>メディア特性の代替です。</p> - -<div class="note"> -<p><strong>注:</strong> このメディア特性は WebKit の機能です。可能であれば、代わりに <a href="/ja/docs/Web/CSS/@media/resolution"><code>resolution</code></a> メディア特性クエリを使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>-webkit-device-pixel-ratio</code> 特性は {{cssxref("<number>")}} 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた <strong><code>-webkit-min-device-pixel-ratio</code></strong> 及び <strong><code>-webkit-max-device-pixel-ratio</code></strong> の変化形を使用して、それぞれ最低値と最高値をクエリすることもできます。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<number>")}}</dt> - <dd>CSS の <a href="/ja/docs/Web/CSS/length#Absolute_length_units"><code>px</code></a> を表すために使われるデバイスピクセルの数です。この値は <code><number></code> であり、構文的に単位を許可しておらず、暗黙の単位は <a href="/ja/docs/Web/CSS/resolution#dppx"><code>dppx</code></a> です。</dd> -</dl> - -<h2 id="Implementation" name="Implementation">実装</h2> - -<pre class="brush: css notranslate">/* "dppx" の単位が含まれています。 */ -@media (-webkit-min-device-pixel-ratio: 2) { ... } -/* ... は以下のものと同じです。 */ -@media (min-resolution: 2dppx) { ... } - -/* 同様に */ -@media (-webkit-max-device-pixel-ratio: 2) { ... } -/* ... は以下のものと同じです。 */ -@media (max-resolution: 2dppx) { ... } -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>This is a test of your device's pixel density.</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">/* 正確な解像度 */ -@media (-webkit-device-pixel-ratio: 1) { - p { - color: red; - } -} - -/* 最低解像度 */ -@media (-webkit-min-device-pixel-ratio: 1.1) { - p { - font-size: 1.5em; - } -} - -/* 最高解像度 */ -@media (-webkit-max-device-pixel-ratio: 3) { - p { - background: yellow; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回の標準化</td> - </tr> - <tr> - <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> - <small lang="en-US">'media query extensions' in that document.</small></a></td> - <td>標準外の非公式文書</td> - <td>初回の文書化</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}</p> - -<h2 id="See_also" name="See_also">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></li> - <li>{{cssxref("resolution")}}</li> - <li><a href="/ja/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a></li> - <li><a href="/ja/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a></li> - <li><a href="/ja/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a></li> - <li><a href="/ja/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a></li> - <li><a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">W3C Suggested Method to UnPrefix</a></li> -</ul> diff --git a/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.md b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.md new file mode 100644 index 0000000000..e91e0c6d0b --- /dev/null +++ b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.md @@ -0,0 +1,96 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +tags: + - '@media' + - CSS + - NeedsBrowserCompatibility + - 標準外 + - WebKit + - メディア特性 +browser-compat: css.at-rules.media.-webkit-device-pixel-ratio +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +{{ CSSRef }} {{ Non-standard_header }} + +**`-webkit-device-pixel-ratio`** は [CSS](/ja/docs/Web/CSS) の標準外の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、標準の[`resolution`](/ja/docs/Web/CSS/@media/resolution)メディア特性の代替です。 + +> **Note:** このメディア特性は WebKit の機能です。可能であれば、代わりに [`resolution`](/ja/docs/Web/CSS/@media/resolution) メディア特性クエリーを使用してください。 + +## 構文 + +`-webkit-device-pixel-ratio` 特性は {{cssxref("<number>")}} 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた **`-webkit-min-device-pixel-ratio`** および **`-webkit-max-device-pixel-ratio`** の変化形を使用して、それぞれ最低値と最高値をクエリーすることもできます。 + +### 値 + +- {{cssxref("<number>")}} + - : CSS の [`px`](/ja/docs/Web/CSS/length#absolute_length_units) を表すために使われるデバイスピクセルの数です。この値は `<number>` であり、構文的に単位を許可しておらず、暗黙の単位は [`dppx`](/ja/docs/Web/CSS/resolution#units) です。 + +## 実装 + +```css +/* "dppx" の単位が含まれています。 */ +@media (-webkit-min-device-pixel-ratio: 2) { ... } +/* ... は以下のものと同じです。 */ +@media (min-resolution: 2dppx) { ... } + +/* 同様に */ +@media (-webkit-max-device-pixel-ratio: 2) { ... } +/* ... は以下のものと同じです。 */ +@media (max-resolution: 2dppx) { ... } +``` + +## 例 + +### HTML + +```html +<p>This is a test of your device's pixel density.</p> +``` + +### CSS + +```css +/* 正確な解像度 */ +@media (-webkit-device-pixel-ratio: 1) { + p { + color: red; + } +} + +/* 最低解像度 */ +@media (-webkit-min-device-pixel-ratio: 1.1) { + p { + font-size: 1.5em; + } +} + +/* 最高解像度 */ +@media (-webkit-max-device-pixel-ratio: 3) { + p { + background: yellow; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- {{cssxref("resolution")}} +- [`-webkit-transform-2d`](/ja/docs/Web/CSS/@media/-webkit-transform-2d) +- [`-webkit-transform-3d`](/ja/docs/Web/CSS/@media/-webkit-transform-3d) +- [`-webkit-transition`](/ja/docs/Web/CSS/@media/-webkit-transition) +- [`-webkit-animation`](/ja/docs/Web/CSS/@media/-webkit-animation) +- [W3C Suggested Method to UnPrefix](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) diff --git a/files/ja/web/css/@media/-webkit-transform-2d/index.html b/files/ja/web/css/@media/-webkit-transform-2d/index.html deleted file mode 100644 index 718c2ff762..0000000000 --- a/files/ja/web/css/@media/-webkit-transform-2d/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: '-webkit-transform-2d' -slug: Web/CSS/@media/-webkit-transform-2d -tags: - - '@media' - - CSS - - WebKit 拡張 - - メディア特性 - - リファレンス - - 標準外 -translation_of: Web/CSS/@media/-webkit-transform-2d ---- -<div>{{ Non-standard_header }}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transform-2d</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、ベンダー接頭辞付きの CSS 2D {{cssxref("transform")}} に対応していれば値が <code>true</code> になります。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメディア特性は WebKit でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>仕様書では定義されていません。 Apple には <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference に説明</a>があります。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.-webkit-transform-2d")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li> - <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li> - <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li> - <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Test page at quirksmode.org</a></li> -</ul> - -<div>{{ CSSRef }}</div> diff --git a/files/ja/web/css/@media/-webkit-transform-2d/index.md b/files/ja/web/css/@media/-webkit-transform-2d/index.md new file mode 100644 index 0000000000..86a1152a34 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-2d/index.md @@ -0,0 +1,68 @@ +--- +title: '-webkit-transform-2d' +slug: Web/CSS/@media/-webkit-transform-2d +tags: + - '@media' + - CSS + - 標準外 + - リファレンス + - WebKit + - メディア特性 +browser-compat: css.at-rules.media.-webkit-transform-2d +translation_of: Web/CSS/@media/-webkit-transform-2d +--- +{{ Non-standard_header }} + +**`-webkit-transform-2d`** は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性) で [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、ベンダー接頭辞付きの CSS の二次元 {{cssxref("transform")}} に対応していれば値が `true` になります。 + +Apple には [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3)に説明があります。 + +## 構文 + +`-webkit-transform-2d` は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性) で [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、 `-webkit` 接頭辞付きの CSS の二次元 {{cssxref("transform")}} に対応していれば値が `true` になります。 + +### 値 + +- `true` + - : ブラウザーは二次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。 +- `false` + - : 二次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。 + +## 例 + +### 基本的な例 + +```css +@media (-webkit-transform-2d) { + div { + -webkit-transform: translate(100px, 100px); + } +} +``` + +このメディア機能は WebKit でのみ対応しています。可能であれば、代わりに {{cssxref("@supports")}} 機能クエリを使用してください。 + +```css +@supports (-webkit-transform: translate(100px, 100px)) { + div { + -webkit-transform: translate(100px, 100px); + } +} +``` + +## 仕様書 + +どの標準でも定義されていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("@media/-webkit-transform-3d", "-webkit-transform-3d")}} +- {{cssxref("@media/-webkit-transition", "-webkit-transition")}} +- {{cssxref("@media/-webkit-animation", "-webkit-animation")}} +- [Test page at quirksmode.org](https://www.quirksmode.org/css/tests/mediaqueries/animation.html) + +{{ CSSRef }} diff --git a/files/ja/web/css/@media/-webkit-transform-3d/index.html b/files/ja/web/css/@media/-webkit-transform-3d/index.html deleted file mode 100644 index 62650ee16c..0000000000 --- a/files/ja/web/css/@media/-webkit-transform-3d/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: '-webkit-transform-3d' -slug: Web/CSS/@media/-webkit-transform-3d -tags: - - '@media' - - CSS - - WebKit 拡張 - - メディア特性 - - リファレンス - - 標準外 -translation_of: Web/CSS/@media/-webkit-transform-3d ---- -<div>{{ Non-standard_header }}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transform-3d</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が <code>true</code> になります。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。</p> -</div> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@media (-webkit-transform-3d) { - .foo { - transform-style: preserve-3d; - } -} - -@media (-webkit-transform-3d: 1) { - .foo { - transform-style: preserve-3d; - } -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回の標準化</td> - </tr> - <tr> - <td><a class="external" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference<br> - <small>'media query extensions' in that document.</small></a></td> - <td>標準外の非公式文書</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li> - <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li> - <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li> - <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Test page at quirksmode.org</a></li> -</ul> - -<div>{{ CSSRef }}</div> diff --git a/files/ja/web/css/@media/-webkit-transform-3d/index.md b/files/ja/web/css/@media/-webkit-transform-3d/index.md new file mode 100644 index 0000000000..f792d819bc --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-3d/index.md @@ -0,0 +1,67 @@ +--- +title: '-webkit-transform-3d' +slug: Web/CSS/@media/-webkit-transform-3d +tags: + - '-webkit-transform-3d' + - 3D + - '@media' + - CSS + - 標準外 + - リファレンス + - WebKit + - メディア特性 + - transform +browser-compat: css.at-rules.media.-webkit-transform-3d +translation_of: Web/CSS/@media/-webkit-transform-3d +--- +{{ Non-standard_header }} + +**`-webkit-transform-3d`** は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が `true` になります。 + +> **Note:** このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリーを代わりに使用してください。 + +## 構文 + +`-webkit-transform-3d` は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が `true` になります。 + +### Values + +- `true` + - : ブラウザーは三次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。 +- `false` + - : 三次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。 + +## 例 + +### -webkit-transform-3d のメディアクエリーの例 + +```css +@media (-webkit-transform-3d) { + .foo { + transform-style: preserve-3d; + } +} + +@media (-webkit-transform-3d: 1) { + .foo { + transform-style: preserve-3d; + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}} +- {{cssxref("@media/-webkit-transition", "-webkit-transition")}} +- {{cssxref("@media/-webkit-animation", "-webkit-animation")}} +- [Test page at quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html) + +{{ CSSRef }} diff --git a/files/ja/web/css/@media/-webkit-transition/index.html b/files/ja/web/css/@media/-webkit-transition/index.html deleted file mode 100644 index 9362a19dc9..0000000000 --- a/files/ja/web/css/@media/-webkit-transition/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: '-webkit-transition' -slug: Web/CSS/@media/-webkit-transition -tags: - - '@media' - - Blink - - CSS - - Deprecated - - Non-standard - - Reference - - WebKit - - WebKit 拡張 - - メディア特性 -translation_of: Web/CSS/@media/-webkit-transition ---- -<div>{{ CSSRef }} {{deprecated_header}} {{ Non-standard_header }}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transition</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、閲覧コンテキストが <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>に対応していれば値が <code>true</code> になります。 WebKit または Blink 以外を使用したブラウザーでは対応していません。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメディア特性は使用しないでください。これは仕様化されておらず、広く実装されておらず、すべてのブラウザーから削除されています。代わりに {{cssxref("@supports")}} 特性クエリを使用してください。</p> -</div> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Use_supports_instead" name="Use_supports_instead">代わりに @supports を使用してください</h3> - -<p><code>-webkit-transition</code> メディア特性を使用しないでください。代わりに、 CSS の {{cssxref("@supports")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>を用いてトランジションの有無を判定してください。</p> - -<pre class="brush: css">@supports (transition: initial) { - /* トランジションに対応している場合に使われる CSS */ -} -</pre> - -<h3 id="Obsolete_example" name="Obsolete_example">廃止された例</h3> - -<p>廃止される以前、次のように <code>-webkit-transition</code> を使用することができました。</p> - -<pre class="brush: css">@media (-webkit-transition) { - /* トランジションに対応している場合に使われる CSS */ -} -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<p>仕様書では定義されていません。 Apple には <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference に説明</a>があります。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.-webkit-transition")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディア特性の利用</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li> - <li>{{cssxref("@supports")}}</li> - <li>{{cssxref("transition")}}</li> -</ul> diff --git a/files/ja/web/css/@media/-webkit-transition/index.md b/files/ja/web/css/@media/-webkit-transition/index.md new file mode 100644 index 0000000000..bc95def281 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transition/index.md @@ -0,0 +1,67 @@ +--- +title: '-webkit-transition' +slug: Web/CSS/@media/-webkit-transition +tags: + - '@media' + - Blink + - CSS + - 非推奨 + - 標準外 + - リファレンス + - WebKit + - メディア特性 +browser-compat: css.at-rules.media.-webkit-transition +translation_of: Web/CSS/@media/-webkit-transition +--- +{{ CSSRef }} {{deprecated_header}} {{ Non-standard_header }} + +**`-webkit-transition`** は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、 [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、閲覧コンテキストが [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)に対応していれば値が `true` になります。 WebKit または Blink 以外を使用したブラウザーでは対応していません。 + +Apple には [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3)に説明があります。ここでは `transition` と呼ばれるようになりました。 + +> **Note:** このメディア特性は使用しないでください。これは仕様化されておらず、広く実装されておらず、すべてのブラウザーから削除されています。代わりに {{cssxref("@supports")}} 特性クエリーを使用してください。 + +## 構文 + +```css +@media (-webkit-transition) { + /* トランジションに対応している場合に使用される CSS */ +} +``` + +## 例 + +## 代わりに @supports を使用してください + +`-webkit-transition` メディア特性を使用しないでください。代わりに、次のように CSS の {{cssxref("@supports")}} [アットルール](/ja/docs/Web/CSS/At-rule)を用いてトランジションの対応を検査してください。 + +```css +@supports (transition: initial) { + /* トランジションに対応している場合に使われる CSS */ +} +``` + +### 廃止された例 + +廃止される以前、次のように `-webkit-transition` を使用することができました。 + +```css +@media (-webkit-transition) { + /* トランジションに対応している場合に使われる CSS */ +} +``` + +## 仕様書 + +どの標準でも定義されていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [CSS トランジションの使用](/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- {{cssxref("@supports")}} +- {{cssxref("transition")}} diff --git a/files/ja/web/css/@media/any-hover/index.html b/files/ja/web/css/@media/any-hover/index.html deleted file mode 100644 index 838de01c0b..0000000000 --- a/files/ja/web/css/@media/any-hover/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: any-hover -slug: Web/CSS/@media/any-hover -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/any-hover ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-hover</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、要素の上でホバーすることができる入力メカニズムが<em>何らか</em>利用できるかどうかをテストするために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>any-hover</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>差支えなくホバーができる入力メカニズムがないか、又はポインティング入力メカニズムがない。</dd> - <dt><code>hover</code></dt> - <dd>一つ以上の入力メカニズムが、要素の上で差支えなくホバーすることができる。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><a href="#">Try hovering over me!</a></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@media (any-hover: hover) { - a:hover { - background: yellow; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.any-hover")}}</p> - -<h2 id="See_Also" name="See_Also">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/@media/hover"><code>hover</code> メディア特性</a></li> -</ul> diff --git a/files/ja/web/css/@media/any-hover/index.md b/files/ja/web/css/@media/any-hover/index.md new file mode 100644 index 0000000000..eaa0a10d81 --- /dev/null +++ b/files/ja/web/css/@media/any-hover/index.md @@ -0,0 +1,60 @@ +--- +title: any-hover +slug: Web/CSS/@media/any-hover +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +browser-compat: css.at-rules.media.any-hover +translation_of: Web/CSS/@media/any-hover +--- +{{CSSRef}} + +**`any-hover`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、要素の上で停止することができる入力メカニズムが*何らか*利用できるかどうかを検査するために使用することができます。 + +## 構文 + +`any-hover` 特性は、以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : 差支えなく停止することができる入力メカニズムがないか、またはポインティング入力メカニズムがない。 +- `hover` + - : 一つ以上の入力メカニズムが、要素の上で差支えなく停止することができる。 + +## 例 + +### 入力手段が停止をすることができるかどうかを検査 + +#### HTML + +```html +<a href="#">Try hovering over me!</a> +``` + +#### CSS + +```css +@media (any-hover: hover) { + a:hover { + background: yellow; + } +} +``` + +#### 結果 + +{{EmbedLiveSample("Testing_whether_input_methods_can_hover")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`hover` メディア特性](/ja/docs/Web/CSS/@media/hover) diff --git a/files/ja/web/css/@media/any-pointer/index.md b/files/ja/web/css/@media/any-pointer/index.md index 3610b1d54c..7548208001 100644 --- a/files/ja/web/css/@media/any-pointer/index.md +++ b/files/ja/web/css/@media/any-pointer/index.md @@ -9,9 +9,9 @@ tags: - リファレンス translation_of: Web/CSS/@media/any-pointer --- -<div>{{cssref}}</div> +{{CSSRef}} -**`any-pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。 +**`any-pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。 > **Note:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに [`pointer`](/ja/docs/Web/CSS/@media/pointer) を使用してください。 @@ -28,7 +28,7 @@ translation_of: Web/CSS/@media/any-pointer > **Note:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。 -<h2 id="Examples">例</h2> +## 例 この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。 diff --git a/files/ja/web/css/@media/aspect-ratio/index.html b/files/ja/web/css/@media/aspect-ratio/index.html deleted file mode 100644 index b0cb3236f8..0000000000 --- a/files/ja/web/css/@media/aspect-ratio/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: aspect-ratio -slug: Web/CSS/@media/aspect-ratio -tags: - - '@media' - - CSS - - Reference - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/aspect-ratio ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>aspect-ratio</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("viewport", "ビューポート")}}のアスペクト比を調べるために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>aspect-ratio</code> 特性は、ビューポートの幅対高さのアスペクト比を表現する {{cssxref("<ratio>")}} 値で指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-aspect-ratio</code></strong> および <code><strong>max-aspect-ratio</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>以下の例は独自のビューポートを生成する {{htmlElement("iframe")}} に含まれています。 <code><iframe></code> の大きさを変更して <code>aspect-ratio</code> の変化を確認してください。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div id='inner'> - ビューポートの幅と高さを変更しながら、この要素を見ていてください。 -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* 最小アスペクト比 */ -@media (min-aspect-ratio: 8/5) { - div { - background: #9af; /* blue */ - } -} - -/* 最大アスペクト比 */ -@media (max-aspect-ratio: 3/2) { - div { - background: #9ff; /* cyan */ - } -} - -/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */ -@media (aspect-ratio: 1/1) { - div { - background: #f9a; /* red */ - } -} -</pre> - -<div class="hidden"> -<h2 id="_Example">_Example</h2> - -<p>used iframe and DataURL to enable this iframe could resize</p> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html"><label id="wf" for="w">width:165</label> -<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> -<label id="hf" for="w">height:165</label> -<input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> - -<iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>"> - -</iframe> -</pre> - -<h3 id="CSS_2">CSS</h3> - -<pre class="brush: css">iframe{ - display:block; -}</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">outer.style.width=outer.style.height="165px" - -w.onchange=w.oninput=function(){ - outer.style.width=w.value+"px" - wf.textContent="width:"+w.value -} -h.onchange=h.oninput=function(){ - outer.style.height=h.value+"px" - hf.textContent="height:"+h.value -}</pre> -</div> - -<h3 id="Result" name="Result">結果</h3> - -<div style="overflow: auto;"> -<p>{{ EmbedLiveSample('_Example', '300px', '400px') }}</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p> diff --git a/files/ja/web/css/@media/aspect-ratio/index.md b/files/ja/web/css/@media/aspect-ratio/index.md new file mode 100644 index 0000000000..db53a50b50 --- /dev/null +++ b/files/ja/web/css/@media/aspect-ratio/index.md @@ -0,0 +1,105 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.aspect-ratio +translation_of: Web/CSS/@media/aspect-ratio +--- +{{CSSRef}} + +**`aspect-ratio`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}}のアスペクト比を調べるために使用します。 + +## 構文 + +`aspect-ratio` 特性は、ビューポートの幅対高さのアスペクト比を表現する {{cssxref("<ratio>")}} 値で指定します。これは範囲の特性であり、接頭辞の付いた **`min-aspect-ratio`** および **`max-aspect-ratio`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +以下の例は独自のビューポートを生成する {{htmlElement("iframe")}} に含まれています。 `<iframe>` の大きさを変更して `aspect-ratio` の変化を確認してください。 + +なお、メディアクエリーの条件がどれも true でない場合、背景は白になります。これは、以下のルールが `<iframe>` 内の `<div>` に適用されないためです。どの幅と高さの値がこれを起こすのか、見つけてみてください。 + +### HTML + +```html +<div id='inner'> + ビューポートの幅と高さを変更しながら、この要素を見ていてください。 +</div> +``` + +### CSS + +```css +/* 最小アスペクト比 */ +@media (min-aspect-ratio: 8/5) { + div { + background: #9af; /* blue */ + } +} + +/* 最大アスペクト比 */ +@media (max-aspect-ratio: 3/2) { + div { + background: #9ff; /* cyan */ + } +} + +/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */ +@media (aspect-ratio: 1/1) { + div { + background: #f9a; /* red */ + } +} +``` + +### 結果 + +```html hidden +<label id="wf" for="w">width:165</label> +<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> +<label id="hf" for="w">height:165</label> +<input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> + +<iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>"> + +</iframe> +``` + +```css hidden +iframe{ + display:block; +} +``` + +```js hidden +outer.style.width=outer.style.height="165px" + +w.onchange=w.oninput=function(){ + outer.style.width=w.value+"px" + wf.textContent="width:"+w.value +} +h.onchange=h.oninput=function(){ + outer.style.height=h.value+"px" + hf.textContent="height:"+h.value +} +``` + +{{ EmbedLiveSample('Result', '300px', '350px') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/aural/index.html b/files/ja/web/css/@media/aural/index.html deleted file mode 100644 index df3fc07e2c..0000000000 --- a/files/ja/web/css/@media/aural/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: aural -slug: Web/CSS/@media/aural -tags: - - CSS - - リファレンス - - 非推奨 -translation_of: Web/CSS/@media/aural -original_slug: Web/CSS/aural ---- -<div>{{CSSRef}} {{deprecated_header}} {{obsolete_header("6.0")}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>aural</code> <a href="/ja/docs/CSS/@media#Media_types">メディア種別</a>は、音声出力の能力を持った機器に使用されます。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメディア種別は <code><a href="/ja/docs/Web/CSS/@media#speech">speech</a></code> に置き換えられ、非推奨になりました。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://www.w3.org/TR/CSS2/aural.html#q19.0">CSS Level 2</a></td> - <td>非推奨</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/@media">@media</a></li> -</ul> diff --git a/files/ja/web/css/@media/aural/index.md b/files/ja/web/css/@media/aural/index.md new file mode 100644 index 0000000000..1948d43f67 --- /dev/null +++ b/files/ja/web/css/@media/aural/index.md @@ -0,0 +1,53 @@ +--- +title: aural +slug: Web/CSS/@media/aural +tags: + - CSS + - 非推奨 + - リファレンス + - aural + - メディア特性 + - speech +translation_of: Web/CSS/@media/aural +original_slug: Web/CSS/aural +--- +{{CSSRef}} {{deprecated_header}} + +`aural` は [CSS](/ja/docs/Web/CSS) の[メディア種別](/ja/docs/Web/CSS/@media#メディア種別)で、音声出力の能力を持った機器に使用されます。 + +> **Note:** このメディア種別は [`speech`](/ja/docs/Web/CSS/@media#speech) に置き換えられ、非推奨になりました。 + +## 構文 + +CSS の `aural` メディア種別は — [`speech`](/ja/docs/Web/CSS/@media#speech) メディア種別に置き換えられて非推奨になりましたが — 音声合成装置を使ってコンテンツを表示する場合にのみ適用される CSS のブロックを指定するために使用されていました。 + +```css +@media aural { + /* ここで音声に関するスタイルを定義 */ +} +``` + +既存の CSS を `speech` メディアタイプを使用するように更新するのは、`aural` を `speech` に置き換えるだけの簡単な作業です。 + +## 例 + +### 基本的な例 + +```css +@media aural { + body { voice-family: Paul } +} +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------ | ---------- | ------------------- | +| {{SpecName('CSS2.2', '', 'aural')}} | 非推奨 | 初回定義 | + +## 関連情報 + +- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries) +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [`@media`](/ja/docs/Web/CSS/@media) +- [`speech`](/ja/docs/Web/CSS/@media#speech) diff --git a/files/ja/web/css/@media/color-gamut/index.html b/files/ja/web/css/@media/color-gamut/index.html deleted file mode 100644 index 5b415632ab..0000000000 --- a/files/ja/web/css/@media/color-gamut/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: color-gamut -slug: Web/CSS/@media/color-gamut -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/color-gamut ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>color-gamut</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("user agent", "ユーザーエージェント")}}及び出力機器が対応している色のおよその範囲を調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>color-gamut</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>srgb</code></dt> - <dd>出力機器が <a href="https://ja.wikipedia.org/wiki/SRGB">sRGB</a> 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。</dd> - <dt><code>p3</code></dt> - <dd>出力機器が <a href="https://en.wikipedia.org/wiki/DCI-P3">DCI P3 色空間</a>にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。</dd> - <dt><code>rec2020</code></dt> - <dd>出力機器がおよそ <a href="https://en.wikipedia.org/wiki/Rec._2020">ITU-R 勧告 BT.2020 色空間</a>にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>This is a test.</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@media (color-gamut: srgb) { - p { - background: #f4ae8a; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.color-gamut")}}</p> diff --git a/files/ja/web/css/@media/color-gamut/index.md b/files/ja/web/css/@media/color-gamut/index.md new file mode 100644 index 0000000000..95ad8017f4 --- /dev/null +++ b/files/ja/web/css/@media/color-gamut/index.md @@ -0,0 +1,61 @@ +--- +title: color-gamut +slug: Web/CSS/@media/color-gamut +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +browser-compat: css.at-rules.media.color-gamut +translation_of: Web/CSS/@media/color-gamut +--- +{{CSSRef}} + +**`color-gamut`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("user agent", "ユーザーエージェント")}}および出力機器が対応している色のおよその範囲を調べるために使用することができます。 + +## 構文 + +`color-gamut` 特性は以下の一覧のうち一つのキーワード値で指定します。 + +- `srgb` + - : 出力機器が [sRGB](https://ja.wikipedia.org/wiki/SRGB) 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。 +- `p3` + - : 出力機器が [DCI P3 色空間](https://en.wikipedia.org/wiki/DCI-P3)にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。 +- `rec2020` + - : 出力機器がおよそ [ITU-R 勧告 BT.2020 色空間](https://en.wikipedia.org/wiki/Rec._2020)にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。 + +## 例 + +### HTML + +```html +<p>This is a test.</p> +``` + +### CSS + +```css +@media (color-gamut: srgb) { + p { + background: #f4ae8a; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/color-index/index.html b/files/ja/web/css/@media/color-index/index.html deleted file mode 100644 index d60fa9063b..0000000000 --- a/files/ja/web/css/@media/color-index/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: color-index -slug: Web/CSS/@media/color-index -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/color-index ---- -<div>{{cssref}}</div> - -<p><strong><code>color-index</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、出力端末の色参照テーブルの項目数を調べるために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p> <code>color-index</code> 特性は {{cssxref("<integer>")}} 値で指定し、出力端末の色参照テーブルの項目数を表します。 (端末がそのようなテーブルを使用していなければ、値はゼロになります)。これは範囲を持つ特性であり、つまり接頭辞の付いた <strong><code>min-color-index</code></strong> および <code><strong>max-color-index</strong></code> という変化形を使用して、それぞれ最小値と最大値を問い合わせることができます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p>これはテストです。</p> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">p { - color: black; -} - -@media (color-index) { - p { - color: red; - } -} - -@media (min-color-index: 15000) { - p { - color: #1475ef; - } -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Basic_example")}}</p> - -<h3 id="Custom_stylesheet" name="Custom_stylesheet">独自スタイルシート</h3> - -<p>この HTML は、256色以上を持つ端末に専用のスタイルシートを適用します。</p> - -<pre class="brush: html notranslate"><code><link rel="stylesheet" href="http://foo.bar.com/base.css" /> -<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /></code></pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>値に負の数も取れるようになり、これは偽と計算されるようになった。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。値に負の数は指定不可。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.color-index")}}</p> diff --git a/files/ja/web/css/@media/color-index/index.md b/files/ja/web/css/@media/color-index/index.md new file mode 100644 index 0000000000..3f321d9bc7 --- /dev/null +++ b/files/ja/web/css/@media/color-index/index.md @@ -0,0 +1,75 @@ +--- +title: color-index +slug: Web/CSS/@media/color-index +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +browser-compat: css.at-rules.media.color-index +translation_of: Web/CSS/@media/color-index +--- +{{CSSRef}} + +**`color-index`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、出力端末の色参照テーブルの項目数を調べるために使用します。 + +## 構文 + + `color-index` 特性は {{cssxref("<integer>")}} 値で指定し、出力端末の色参照テーブルの項目数を表します。 (端末がそのようなテーブルを使用していなければ、値はゼロになります)。これは範囲を持つ特性であり、つまり接頭辞の付いた **`min-color-index`** および **`max-color-index`** という変化形を使用して、それぞれ最小値と最大値を問い合わせることができます。 + +## 例 + +### 基本的な例 + +#### HTML + +```html +<p>これはテストです。</p> +``` + +#### CSS + +```css +p { + color: black; +} + +@media (color-index) { + p { + color: red; + } +} + +@media (min-color-index: 15000) { + p { + color: #1475ef; + } +} +``` + +#### 結果 + +{{EmbedLiveSample("Basic_example")}} + +### 独自スタイルシート + +この HTML は、256色以上を持つ端末に専用のスタイルシートを適用します。 + +```html +<link rel="stylesheet" href="http://foo.bar.com/base.css" /> +<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/color/index.html b/files/ja/web/css/@media/color/index.html deleted file mode 100644 index 2469293939..0000000000 --- a/files/ja/web/css/@media/color/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: color -slug: Web/CSS/@media/color -tags: - - '@media' - - CSS - - Reference - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/color ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>color</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を調べるために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>color</code> 特性は {{cssxref("<integer>")}} 値で指定し、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を表します。機器がカラー機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-color</code></strong> 及び <code><strong>max-color</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<div class="note"> -<p><strong>メモ:</strong> それぞれの色成分が異なるビット数で表現される場合は、最も小さい値が使用されます。例えば、ディスプレイが青と赤に5ビット、緑に6ビット使用する場合は、機器は色成分当たり5ビットを使用していると見なされます。機器がインデックス色を使用している場合は、色テーブル内の色成分当たりのビット数の最小値が使用されます。</p> -</div> - -<p>CSS を使用して HTML に色を適用することについて、詳しくは <a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a>をご覧ください。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>このテキストは白黒機器では黒で、色数が少ない機器では赤で、色数が多い機器では緑っぽく表示されます。</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { - color: black; -} - -/* Any color device */ -@media (color) { - p { - color: red; - } -} - -/* 色成分当たり8ビット以上の色を持つ機器 */ -@media (min-color: 8) { - p { - color: #24ba13; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#color', 'color')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>The value can now be negative, in which case it computes to false.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>Initial definition. The value must be nonnegative.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> - <li>The CSS {{cssxref("color")}} property</li> - <li>The CSS {{cssxref("<color>")}} data unit</li> -</ul> diff --git a/files/ja/web/css/@media/color/index.md b/files/ja/web/css/@media/color/index.md new file mode 100644 index 0000000000..3bf124bfef --- /dev/null +++ b/files/ja/web/css/@media/color/index.md @@ -0,0 +1,71 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - '@media' + - CSS + - リファレンス + - メディアクエリー + - メディア特性 +browser-compat: css.at-rules.media.color +translation_of: Web/CSS/@media/color +--- +{{CSSRef}} + +**`color`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を調べるために使用します。 + +## 構文 + +`color` 特性は {{cssxref("<integer>")}} 値で指定し、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を表します。機器がカラー機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた **`min-color`** および **`max-color`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +> **Note:** それぞれの色成分が異なるビット数で表現される場合は、最も小さい値が使用されます。例えば、ディスプレイが青と赤に 5 ビット、緑に 6 ビット使用する場合は、機器は色成分当たり 5 ビットを使用していると見なされます。機器がインデックス色を使用している場合は、色テーブル内の色成分当たりのビット数の最小値が使用されます。 + +CSS を使用して HTML に色を適用することについて、詳しくは [CSS を使用した HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color)をご覧ください。 + +## 例 + +### HTML + +```html +<p>このテキストは白黒機器では黒で、色数が少ない機器では赤で、色数が多い機器では緑っぽく表示されます。</p> +``` + +### CSS + +```css +p { + color: black; +} + +/* すべてのカラー機器 */ +@media (color) { + p { + color: red; + } +} + +/* 色成分当たり 8 ビット以上の色を持つ機器 */ +@media (min-color: 8) { + p { + color: #24ba13; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) +- CSS {{cssxref("color")}} プロパティ +- CSS {{cssxref("<color>")}} データ型 diff --git a/files/ja/web/css/@media/device-aspect-ratio/index.html b/files/ja/web/css/@media/device-aspect-ratio/index.html deleted file mode 100644 index 3b4fd5ef1e..0000000000 --- a/files/ja/web/css/@media/device-aspect-ratio/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: device-aspect-ratio -slug: Web/CSS/@media/device-aspect-ratio -tags: - - '@media' - - CSS - - ウェブ - - メディアクエリ - - メディア特性 - - リファレンス - - 非推奨 -translation_of: Web/CSS/@media/device-aspect-ratio ---- -<div>{{cssref}} {{deprecated_header}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>device-aspect-ratio</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の幅対高さのアスペクト比を調べるために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>device-aspect-ratio</code> 特性は、 {{cssxref("<ratio>")}} で指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-device-aspect-ratio</code></strong> 及び <code><strong>max-device-aspect-ratio</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">article { - padding: 1rem; -} - -@media screen and (min-device-aspect-ratio: 16/9) { - article { - padding: 1rem 5vw; - } -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>メディアクエリレベル４で非推奨になりました。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p> diff --git a/files/ja/web/css/@media/device-aspect-ratio/index.md b/files/ja/web/css/@media/device-aspect-ratio/index.md new file mode 100644 index 0000000000..a55f126cda --- /dev/null +++ b/files/ja/web/css/@media/device-aspect-ratio/index.md @@ -0,0 +1,45 @@ +--- +title: device-aspect-ratio +slug: Web/CSS/@media/device-aspect-ratio +tags: + - '@media' + - CSS + - 非推奨 + - メディアクエリー + - リファレンス + - ウェブ + - メディア特性 +browser-compat: css.at-rules.media.device-aspect-ratio +translation_of: Web/CSS/@media/device-aspect-ratio +--- +{{CSSRef}} {{deprecated_header}} + +[CSS](/ja/docs/Web/CSS) の **`device-aspect-ratio`** [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、出力機器の幅対高さのアスペクト比を調べるために使用します。 + +## 構文 + +`device-aspect-ratio` 特性は、 {{cssxref("<ratio>")}} で指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-aspect-ratio`** および `**max-device-aspect-ratio**` の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +### min-device-aspect-ratio の使用 + +```css +article { + padding: 1rem; +} + +@media screen and (min-device-aspect-ratio: 16/9) { + article { + padding: 1rem 5vw; + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/@media/device-height/index.html b/files/ja/web/css/@media/device-height/index.html deleted file mode 100644 index c8d5a84353..0000000000 --- a/files/ja/web/css/@media/device-height/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: device-height -slug: Web/CSS/@media/device-height -tags: - - '@media' - - CSS - - Deprecated - - Reference - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/device-height ---- -<div>{{cssref}} {{deprecated_header}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>device-height</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の描画面の高さを調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>device-height</code> 特性は、 {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-device-height</code></strong> 及び <code><strong>max-device-height</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>この HTML は、800ピクセルより短い機器に特別のスタイルシートを適用します。</p> - -<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /></pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>メディアクエリレベル４で非推奨になりました。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.device-height")}}</p> diff --git a/files/ja/web/css/@media/device-height/index.md b/files/ja/web/css/@media/device-height/index.md new file mode 100644 index 0000000000..ea585127b3 --- /dev/null +++ b/files/ja/web/css/@media/device-height/index.md @@ -0,0 +1,41 @@ +--- +title: device-height +slug: Web/CSS/@media/device-height +tags: + - '@media' + - CSS + - 非推奨 + - リファレンス + - メディアクエリー + - メディア特性 +browser-compat: css.at-rules.media.device-height +translation_of: Web/CSS/@media/device-height +--- +{{CSSRef}} {{deprecated_header}} + +[CSS](/ja/docs/Web/CSS) の **`device-height`** [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、出力機器の描画面の高さを調べるために使用することができます。 + +## 構文 + +`device-height` 特性は、 {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-height`** および **`max-device-height`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +この HTML は、800 ピクセルより低い機器に特別のスタイルシートを適用します。 + +```html +<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/device-width/index.html b/files/ja/web/css/@media/device-width/index.html deleted file mode 100644 index 8551bac165..0000000000 --- a/files/ja/web/css/@media/device-width/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: device-width -slug: Web/CSS/@media/device-width -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス - - 非推奨 -translation_of: Web/CSS/@media/device-width ---- -<div>{{cssref}} {{deprecated_header}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>device-width</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の描画面の幅を調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>device-width</code> 特性は、 {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-device-width</code></strong> 及び <code><strong>max-device-width</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>この HTML は、800ピクセルより狭い機器に特別のスタイルシートを適用します。</p> - -<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /></pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>メディアクエリレベル４で非推奨になりました。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.device-width")}}</p> diff --git a/files/ja/web/css/@media/device-width/index.md b/files/ja/web/css/@media/device-width/index.md new file mode 100644 index 0000000000..bb30c9a632 --- /dev/null +++ b/files/ja/web/css/@media/device-width/index.md @@ -0,0 +1,41 @@ +--- +title: device-width +slug: Web/CSS/@media/device-width +tags: + - '@media' + - CSS + - 非推奨 + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.device-width +translation_of: Web/CSS/@media/device-width +--- +{{CSSRef}} {{deprecated_header}} + +[CSS](/ja/docs/Web/CSS) の **`device-width`** [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、出力機器の描画面の幅を調べるために使用することができます。 + +## 構文 + +`device-width` 特性は、 {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-width`** および **`max-device-width`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +この HTML は、800 ピクセルより狭い機器に特別のスタイルシートを適用します。 + +```html +<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/display-mode/index.html b/files/ja/web/css/@media/display-mode/index.html deleted file mode 100644 index 17ac51e0f0..0000000000 --- a/files/ja/web/css/@media/display-mode/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: display-mode -slug: Web/CSS/@media/display-mode -tags: - - '@media' - - CSS - - display - - display-mode - - ウェブアプリマニフェスト - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/display-mode ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>display-mode</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。</p> - -<p>この特性は、ウェブアプリマニフェストの <a href="/ja/docs/Web/Manifest#display"><code>display</code></a> メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリは、ウェブアプリマニフェストの有無にかかわらず適用されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>display-mode</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">表示モード</th> - <th scope="col">説明</th> - <th scope="col">表示モードのフォールバック</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>fullscreen</code></td> - <td>利用可能な表示領域がすべて使用され、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されません。</td> - <td><code>standalone</code></td> - </tr> - <tr> - <td><code>standalone</code></td> - <td>アプリケーションはスタンドアロンアプリケーションのような外観や操作感になります。これは、アプリケーションが個別のウィンドウを持ったり、アプリケーションランチャーに独自のアイコンを持ったりすることを含みます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーなどその他の UI を含めることができます。</td> - <td><code>minimal-ui</code></td> - </tr> - <tr> - <td><code>minimal-ui</code></td> - <td>アプリケーションはスタンドアロンアプリケーションのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザーによって異なります。</td> - <td><code>browser</code></td> - </tr> - <tr> - <td><code>browser</code></td> - <td>アプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。</td> - <td>(なし)</td> - </tr> - </tbody> -</table> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@media all and (display-mode: fullscreen) { - body { - margin: 0; - border: 5px solid black; - } -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td> - <td>{{Spec2('Manifest')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.display-mode")}}</p> diff --git a/files/ja/web/css/@media/display-mode/index.md b/files/ja/web/css/@media/display-mode/index.md new file mode 100644 index 0000000000..b7ba5d57f7 --- /dev/null +++ b/files/ja/web/css/@media/display-mode/index.md @@ -0,0 +1,57 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - display + - display-mode + - メディア特性 + - ウェブアプリマニフェスト +browser-compat: css.at-rules.media.display-mode +translation_of: Web/CSS/@media/display-mode +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`display-mode`** [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。 + +この特性は、ウェブアプリマニフェストの [`display`](/ja/docs/Web/Manifest#display) メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリーは、ウェブアプリマニフェストの有無にかかわらず適用されます。 + +## 構文 + +`display-mode` 特性は、以下の一覧のうち一つのキーワード値で指定します。 + +| 表示モード | 説明 | 代替表示モード | +| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | +| `fullscreen` | 利用可能な表示領域がすべて使用され、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されません。 | `standalone` | +| `standalone` | アプリケーションはスタンドアロンアプリケーションのような外観や操作感になります。これは、アプリケーションが個別のウィンドウを持ったり、アプリケーションランチャーに独自のアイコンを持ったりすることを含みます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーなどその他の UI を含めることができます。 | `minimal-ui` | +| `minimal-ui` | アプリケーションはスタンドアロンアプリケーションのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザーによって異なります。 | `browser` | +| `browser` | アプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。 | (なし) | + +## 例 + +### 端末が全画面モード時に使用される CSS + +```css +@media all and (display-mode: fullscreen) { + body { + margin: 0; + border: 5px solid black; + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/forced-colors/index.md b/files/ja/web/css/@media/forced-colors/index.md new file mode 100644 index 0000000000..b66b0b6ccc --- /dev/null +++ b/files/ja/web/css/@media/forced-colors/index.md @@ -0,0 +1,125 @@ +--- +title: forced-colors +slug: Web/CSS/@media/forced-colors +tags: + - CSS + - リファレンス + - 色 + - forced-colors + - メディア特性 +browser-compat: css.at-rules.media.forced-colors +translation_of: Web/CSS/@media/forced-colors +--- +{{CSSRef}} + +**`forced-colors`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、{{Glossary("user agent", "ユーザーエージェント")}}が強制カラーモードを有効にしているかどうかを検出するために使用されます。強制カラーモードの例としては、 Windows のハイコントラストモードがあります。 + +## 構文 + +`forced-colors` メディア特性は、ブラウザーが現在強制カラーモードになっているかどうかを示します。 + +### Values + +- `none` + - : 強制カラーモードは有効ではありません。ページの色が限られたパレットに強制されていません。 +- `active` + - : 強制カラーモードが有効であることを示します。ブラウザーは、[CSS システム色](/ja/docs/Web/CSS/color_value#system_colors)キーワードを通じてカラーパレットを提供し、必要に応じて [`prefers-color-scheme`](/ja/docs/Web/CSS/@media/prefers-color-scheme) の適切な値をトリガーして、ページを適応できるようにします。ブラウザーは `prefers-color-scheme` の値を `Canvas` のシステム色の明度に基づいて選択します (詳細は [color adjust spec](https://www.w3.org/TR/css-color-adjust-1/#forced) を参照してください)。 + +## 使用上の注意 + +### 強制カラーモードの影響を受けるプロパティ + +強制カラーモードでは、以下のプロパティの値は、作者レベルの値が指定されていないかのように扱われます。つまり、ブラウザーで指定された値が代わりに使用されます。ブラウザー指定の値は、スタイルのカスケードには影響せず、描画時にブラウザーによって強制的に設定されます。 + +ブラウザーで指定された値は、システム色のセットから選択されます。これにより、強制カラーを有効にしているユーザーに対して、共通の UI 要素の一貫したコントラストが保証されます。 + +- {{cssxref("color")}} +- {{cssxref("background-color")}} +- {{cssxref("text-decoration-color")}} +- {{cssxref("text-emphasis-color")}} +- {{cssxref("border-color")}} +- {{cssxref("outline-color")}} +- {{cssxref("column-rule-color")}} +- {{cssxref("-webkit-tap-highlight-color")}} +- [SVG fill 属性](/ja/docs/Web/SVG/Attribute/fill) +- [SVG stroke 属性](/ja/docs/Web/SVG/Attribute/stroke) + +また、以下のプロパティは、強制カラーモードでは特別な動作をします。 + +- {{cssxref("box-shadow")}} は 'none' に強制されます +- {{cssxref("text-shadow")}} は 'none' に強制されます +- {{cssxref("background-image")}} は URL ベースでない値では 'none' に強制されます +- {{cssxref("color-scheme")}} は 'light dark' に強制されます +- {{cssxref("scrollbar-color")}} は 'auto' に強制されます + +The system colors that are forced for the above properties depend on the context of the element. For example the {{cssxref("color")}} property on button element will be forced to `ButtonText`. On normal text it will be forced to `CanvasText`. See the [list of system colors](/ja/docs/Web/CSS/color_value#system_colors) for additional details of when each might be appropriate in various UI contexts. + +> **Note:** ユーザーエージェントは、追加された ARIA ロールではなく、本来の要素の意味に基づいてシステム色を選択します。 +> 例えば、`div` に `role="button"` を追加しても、要素の色が `ButtonText` に強制されることは**ありません**。 + +これらの調整に加えて、ブラウザーはテキストの後ろに「バックプレート」を描くことで、テキストの読みやすさを確保します。これは、テキストが画像の上に配置されている場合にコントラストを保つために特に重要です。 + +ユーザーエージェントが上記のプロパティの値を強制的に変更しないケースが 2 つあります。{{cssxref("forced-color-adjust")}} 値が `none` の要素に適用されている場合と、作者がシステム色を指定している場合です。 + +要素で forced-color-adjust が `none` に設定されている場合は、強制カラーの値は適用されず、作者の指定したスタイルが通常どおり適用されます。また、テキストのバックプレートは無効になります。 + +システム色が指定された場合は、強制的に設定された値の代わりにシステム色が使用されます。 + +また、強制カラーモードで利用できる制限されたカラーパレットとページの他の部分が統合されるように、上記以外のプロパティでシステム色を使用することもできます。 + +### アクセシビリティの考慮 + +一般的に、ウェブ制作者は `forced-colors` メディア特性を使用して、この機能が有効になっているユーザー向けに個別のデザインを作成することは**すべきではありません**。この機能は、既定の強制カラーの適用ではページの一部がうまく機能しない場合に、使いやすさや読みやすさを向上させるための細かい調整を行うことを目的としています。 + +強制カラーモードの縮小されたパレットとテキストバックプレートによる高いコントラストは、一部のユーザーがウェブサイトを読んだり利用したりするのに不可欠な場合が多いため、コンテンツに影響を与える調整は慎重に行い、他の方法では読み取れないコンテンツを対象とする必要があります。 + +### ユーザー設定 + +このメディア特性は、ユーザーがオペレーティングシステムで配色設定を有効にしている場合にのみ有効です。このような機能の例として、 Windows のハイコントラストモードがあります。 + +## 例 + +> **Note:** 以下の例は、このメディア特性に対応したブラウザーを使用し、 OS のハイコントラストモードなどの環境設定を有効にしている場合にのみ動作します。 + +この例は、通常 {{cssxref("box-shadow")}} によってコントラストを得るボタンです。強制カラーモードでは、 box-shadow は強制的に none になります。そのため、この例では強制カラーメディア機能を使用して、適切な色（この場合は ButtonText）の境界線を確保しています。 + +### HTML + +```html +<button class="button">Press me!</button> +``` + +### CSS + +```css +.button { + border: 0; + padding: 10px; + box-shadow: -2px -2px 5px gray, 2px 2px 5px gray; +} + +@media (forced-colors: active) { + .button { + /* 強制カラーモードでは box-shadow が 'none' に強制されるため、代わりに border を使用します。 */ + border: 2px ButtonText solid; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [@media](/ja/docs/Web/CSS/@media) +- [Styling for Windows high contrast with standards for forced colors.](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) +- {{cssxref("forced-color-adjust")}} diff --git a/files/ja/web/css/@media/grid/index.html b/files/ja/web/css/@media/grid/index.html deleted file mode 100644 index 399586b5dd..0000000000 --- a/files/ja/web/css/@media/grid/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: grid -slug: Web/CSS/@media/grid -tags: - - '@media' - - CSS - - grid - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/grid ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>grid</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。</p> - -<p>現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>grid</code> 特性は {{cssxref("<mq-boolean>")}} 値 (<code>0</code> 又は <code>1</code>) として指定し、出力機器がグリッドベースであるかどうかを表します。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p class="unknown">I don't know if you're using a grid device. :-(</p> -<p class="bitmap">You are using a bitmap device.</p> -<p class="grid">You are using a grid device! Neato!</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">:not(.unknown) { - color: lightgray; -} - -@media (grid: 0) { - .unknown { - color: lightgray; - } - - .bitmap { - color: red; - text-transform: uppercase; - } -} - -@media (grid: 1) { - .unknown { - color: lightgray; - } - - .grid { - color: black; - text-transform: uppercase; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#grid', 'grid')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.grid")}}</p> diff --git a/files/ja/web/css/@media/grid/index.md b/files/ja/web/css/@media/grid/index.md new file mode 100644 index 0000000000..5db1a27c36 --- /dev/null +++ b/files/ja/web/css/@media/grid/index.md @@ -0,0 +1,78 @@ +--- +title: grid +slug: Web/CSS/@media/grid +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.grid +translation_of: Web/CSS/@media/grid +--- +{{CSSRef}} + +**`grid`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。 + +現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。 + +## 構文 + +`grid` 特性は {{cssxref("<mq-boolean>")}} 値 (`0` または `1`) として指定し、出力機器がグリッドベースであるかどうかを表します。 + +## 例 + +### HTML + +```html +<p class="unknown">I don't know if you're using a grid device. :-(</p> +<p class="bitmap">You are using a bitmap device.</p> +<p class="grid">You are using a grid device! Neato!</p> +``` + +### CSS + +```css +:not(.unknown) { + color: lightgray; +} + +@media (grid: 0) { + .unknown { + color: lightgray; + } + + .bitmap { + color: red; + text-transform: uppercase; + } +} + +@media (grid: 1) { + .unknown { + color: lightgray; + } + + .grid { + color: black; + text-transform: uppercase; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/height/index.html b/files/ja/web/css/@media/height/index.html deleted file mode 100644 index 7605e490d4..0000000000 --- a/files/ja/web/css/@media/height/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: height -slug: Web/CSS/@media/height -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/height ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>height</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("viewport", "ビューポート")}}の高さ (又は<a href="/ja/docs/Web/CSS/Paged_media">ページ付きメディア</a>のページボックスの高さ) に基づいてスタイルを適用するために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>height</code> 特性は、ビューポートの高さを表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-height</code></strong> 及び <code><strong>max-height</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>ビューポートの高さを変更しながら、この要素を見ていてください。</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* 正確な高さ */ -@media (height: 360px) { - div { - color: red; - } -} - -/* 最小高 */ -@media (min-height: 25rem) { - div { - background: yellow; - } -} - -/* 最大高 */ -@media (max-height: 40rem) { - div { - border: 2px solid blue; - } -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Example','90%')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>値に負の数を取ることができるようになり、この場合は false と計算されます。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。値は非負でなければなりませんでした。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.height")}}</p> diff --git a/files/ja/web/css/@media/height/index.md b/files/ja/web/css/@media/height/index.md new file mode 100644 index 0000000000..6b02ebc6d6 --- /dev/null +++ b/files/ja/web/css/@media/height/index.md @@ -0,0 +1,69 @@ +--- +title: height +slug: Web/CSS/@media/height +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.height +translation_of: Web/CSS/@media/height +--- +{{CSSRef}} + +**`height`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}}の高さ (または[ページ付きメディア](/ja/docs/Web/CSS/Paged_Media)のページボックスの高さ) に基づいてスタイルを適用するために使用することができます。 + +## 構文 + +`height` 特性は、ビューポートの高さを表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-height`** および **`max-height`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +### HTML + +```html +<div>ビューポートの高さを変更しながら、この要素を見ていてください。</div> +``` + +### CSS + +```css +/* 正確な高さ */ +@media (height: 360px) { + div { + color: red; + } +} + +/* 最小高 */ +@media (min-height: 25rem) { + div { + background: yellow; + } +} + +/* 最大高 */ +@media (max-height: 40rem) { + div { + border: 2px solid blue; + } +} +``` + +### 結果 + +{{EmbedLiveSample('Examples','90%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/hover/index.html b/files/ja/web/css/@media/hover/index.html deleted file mode 100644 index 4fe5019a01..0000000000 --- a/files/ja/web/css/@media/hover/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: hover -slug: Web/CSS/@media/hover -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/hover ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>hover</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、<em>第一の</em>入力機構が要素の上でホバーすることができるかどうかをテストするために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>hover</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>第一の入力機構が全くホバーができないか、差支えなくホバーをすることができない (例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的にホバーを実現する)、又は第一の入力機構がない。</dd> - <dt><code>hover</code></dt> - <dd>第一の入力機構が、要素の上で差支えなくホバーすることができる。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><a href="#">Try hovering over me!</a></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@media (hover: hover) { - a:hover { - background: yellow; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.hover")}}</p> diff --git a/files/ja/web/css/@media/hover/index.md b/files/ja/web/css/@media/hover/index.md new file mode 100644 index 0000000000..8b5ccc5a5c --- /dev/null +++ b/files/ja/web/css/@media/hover/index.md @@ -0,0 +1,59 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.hover +translation_of: Web/CSS/@media/hover +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`hover`** [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、*第一の*入力機構が要素の上でホバー (停止) することができるかどうかを検査するために使用することができます。 + +## 構文 + +`hover` 特性は、以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : 第一の入力機構が全くホバーができないか、差支えなくホバーをすることができない (例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的に停止を実現する)、または第一の入力機構がない。 +- `hover` + - : 第一の入力機構が、要素の上で差支えなくホバーすることができる。 + +## 例 + +### HTML + +```html +<a href="#">Try hovering over me!</a> +``` + +### CSS + +```css +@media (hover: hover) { + a:hover { + background: yellow; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html index b335cc8467..3cff0a4e22 100644 --- a/files/ja/web/css/@media/index.html +++ b/files/ja/web/css/@media/index.html @@ -2,33 +2,33 @@ title: '@media' slug: Web/CSS/@media tags: - - '@-規則' - '@media' + - アット規則 - CSS - - Reference - 条件付き + - リファレンス +browser-compat: css.at-rules.media translation_of: Web/CSS/@media --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@media</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、一つまたは複数の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>の結果に基づいて、スタイルシートの一部を適用するために使用することができます。</span>これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。</p> +**`@media`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、1 つまたは複数の[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。 -<div class="note"> -<p><strong>メモ:</strong> JavaScript では、 <code>@media</code> を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。</p> -</div> +> **Note:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p> +`@media` アットルールは、コードの最上位に配置したり、他の[条件付きグループアットルール](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中に入れ子にして配置したりすることができます。 -<pre class="brush: css no-line-numbers">/* コードの最上位 */ +```css +/* コードの最上位 */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } -/* 他の条件付き＠規則の中にネスト */ +/* 他の条件付きアットルールの中にネスト */ @supports (display: flex) { @media screen and (min-width: 900px) { article { @@ -36,21 +36,157 @@ translation_of: Web/CSS/@media } } } -</pre> - -<p>メディアクエリの文法について詳しくは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">メディアクエリの利用</a>を参照してください。</p> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +メディアクエリーの構文について詳しくは、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#構文)を参照してください。 + +## 解説 + +### メディア種別 + +*メディア種別*は機器の全般的な分類を記述します。 +`not` または `only` 論理演算子を使用する場合を除き、メディア種別は省略可能であり、暗黙で `all` と見なされます。 + +- `all` + - : すべての機器に適合します。 +- `print` + - : ページのある資料や、画面に印刷プレビューモードで表示されている文書向けのものです。（これらの形式に特有の整形上の問題については、[ページ付きメディア](/ja/docs/Web/CSS/Paged_Media)を参照してください。） +- `screen` + - : 主に画面向けのものです。 +- `speech` + - : 音声合成向けのものです。 + +> **Note:** CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。 +> `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")}} {{deprecated_inline}} + - : 出力機器の幅対高さのアスペクト比。 + Media Queries Level 4 で非推奨。 +- {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} + - : 出力機器のレンダリング面の高さ。 + Media Queries Level 4 で非推奨。 +- {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} + - : 出力機器のレンダリング面の幅。 Media Queries Level 4 で非推奨。 +- {{cssxref("@media/display-mode", "display-mode")}} + - : ウェブアプリのマニフェストの [`display`](/ja/docs/Web/Manifest#display) メンバーで指定されているアプリケーションの表示モード。 + [Web App Manifest 仕様書](https://w3c.github.io/manifest/#the-display-mode-media-feature)で定義。 +- {{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/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/resolution", "resolution")}} + - : 出力機器のピクセル密度。 +- {{cssxref("@media/scripting", "scripting")}} + - : 出力機器のスキャン処理方式。 + Media Queries Level 5. で追加。 +- {{cssxref("@media/update-frequency", "update")}} + - : どれだけの頻度で出力機器がコンテンツの表示を変更できるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/width", "width")}} + - : スクロールバーの幅を含むビューポートの幅。 + + +### 論理演算子 + +*論理演算子* `not`, `and`, `only` を使うと、複雑なメディアクエリーを構成することができます。 +また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。 + +- `and` + - : 複数のメディア特性を 1 つのメディアクエリーに結合する際に使用されます。クエリーが `true` になるためには、結合させた各機能が `true` を返すことが必要です。 + また、メディア特性とメディア種別を結合する際にも使用されます。 +- `not` + - : メディアクエリーを反転するために使用され、クエリーが `false` を返す場合に `true` を返します。 + カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。 + `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 + + > **Note:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。 +- `only` + - : クエリー全体が一致する場合にのみスタイルを適用します。 + これは、古いブラウザーが選択したスタイルを適用できないようにするのに便利です。 + `only` を使用しない場合、古いブラウザーは `screen and (max-width: 500px)` というクエリーを `screen` と解釈し、クエリーの残りの部分を無視して、すべての画面にそのスタイルを適用してしまいます。 + `only` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 +- `,` (カンマ) + - : カンマは、複数のメディアクエリーを 1 つのルールにまとめるために使用されます。 + カンマで区切られたリストの各クエリーは、他のクエリーとは別に扱われます。 + したがって、リスト内のクエリーのいずれかが `true` であれば、メディア文全体が `true` を返すことになります。 + 言い換えれば、リストは論理的な `or` 演算子のように動作します． + + +## アクセシビリティの考慮 + +サイトの文字の大きさを調整している人に合わせられるようには、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)で {{cssxref("<length>")}} が必要な時には [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) を使用してください。 + +[`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) および [`px`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はどちらも有効な単位ですが、 [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。 + +また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリーを使用することを検討してください。例えば、 `prefers-reduced-motion` は[ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します](/ja/docs/Web/CSS/@media/prefers-reduced-motion)。 + +## セキュリティ + +メディアクエリーはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。 + +この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリーは実際の端末の状態を表す値ではなく既定値を報告します。 + +## 形式文法 {{csssyntax}} -<h2 id="Media_features" name="Media_features">メディア特性</h2> - -<p>{{page("/ja/docs/Web/CSS/Media_Queries/Using_media_queries","Media features")}}</p> +## 例 -<h2 id="Examples" name="Examples">例</h2> +### print および screen メディア種別の検査 -<pre class="brush: css">@media print { +```css +@media print { body { font-size: 10pt; } } @@ -68,88 +204,33 @@ translation_of: Web/CSS/@media and (resolution: 150dpi) { body { line-height: 1.4; } } -</pre> +``` -<p>Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。</p> +Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリーを記述できる新しい範囲の構文が導入されました。 -<pre class="brush: css">@media (height > 600px) { +```css +@media (height > 600px) { body { line-height: 1.4; } } -@media (400px <= width <= 700px) { +@media (400px <= width <= 700px) { body { line-height: 1.4; } } -</pre> - -<p>他の例については、<a class="internal" href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a>をご覧ください。</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>サイトの文字の大きさを調整する人のために、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>で {{cssxref("<length>")}} が必要な時には <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> を使用してください。</p> - -<p><code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> および <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">px</a></code> はどちらも有効な単位ですが、 <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。</p> - -<p>また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 <code>prefers-reduced-motion</code> は<a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します</a>。</p> - -<h2 id="Security" name="Security">セキュリティ</h2> - -<p>メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。</p> - -<p>この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">備考</th> - <th scope="col">フィードバック</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td> - <td>Level 4 で除外された <code>light-level</code>, <code>inverted-colors</code> およびカスタムメディアクエリを復帰。<br> - <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, <code>prefers-color-scheme</code> の各メディア特性を追加。</td> - <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td><code>@media</code> 規則の基本的な構文を定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> - <td> - <p>メディア特性 <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, <code>overflow-inline</code> を追加。<br> - <code>screen</code>, <code>print</code>, <code>speech</code>, <code>all</code> を除くすべてのメディアタイプを非推奨に指定。<br> - 構文をもっと柔軟にし、他の事の間に <code>or</code> キーワードを追加。</p> - </td> - <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> - <td></td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> - <td>初回定義</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="internal" href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></li> - <li>JavaScript では <code>@media</code> は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。</li> - <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 拡張メディア特性</a></li> - <li><a href="/ja/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 拡張メディア特性</a></li> -</ul> +``` + +他の例については、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- JavaScript では `@media` は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。 +- [Mozilla 拡張メディア特性](/ja/docs/Web/CSS/Mozilla_Extensions#media_features) +- [WebKit 拡張メディア特性](/ja/docs/Web/CSS/WebKit_Extensions#media_features) diff --git a/files/ja/web/css/@media/inverted-colors/index.html b/files/ja/web/css/@media/inverted-colors/index.html deleted file mode 100644 index 75dbefa773..0000000000 --- a/files/ja/web/css/@media/inverted-colors/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: inverted-colors -slug: Web/CSS/@media/inverted-colors -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/inverted-colors ---- -<div>{{cssref}}</div> - -<p><strong><code>inverted-colors</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、{{glossary("user agent", "ユーザーエージェント")}}またはその下の OS が色を反転しているかどうかを調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>inverted-colors</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>色が通常通り表示されます。</dd> - <dt><code>inverted</code></dt> - <dd>表示領域内のすべてのピクセルが反転されています。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.</p> -<p>If the text is gray, your browser doesn't support the `inverted-colors` media feature.</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">p { - color: gray; -} - -@media (inverted-colors: inverted) { - p { - background: black; - color: yellow; - } -} - -@media (inverted-colors: none) { - p { - background: #eee; - color: red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.inverted-colors")}}</p> diff --git a/files/ja/web/css/@media/inverted-colors/index.md b/files/ja/web/css/@media/inverted-colors/index.md new file mode 100644 index 0000000000..ded77035aa --- /dev/null +++ b/files/ja/web/css/@media/inverted-colors/index.md @@ -0,0 +1,72 @@ +--- +title: inverted-colors +slug: Web/CSS/@media/inverted-colors +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.inverted-colors +translation_of: Web/CSS/@media/inverted-colors +--- +{{CSSRef}} + +**`inverted-colors`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("user agent", "ユーザーエージェント")}}またはその下の OS が色を反転しているかどうかを調べるために使用することができます。 + +## 構文 + +`inverted-colors` 特性は以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : 色が通常通り表示されます。 +- `inverted` + - : 表示領域内のすべてのピクセルが反転されています。 + +## 例 + +### HTML + +```html +<p>If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.</p> +<p>If the text is gray, your browser doesn't support the `inverted-colors` media feature.</p> +``` + +### CSS + +```css +p { + color: gray; +} + +@media (inverted-colors: inverted) { + p { + background: black; + color: yellow; + } +} + +@media (inverted-colors: none) { + p { + background: #eee; + color: red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/monochrome/index.html b/files/ja/web/css/@media/monochrome/index.html deleted file mode 100644 index 7eb117cf7c..0000000000 --- a/files/ja/web/css/@media/monochrome/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: monochrome -slug: Web/CSS/@media/monochrome -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/monochrome ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>light-level</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>monochrome</code> 特性は {{cssxref("<integer>")}} 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-monochrome</code></strong> 及び <code><strong>max-monochrome</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p class="mono">この機器はモノクロピクセルに対応しています。</p> -<p class="no-mono">この機器はモノクロピクセルに対応していません。</p></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">p { - display: none; -} - -/* 任意のモノクロ機器 */ -@media (monochrome) { - p.mono { - display: block; - color: #333; - } -} - -/* 任意のモノクロでない機器 */ -@media (monochrome: 0) { - p.no-mono { - display: block; - color: #ee3636; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>値に負の数が取れるようになり、この場合は false と計算される。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。負の値は使用不可。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.monochrome")}}</p> diff --git a/files/ja/web/css/@media/monochrome/index.md b/files/ja/web/css/@media/monochrome/index.md new file mode 100644 index 0000000000..4528af6786 --- /dev/null +++ b/files/ja/web/css/@media/monochrome/index.md @@ -0,0 +1,64 @@ +--- +title: monochrome +slug: Web/CSS/@media/monochrome +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.monochrome +translation_of: Web/CSS/@media/monochrome +--- +{{CSSRef}} + +**`light-level`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。 + +## 構文 + +`monochrome` 特性は {{cssxref("<integer>")}} 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた **`min-monochrome`** および **`max-monochrome`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +### HTML + +```html +<p class="mono">この機器はモノクロピクセルに対応しています。</p> +<p class="no-mono">この機器はモノクロピクセルに対応していません。</p> +``` + +### CSS + +```css +p { + display: none; +} + +/* 任意のモノクロ機器 */ +@media (monochrome) { + p.mono { + display: block; + color: #333; + } +} + +/* 任意のモノクロでない機器 */ +@media (monochrome: 0) { + p.no-mono { + display: block; + color: #ee3636; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/@media/orientation/index.html b/files/ja/web/css/@media/orientation/index.html deleted file mode 100644 index 1781ac5aa0..0000000000 --- a/files/ja/web/css/@media/orientation/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@media/orientation -tags: - - '@media' - - CSS - - Reference - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/orientation ---- -<div>{{cssref}}</div> - -<p><strong><code>orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、{{glossary("viewport", "ビューポート")}} (または<a href="/ja/docs/Web/CSS/Paged_media">ページ付きメディア</a>ではページボックス) の向きを調べるために使用することができます。</p> - -<div class="note"> -<p><strong>メモ:</strong> この特性は<em>端末</em>の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>orientation</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p> - -<h3 id="Keyword_values" name="Keyword_values">キーワード値</h3> - -<dl> - <dt><code>portrait</code></dt> - <dd>ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。</dd> - <dt><code>landscape</code></dt> - <dd>ビューポートは横長です。つまり、幅が高さよりも大きい状態です。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>Box 1</div> -<div>Box 2</div> -<div>Box 3</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">body { - display: flex; -} - -div { - background: yellow; -} - -@media (orientation: landscape) { - body { - flex-direction: row; - } -} - -@media (orientation: portrait) { - body { - flex-direction: column; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.orientation")}}</p> diff --git a/files/ja/web/css/@media/orientation/index.md b/files/ja/web/css/@media/orientation/index.md new file mode 100644 index 0000000000..de8eb2a077 --- /dev/null +++ b/files/ja/web/css/@media/orientation/index.md @@ -0,0 +1,74 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.orientation +translation_of: Web/CSS/@media/orientation +--- +{{CSSRef}} + +**`orientation`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}} (または[ページ付きメディア](/ja/docs/Web/CSS/Paged_media)ではページボックス) の向きを調べるために使用することができます。 + +> **Note:** この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。 + +## 構文 + +`orientation` 特性は以下の一覧のうち一つのキーワード値で指定します。 + +### キーワード値 + +- `portrait` + - : ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。 +- `landscape` + - : ビューポートは横長です。つまり、幅が高さよりも大きい状態です。 + +## 例 + +### HTML + +```html +<div>Box 1</div> +<div>Box 2</div> +<div>Box 3</div> +``` + +### CSS + +```css +body { + display: flex; +} + +div { + background: yellow; +} + +@media (orientation: landscape) { + body { + flex-direction: row; + } +} + +@media (orientation: portrait) { + body { + flex-direction: column; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/@media/overflow-block/index.html b/files/ja/web/css/@media/overflow-block/index.html deleted file mode 100644 index ef1f356178..0000000000 --- a/files/ja/web/css/@media/overflow-block/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: overflow-block -slug: Web/CSS/@media/overflow-block -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/overflow-block ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>overflow-block</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、初期<a href="/ja/docs/Web/CSS/All_about_the_containing_block">包含ブロック</a>をブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>overflow-block</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>ブロック軸方向にあふれたコンテンツは表示されません。</dd> - <dt><code>scroll</code></dt> - <dd>ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができます。</dd> - <dt><code>optional-paged</code></dt> - <dd>ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができますが、ページ区切りを手動で ({{cssxref("break-inside")}} などによって) 入れることができ、その後のコンテンツを次のページに表示させることができます。</dd> - <dt><code>paged</code></dt> - <dd>コンテンツは不連続のページに分割されます。１ページをブロック方向にあふれるコンテンツは、次のページに表示されます。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@media (overflow-block: scroll) { - p { - color: red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.overflow-block")}}</p> diff --git a/files/ja/web/css/@media/overflow-block/index.md b/files/ja/web/css/@media/overflow-block/index.md new file mode 100644 index 0000000000..d22d011dd5 --- /dev/null +++ b/files/ja/web/css/@media/overflow-block/index.md @@ -0,0 +1,63 @@ +--- +title: overflow-block +slug: Web/CSS/@media/overflow-block +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.overflow-block +translation_of: Web/CSS/@media/overflow-block +--- +{{CSSRef}} + +**`overflow-block`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、初期[包含ブロック](/ja/docs/Web/CSS/Containing_block)をブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。 + +## 構文 + +`overflow-block` 特性は以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : ブロック軸方向にあふれたコンテンツは表示されません。 +- `scroll` + - : ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができます。 +- `optional-paged` + - : ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができますが、ページ区切りを手動で ({{cssxref("break-inside")}} などによって) 入れることができ、その後のコンテンツを次のページに表示させることができます。 +- `paged` + - : コンテンツは不連続のページに分割されます。１ページをブロック方向にあふれるコンテンツは、次のページに表示されます。 + +## 例 + +### HTML + +```html +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p> +``` + +### CSS + +```css +@media (overflow-block: scroll) { + p { + color: red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/overflow-inline/index.html b/files/ja/web/css/@media/overflow-inline/index.html deleted file mode 100644 index 493144e445..0000000000 --- a/files/ja/web/css/@media/overflow-inline/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: overflow-inline -slug: Web/CSS/@media/overflow-inline -tags: - - '@media' - - CSS - - Media Queries - - Reference - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/overflow-inline ---- -<div>{{cssref}}</div> - -<p><strong><code>overflow-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、初期<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>をインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>overflow-inline</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>インライン軸方向にあふれたコンテンツは表示されません。</dd> - <dt><code>scroll</code></dt> - <dd>インライン軸方向にあふれたコンテンツは、スクロールすることで見ることができます。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">p { - white-space: nowrap; -} - -@media (overflow-inline: scroll) { - p { - color: red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.at-rules.media.overflow-inline")}}</div> diff --git a/files/ja/web/css/@media/overflow-inline/index.md b/files/ja/web/css/@media/overflow-inline/index.md new file mode 100644 index 0000000000..ed43ae3b35 --- /dev/null +++ b/files/ja/web/css/@media/overflow-inline/index.md @@ -0,0 +1,58 @@ +--- +title: overflow-inline +slug: Web/CSS/@media/overflow-inline +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.overflow-inline +translation_of: Web/CSS/@media/overflow-inline +--- +{{CSSRef}} + +**`overflow-inline`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、初期[包含ブロック](/ja/docs/Web/CSS/Containing_block)をインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。 + +## 構文 + +`overflow-inline` 特性は以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : インライン軸方向にあふれたコンテンツは表示されません。 +- `scroll` + - : インライン軸方向にあふれたコンテンツは、スクロールすることで見ることができます。 + +## 例 + +### HTML + +```html +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p> +``` + +### CSS + +```css +p { + white-space: nowrap; +} + +@media (overflow-inline: scroll) { + p { + color: red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/@media/pointer/index.html b/files/ja/web/css/@media/pointer/index.html deleted file mode 100644 index 2f92b9b3a0..0000000000 --- a/files/ja/web/css/@media/pointer/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: pointer -slug: Web/CSS/@media/pointer -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/pointer ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>pointer</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、<em>主要な</em>ポインティングデバイスにどれだけの正確性があるかを調べます。</p> - -<div class="note"> -<p><strong>メモ:</strong> <em>すべての</em>ポインティングデバイスの正確性を調べたい場合は、代わりに <code><a href="/ja/docs/Web/CSS/@media/any-pointer">any-pointer</a></code> を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>pointer</code> 特性は、以下の一覧の中から一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>主要な入力メカニズムに、ポインティングデバイスがありません。</dd> - <dt><code>coarse</code></dt> - <dd>主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。</dd> - <dt><code>fine</code></dt> - <dd>主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<p>次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input id="test" type="checkbox" /> -<label for="test">Look at me!</label></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input[type="checkbox"]:checked { - background: gray; -} - -@media (pointer: fine) { - input[type="checkbox"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - width: 15px; - height: 15px; - border: 1px solid blue; - } -} - -@media (pointer: coarse) { - input[type="checkbox"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - width: 30px; - height: 30px; - border: 2px solid red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.pointer")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code> メディア特性</a></li> -</ul> diff --git a/files/ja/web/css/@media/pointer/index.md b/files/ja/web/css/@media/pointer/index.md new file mode 100644 index 0000000000..0df7d08ac5 --- /dev/null +++ b/files/ja/web/css/@media/pointer/index.md @@ -0,0 +1,89 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.pointer +translation_of: Web/CSS/@media/pointer +--- +{{CSSRef}} + +**`pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、*主要な*ポインティングデバイスにどれだけの正確性があるかを調べます。 + +> **Note:** *すべての*ポインティングデバイスの正確性を調べたい場合は、代わりに `[any-pointer](/ja/docs/Web/CSS/@media/any-pointer)` を使用してください。 + +## 構文 + +`pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。 + +- `none` + - : 主要な入力メカニズムに、ポインティングデバイスがありません。 +- `coarse` + - : 主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。 +- `fine` + - : 主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。 + +## 例 + +次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。 + +### HTML + +```html +<input id="test" type="checkbox" /> +<label for="test">Look at me!</label> +``` + +### CSS + +```css +input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border: solid; + margin: 0; +} + +input[type="checkbox"]:checked { + background: gray; +} + +@media (pointer: fine) { + input[type="checkbox"] { + width: 15px; + height: 15px; + border-width: 1px; + border-color: blue; + } +} + +@media (pointer: coarse) { + input[type="checkbox"] { + width: 30px; + height: 30px; + border-width: 2px; + border-color: red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`any-pointer` メディア特性](/ja/docs/Web/CSS/@media/any-pointer) diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.md b/files/ja/web/css/@media/prefers-color-scheme/index.md index fee34abeb6..3fb80e1546 100644 --- a/files/ja/web/css/@media/prefers-color-scheme/index.md +++ b/files/ja/web/css/@media/prefers-color-scheme/index.md @@ -4,14 +4,14 @@ slug: Web/CSS/@media/prefers-color-scheme tags: - '@media' - CSS - - Reference - - Web + - リファレンス + - ウェブ - メディア特性 - prefers-color-scheme browser-compat: css.at-rules.media.prefers-color-scheme translation_of: Web/CSS/@media/prefers-color-scheme --- -**`prefers-color-scheme`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。 +**`prefers-color-scheme`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。 ユーザーはオペレーティングシステムの設定 (ライトまたはダークモードなど) やユーザーエージェントの設定で、この設定を示す場合があります。 @@ -21,9 +21,8 @@ translation_of: Web/CSS/@media/prefers-color-scheme - : ユーザーがシステムに、明色のテーマを持つインターフェイスにしたいと通知したか、アクティブな設定を示さなかったことを示します。 - `dark` - : ユーザーがシステムに、暗色のテーマを持つインターフェイスにしたいと通知したことを示します。 -</dl> -<h2 id="Examples">例</h3> +## 例 以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。 diff --git a/files/ja/web/css/@media/prefers-contrast/index.html b/files/ja/web/css/@media/prefers-contrast/index.html deleted file mode 100644 index 6360347281..0000000000 --- a/files/ja/web/css/@media/prefers-contrast/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: prefers-contrast -slug: Web/CSS/@media/prefers-contrast -tags: - - CSS - - Reference - - media feature - - メディア特性 -translation_of: Web/CSS/@media/prefers-contrast ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>prefers-contrast</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。</dd> - <dt><code>more</code></dt> - <dd>ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。</dd> - <dt><code><dfn>less</dfn></code></dt> - <dd>ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。</dd> -</dl> - -<h2 id="User_preferences" name="User_preferences">ユーザー設定</h2> - -<p>様々なオペレーティングシステムがこのような設定をサポートしており、ユーザエージェントはオペレーティングシステムによって提供される設定に依存することになるでしょう。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>この例では、既定でいまいましい低いコントラストが与えられています。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div class="contrast">low contrast box</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">.contrast { - width: 100px; - height: 100px; - outline: 2px dashed black; -} - -@media (prefers-contrast: more) { - .contrast { - outline: 2px solid black; - } -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.prefers-contrast")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>Microsoft <a href="https://msdn.microsoft.com/library/Hh771830">-ms-high-contrast</a> media feature</li> - <li>CSS <a href="/en-US/docs/Web/CSS/@media/forced-colors">forced-colors</a> media query -</ul> - -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</p> diff --git a/files/ja/web/css/@media/prefers-contrast/index.md b/files/ja/web/css/@media/prefers-contrast/index.md new file mode 100644 index 0000000000..850b773d2d --- /dev/null +++ b/files/ja/web/css/@media/prefers-contrast/index.md @@ -0,0 +1,71 @@ +--- +title: prefers-contrast +slug: Web/CSS/@media/prefers-contrast +tags: + - CSS + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.prefers-contrast +translation_of: Web/CSS/@media/prefers-contrast +--- +{{CSSRef}}{{SeeCompatTable}} + +**`prefers-contrast`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。 + +## 構文 + +- `no-preference` + - : ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。 +- `more` + - : ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。 +- `less` + - : ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。 + +## ユーザー設定 + +様々なオペレーティングシステムがこのような設定をサポートしており、ユーザエージェントはオペレーティングシステムによって提供される設定に依存することになるでしょう。 + +## 例 + +この例では、既定でいまいましい低いコントラストが与えられています。 + +### HTML + +```html +<div class="contrast">low contrast box</div> +``` + +### CSS + +```css +.contrast { + width: 100px; + height: 100px; + outline: 2px dashed black; +} + +@media (prefers-contrast: more) { + .contrast { + outline: 2px solid black; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- Microsoft [-ms-high-contrast](https://msdn.microsoft.com/library/Hh771830) メディア特性 +- CSS の [forced-colors](/ja/docs/Web/CSS/@media/forced-colors) メディアクエリー + +{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}} diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.html b/files/ja/web/css/@media/prefers-reduced-motion/index.html deleted file mode 100644 index 969018152e..0000000000 --- a/files/ja/web/css/@media/prefers-reduced-motion/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: prefers-reduced-motion -slug: Web/CSS/@media/prefers-reduced-motion -tags: - - '@media' - - CSS - - Media Queries - - Reference - - media feature - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/prefers-reduced-motion ---- -<p><strong><code>prefers-reduced-motion</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。</p> - -<div class="blockIndicator warning"> -<p><strong>重要:</strong> このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>システムが把握している設定をユーザーが行っていないことを示します。</dd> - <dt><code><dfn>reduce</dfn></code></dt> - <dd>前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。</dd> -</dl> - -<h2 id="User_preferences" name="User_preferences">ユーザー設定</h2> - -<p>Firefox では、 <code><dfn>reduce</dfn></code> の要求は以下の場合に尊重されます。</p> - -<ul> - <li>GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 - <ul> - <li>他にも、 <code>gtk-enable-animations = false</code> を <a href="https://wiki.archlinux.org/index.php/GTK#Configuration">GTK 3 configuration file</a> の <code>[Settings]</code> に追加する方法もあります。</li> - </ul> - </li> - <li>Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する</li> - <li>Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合)</li> - <li>macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制</li> - <li>iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす</li> - <li>Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除</li> - <li>Firefox では <code>about:config</code>: 数値型の設定項目 <code>ui.prefersReducedMotion</code> を追加し、値を <code>1</code> とします。この設定の変更は直ちに効果が現れます。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<p>この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div class="animation">animated box</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">.animation { - animation: pulse 1s linear infinite both; -} - -/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */ -@media (prefers-reduced-motion) { - .animation { - animation-name: dissolve; - } -} -</pre> - -<div class="hidden"> -<pre class="brush: css notranslate">.animation { - background-color: #306; - color: #fff; - font: 1.2em sans-serif; - width: 10em; - padding: 1em; - border-radius: 1em; - text-align: center; -} - -@keyframes pulse { - 0% { transform: scale(1); } - 25% { transform: scale(.9); } - 50% { transform: scale(1); } - 75% { transform: scale(1.1); } - 100% { transform: scale(1); } -} - -@keyframes dissolve { - 0% { opacity: 1; } - 50% { opacity: 0.8; } - 100% { opacity: 1; } -} -</pre> -</div> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query (CSS Tricks)</a></li> - <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion (WebKit Blog)</a> includes vestibular motion trigger examples.</li> -</ul> - -<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div> diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.md b/files/ja/web/css/@media/prefers-reduced-motion/index.md new file mode 100644 index 0000000000..bf925671fc --- /dev/null +++ b/files/ja/web/css/@media/prefers-reduced-motion/index.md @@ -0,0 +1,108 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - アクセシビリティ + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.prefers-reduced-motion +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +**`prefers-reduced-motion`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。 + +> **Warning:** このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。 + +## 構文 + +- `no-preference` + - : システムが把握している設定をユーザーが行っていないことを示します。 +- `reduce` + - : 前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。 + +## ユーザー設定 + +Firefox では、 `reduce` の要求は以下の場合に尊重されます。 + +- GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 + + - 他にも、 `gtk-enable-animations = false` を [GTK 3 configuration file](https://wiki.archlinux.org/index.php/GTK#Configuration) の `[Settings]` に追加する方法もあります。 + +- Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する +- Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合) +- macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制 +- iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす +- Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除 +- Firefox では `about:config`: 数値型の設定項目 `ui.prefersReducedMotion` を追加し、値を `1` とします。この設定の変更は直ちに効果が現れます。 + +## 例 + +この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。 + +### HTML + +```html +<div class="animation">animated box</div> +``` + +### CSS + +```css +.animation { + animation: pulse 1s linear infinite both; +} + +/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */ +@media (prefers-reduced-motion) { + .animation { + animation-name: dissolve; + } +} +``` + +```css hidden +.animation { + background-color: #306; + color: #fff; + font: 1.2em sans-serif; + width: 10em; + padding: 1em; + border-radius: 1em; + text-align: center; +} + +@keyframes pulse { + 0% { transform: scale(1); } + 25% { transform: scale(.9); } + 50% { transform: scale(1); } + 75% { transform: scale(1.1); } + 100% { transform: scale(1); } +} + +@keyframes dissolve { + 0% { opacity: 1; } + 50% { opacity: 0.8; } + 100% { opacity: 1; } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [An Introduction to the Reduced Motion Media Query (CSS Tricks)](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) includes vestibular motion trigger examples. + +{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}} diff --git a/files/ja/web/css/@media/resolution/index.html b/files/ja/web/css/@media/resolution/index.html deleted file mode 100644 index decdb0ff05..0000000000 --- a/files/ja/web/css/@media/resolution/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: resolution -slug: Web/CSS/@media/resolution -tags: - - '@media' - - CSS - - Media Queries - - Reference - - media feature - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/resolution ---- -<div>{{cssref}}</div> - -<p><strong><code>resolution</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、出力端末のピクセル解像度をテストするために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>resolution</code> 特性は、出力端末のピクセル解像度を表す {{cssxref("<resolution>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-resolution</code></strong> および <code><strong>max-resolution</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>This is a test of your device's pixel density.</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">/* 正確な解像度 */ -@media (resolution: 150dpi) { - p { - color: red; - } -} - -/* 最小解像度 */ -@media (min-resolution: 72dpi) { - p { - text-decoration: underline; - } -} - -/* 最大解像度 */ -@media (max-resolution: 300dpi) { - p { - background: yellow; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.resolution")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("window.devicePixelRatio")}}</li> -</ul> diff --git a/files/ja/web/css/@media/resolution/index.md b/files/ja/web/css/@media/resolution/index.md new file mode 100644 index 0000000000..fc52c1a636 --- /dev/null +++ b/files/ja/web/css/@media/resolution/index.md @@ -0,0 +1,69 @@ +--- +title: resolution +slug: Web/CSS/@media/resolution +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.resolution +translation_of: Web/CSS/@media/resolution +--- +{{CSSRef}} + +**`resolution`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、出力端末のピクセル解像度をテストするために使用することができます。 + +## 構文 + +`resolution` 特性は、出力端末のピクセル解像度を表す {{cssxref("<resolution>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-resolution`** および **`max-resolution`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +### HTML + +```html +<p>This is a test of your device's pixel density.</p> +``` + +### CSS + +```css +/* 正確な解像度 */ +@media (resolution: 150dpi) { + p { + color: red; + } +} + +/* 最小解像度 */ +@media (min-resolution: 72dpi) { + p { + text-decoration: underline; + } +} + +/* 最大解像度 */ +@media (max-resolution: 300dpi) { + p { + background: yellow; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("window.devicePixelRatio")}} +- {{cssxref("image-resolution")}} プロパティ diff --git a/files/ja/web/css/@media/scripting/index.html b/files/ja/web/css/@media/scripting/index.html deleted file mode 100644 index 0d01c7bed8..0000000000 --- a/files/ja/web/css/@media/scripting/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: scripting -slug: Web/CSS/@media/scripting -tags: - - '@media' - - CSS - - Media Queries - - Reference - - media feature - - メディアクエリ - - メディア特性 -translation_of: Web/CSS/@media/scripting ---- -<div>{{cssref}}</div> - -<p><strong><code>scripting</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>scripting</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>スクリプトは現在の文書で全く利用できません。</dd> - <dt><code>initial-only</code></dt> - <dd>スクリプトはページを読み込んでいる間は利用できますが、その後は利用できません。</dd> - <dt><code>enabled</code></dt> - <dd>現在の文書がスクリプトに対応しており、有効です。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p class="script-none">スクリプトは利用できません。 :-(</p> -<p class="script-initial-only">スクリプトはページを読み込んでいる間だけ有効です。残念。</p> -<p class="script-enabled">スクリプトは有効です。 :-)</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">p { - color: lightgray; -} - -@media (scripting: none) { - .script-none { - color: red; - } -} - -@media (scripting: initial-only) { - .script-initial-only { - color: red; - } -} - -@media (scripting: enabled) { - .script-enabled { - color: red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries', '#scripting', 'scripting')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.scripting")}}</p> diff --git a/files/ja/web/css/@media/scripting/index.md b/files/ja/web/css/@media/scripting/index.md new file mode 100644 index 0000000000..f5012ecd23 --- /dev/null +++ b/files/ja/web/css/@media/scripting/index.md @@ -0,0 +1,79 @@ +--- +title: scripting +slug: Web/CSS/@media/scripting +tags: + - '@media' + - CSS + - メディアクエリー + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.scripting +translation_of: Web/CSS/@media/scripting +--- +{{CSSRef}} + +**`scripting`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。 + +## 構文 + +`scripting` 特性は、以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : スクリプトは現在の文書で全く利用できません。 +- `initial-only` + - : スクリプトはページを読み込んでいる間は利用できますが、その後は利用できません。 +- `enabled` + - : 現在の文書がスクリプトに対応しており、有効です。 + +## 例 + +### HTML + +```html +<p class="script-none">スクリプトは利用できません。 :-(</p> +<p class="script-initial-only">スクリプトはページを読み込んでいる間だけ有効です。残念。</p> +<p class="script-enabled">スクリプトは有効です。 :-)</p> +``` + +### CSS + +```css +p { + color: lightgray; +} + +@media (scripting: none) { + .script-none { + color: red; + } +} + +@media (scripting: initial-only) { + .script-initial-only { + color: red; + } +} + +@media (scripting: enabled) { + .script-enabled { + color: red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/shape/index.html b/files/ja/web/css/@media/shape/index.html deleted file mode 100644 index ad416d5324..0000000000 --- a/files/ja/web/css/@media/shape/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: shape -slug: Web/CSS/@media/shape -tags: - - '@-規則' - - '@media' - - At-rule - - CSS - - Reference - - メディア特性 -translation_of: Web/CSS/@media/shape ---- -<div>{{CSSRef}} {{ Non-standard_header }}</div> - -<p><code>shape</code> は <a href="/ja/docs/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>shape</code> は識別機能であり、四角い画面を表す <code>rect</code> または丸や楕円の画面を表す <code>round</code> の二つの文字列のうちの一つで指定します。</p> - -<dl> - <dt><code><dfn>rect</dfn></code></dt> - <dd>形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。</dd> - <dt><code><dfn>round</dfn></code></dt> - <dd>形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<div class="blockIndicator note"> -<p><strong>注:</strong> 現在この特性に対応しているブラウザーはありません。</p> -</div> - -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> - -<h4 id="HTML" name="HTML">HTML</h4> - -<pre class="brush: html notranslate"><h1>Hello World!</h1> -</pre> - -<h4 id="CSS" name="CSS">CSS</h4> - -<pre class="brush: css notranslate">h1 { - text-align: left; -} - -@media (shape: rect) { - h1 { - text-align: left; - } -} - -@media (shape: round) { - h1 { - text-align: center; - } -} -</pre> - -<h3 id="Custom_stylesheet" name="Custom_stylesheet">カスタムスタイルシート</h3> - -<p>この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。</p> - -<pre class="brush: html notranslate"><code><head> - <link rel="stylesheet" href="default.css" /></code> -<code> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> - <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> -</head> -</code></pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></td> - <td>草稿</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.shape")}}</p> diff --git a/files/ja/web/css/@media/shape/index.md b/files/ja/web/css/@media/shape/index.md new file mode 100644 index 0000000000..dfbe1c08a0 --- /dev/null +++ b/files/ja/web/css/@media/shape/index.md @@ -0,0 +1,80 @@ +--- +title: shape +slug: Web/CSS/@media/shape +tags: + - '@media' + - CSS + - リファレンス + - メディア特性 +browser-compat: css.at-rules.media.shape +translation_of: Web/CSS/@media/shape +--- +{{CSSRef}} + +`shape` は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。 + +## 構文 + +`shape` は識別機能であり、四角い画面を表す `rect` または丸や楕円の画面を表す `round` の二つの文字列のうちの一つで指定します。 + +- `rect` + - : 形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。 +- `round` + - : 形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。 + +## 例 + +### 基本的な例 + +<h4 id="HTML" name="HTML">HTML</h4> + +#### HTML + +```html +<h1>Hello World!</h1> +``` + +#### CSS + +```css +h1 { + text-align: left; +} + +@media (shape: rect) { + h1 { + text-align: left; + } +} + +@media (shape: round) { + h1 { + text-align: center; + } +} +``` + +### カスタムスタイルシート + +この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。 + +```html +<head> + <link rel="stylesheet" href="default.css" /> + <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> + <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> +</head> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/update-frequency/index.html b/files/ja/web/css/@media/update-frequency/index.html deleted file mode 100644 index a66bc544a5..0000000000 --- a/files/ja/web/css/@media/update-frequency/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: update -slug: Web/CSS/@media/update-frequency -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/update-frequency ---- -<div>{{cssref}}</div> - -<p><strong><code>scripting</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p> <code>update</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。</dd> - <dt><code>slow</code></dt> - <dd>通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。</dd> - <dt><code>fast</code></dt> - <dd>レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>のような恒常的な更新を使用することができます。例: コンピューターの画面。</dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>このテキストが動いていれば、高速に更新できる端末を使用しています。</p> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">@keyframes jiggle { - from { - transform: translateY(0); - } - - to { - transform: translateY(25px); - } -} - -@media (update: fast) { - p { - animation: 1s jiggle linear alternate infinite; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#update', 'update')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.media.update")}}</p> diff --git a/files/ja/web/css/@media/update-frequency/index.md b/files/ja/web/css/@media/update-frequency/index.md new file mode 100644 index 0000000000..28274c10ea --- /dev/null +++ b/files/ja/web/css/@media/update-frequency/index.md @@ -0,0 +1,71 @@ +--- +title: update +slug: Web/CSS/@media/update-frequency +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +browser-compat: css.at-rules.media.update +translation_of: Web/CSS/@media/update-frequency +--- +{{CSSRef}} + +**`update`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。 + +## 構文 + + `update` 特性は、以下の一覧のうち一つのキーワード値で指定します。 + +- `none` + - : いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。 +- `slow` + - : 通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。 +- `fast` + - : レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)のような恒常的な更新を使用することができます。例: コンピューターの画面。 + +## 例 + +### HTML + +```html +<p>このテキストが動いていれば、高速に更新できる端末を使用しています。</p> +``` + +### CSS + +```css +@keyframes jiggle { + from { + transform: translateY(0); + } + + to { + transform: translateY(25px); + } +} + +@media (update: fast) { + p { + animation: 1s jiggle linear alternate infinite; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/@media/width/index.html b/files/ja/web/css/@media/width/index.html deleted file mode 100644 index a0c2347d1f..0000000000 --- a/files/ja/web/css/@media/width/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: width -slug: Web/CSS/@media/width -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/width ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>width</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("viewport", "ビューポート")}}の幅 (又は<a href="/ja/docs/Web/CSS/Paged_media">ページ付きメディア</a>のページボックスの幅) をテストするために使用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>width</code> 特性は、ビューポートの幅を表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-width</code></strong> 及び <code><strong>max-width</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>ビューポートの幅を変更しながらこの要素を見ていてください。</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* 正確な幅 */ -@media (width: 360px) { - div { - color: red; - } -} - -/* 最小幅 */ -@media (min-width: 35rem) { - div { - background: yellow; - } -} - -/* 最大幅 */ -@media (max-width: 50rem) { - div { - border: 2px solid blue; - } -} -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Example','90%')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>値に負の数を取ることができるようになり、この場合は false と計算されます。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義。値は非負でなければなりませんでした。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.width")}}</p> diff --git a/files/ja/web/css/@media/width/index.md b/files/ja/web/css/@media/width/index.md new file mode 100644 index 0000000000..1c25e99594 --- /dev/null +++ b/files/ja/web/css/@media/width/index.md @@ -0,0 +1,69 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +browser-compat: css.at-rules.media.width +translation_of: Web/CSS/@media/width +--- +{{CSSRef}} + +**`width`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}}の幅 (または[ページ付きメディア](/ja/docs/Web/CSS/Paged_media)のページボックスの幅) をテストするために使用することができます。 + +## 構文 + +`width` 特性は、ビューポートの幅を表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-width`** および `**max-width**` の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。 + +## 例 + +### HTML + +```html +<div>ビューポートの幅を変更しながらこの要素を見ていてください。</div> +``` + +### CSS + +```css +/* 正確な幅 */ +@media (width: 360px) { + div { + color: red; + } +} + +/* 最小幅 */ +@media (min-width: 35rem) { + div { + background: yellow; + } +} + +/* 最大幅 */ +@media (max-width: 50rem) { + div { + border: 2px solid blue; + } +} +``` + +### 結果 + +{{EmbedLiveSample('Examples','90%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/frequency/index.md b/files/ja/web/css/frequency/index.md index 5aad2f1da8..fd641c2e6e 100644 --- a/files/ja/web/css/frequency/index.md +++ b/files/ja/web/css/frequency/index.md @@ -51,7 +51,7 @@ translation_of: Web/CSS/frequency {{Specifications}} -> **Note:** このデータ型は初め、 [CSS Level 2](https://www.w3.org/TR/CSS2/) の現在は廃止された [aural](/ja/docs/Web/CSS/@media/aural) [メディアタイプ](/ja/docs/Web/CSS/@media#media_types)で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で `<frequency>` データ型が再導入されました。 +> **Note:** このデータ型は初め、 [CSS Level 2](https://www.w3.org/TR/CSS2/) の現在は廃止された [aural](/ja/docs/Web/CSS/@media/aural) [メディア種別](/docs/Web/CSS/@media#メディア種別)で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で `<frequency>` データ型が再導入されました。 ## ブラウザーの互換性 diff --git a/files/ja/web/css/media_queries/index.html b/files/ja/web/css/media_queries/index.html deleted file mode 100644 index 518d1ffdda..0000000000 --- a/files/ja/web/css/media_queries/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: メディアクエリ -slug: Web/CSS/Media_queries -tags: - - CSS - - CSS3 メディアクエリ - - Reference - - メディアクエリ - - リファレンス - - レスポンシブデザイン - - 概要 -translation_of: Web/CSS/Media_Queries ---- -<div>{{CSSRef}}</div> - -<p><strong>メディアクエリ</strong>によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。</p> - -<p>これは<a href="/ja/docs/Web/Progressive_web_apps">レスポンシブデザイン</a>のキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。</p> - -<p> <a href="/ja/docs/Web/CSS">CSS</a> では、 {{cssxref("@media")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。</p> - -<h3 id="Media_queries_in_HTML" name="Media_queries_in_HTML">HTML でのメディアクエリ</h3> - -<p> <a href="/ja/docs/Web/HTML">HTML</a> でも、メディアクエリは様々な要素に適用することができます。</p> - -<ul> - <li> {{HTMLElement("link")}} 要素の {{htmlattrxref("media", "link")}} 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。</li> - <li> {{HTMLElement("source")}} 要素の {{htmlattrxref("media", "source")}} 属性では、ソースが適用されるメディアを定義します。 (これは {{HTMLElement("picture")}} 要素内でのみ有効です。)</li> - <li> {{HTMLElement("style")}} 要素の {{htmlattrxref("media", "style")}} 属性では、スタイルが適用されるメディアを定義します。</li> -</ul> - -<h3 id="Media_queries_in_JavaScript" name="Media_queries_in_JavaScript">JavaScript でのメディアクエリ</h3> - -<p> <a href="/ja/docs/Web/JavaScript">JavaScript</a> では、ウィンドウがメディアクエリに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。</p> - -<p>プログラムからのメディアクエリの使用については、<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアクエリのテスト</a>で知ることができます。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="CSS_At-rules" name="CSS_At-rules">CSS @規則</h3> - -<div class="index"> -<ul> - <li>{{cssxref("@import")}}</li> - <li>{{cssxref("@media")}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></dt> - <dd>メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。</dd> - <dt><a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">プログラムからのメディアクエリのテスト</a></dt> - <dd>JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。</dd> - <dt><a href="/ja/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">アクセシビリティのためのメディアクエリの使用</a></dt> - <dd>ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS5 Media Queries')}}</td> - <td>{{Spec2('CSS5 Media Queries')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Conditional')}}</td> - <td>{{Spec2('CSS3 Conditional')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS4 Media Queries')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'media.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li> {{cssxref("@supports")}} を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。</li> -</ul> diff --git a/files/ja/web/css/media_queries/index.md b/files/ja/web/css/media_queries/index.md new file mode 100644 index 0000000000..acaca99d92 --- /dev/null +++ b/files/ja/web/css/media_queries/index.md @@ -0,0 +1,63 @@ +--- +title: メディアクエリー +slug: Web/CSS/Media_Queries +tags: + - CSS + - ガイド + - メディアクエリー + - 概要 + - リファレンス + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries +--- +{{CSSRef}} + +**メディアクエリー**によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。 + +これは[レスポンシブデザイン](/ja/docs/Web/Progressive_web_apps)のキーコンポーネントです。例えば、メディアクエリーでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落の間隔を広げたり、タッチ画面でボタンを拡大したりすることができます。 + +[CSS](/ja/docs/Web/CSS) では、 {{cssxref("@media")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。 + +### HTML でのメディアクエリー + +[HTML](/ja/docs/Web/HTML) でも、メディアクエリーは様々な要素に適用することができます。 + +- {{HTMLElement("link")}} 要素の {{htmlattrxref("media", "link")}} 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。 +- {{HTMLElement("source")}} 要素の {{htmlattrxref("media", "source")}} 属性では、ソースが適用されるメディアを定義します。 (これは {{HTMLElement("picture")}} 要素内でのみ有効です。) +- {{HTMLElement("style")}} 要素の {{htmlattrxref("media", "style")}} 属性では、スタイルが適用されるメディアを定義します。 + +### avaScript でのメディアクエリー + +[JavaScript](/ja/docs/Web/JavaScript) では、ウィンドウがメディアクエリーに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリーの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。 + +プログラムからのメディアクエリーの使用については、[メディアクエリーのテスト](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)で知ることができます。 + +## リファレンス + +### アットルール + +- {{cssxref("@import")}} +- {{cssxref("@media")}} + +## ガイド + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) + - : メディアクエリーと、その構文や演算子、メディアクエリー式を構築するために使用するメディア機能を紹介します。 +- [プログラムからのメディアクエリーのテスト](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries) + - : JavaScript の中でメディアクエリーを使用して端末の状態を特定する方法、メディアクエリーの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。 +- [アクセシビリティのためのメディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility) + - : ユーザーがウェブサイトをより理解できるように、メディアクエリーが支援できることを学びます。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------ | ---------------------------------------- | ------------------ | +| {{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')}} | 初回定義 | + +## 関連情報 + +- {{cssxref("@supports")}} を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。 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 deleted file mode 100644 index 11ef861024..0000000000 --- a/files/ja/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: プログラムによるメディアクエリーのテスト -slug: Web/CSS/Media_Queries/Testing_media_queries -tags: - - Advanced - - CSS - - DOM - - Guide - - JavaScript - - Media Queries - - MediaQueryList - - Responsive Design - - Web - - matchMedia - - ウェブ - - メディアクエリー - - レスポンシブデザイン -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -<div>{{cssref}}</div> - -<p>{{Glossary("DOM")}} では、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>の結果を {{domxref("MediaQueryList")}} インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 <code>MediaQueryList</code> オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。</p> - -<h2 id="Creating_a_media_query_list">メディアクエリーリストの作成</h2> - -<p>クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す <code>MediaQueryList</code> オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia")}} メソッドを用います。</p> - -<p>例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにします。</p> - -<pre class="brush: js">const mediaQueryList = window.matchMedia("(orientation: portrait)"); -</pre> - -<h2 id="Checking_the_result_of_a_query">クエリーの結果の確認</h2> - -<p>メディアクエリーリストが作成されると、その <code>matches</code> プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。</p> - -<pre class="brush: js">if (mediaQueryList.matches) { - /* 現在ビューポートが縦長である */ -} else { - /* 現在ビューポートが縦長ではない、すなわち横長である */ -} -</pre> - -<h2 id="Receiving_query_notifications">クエリーの通知の受信</h2> - -<p>クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録したことが効率的です。このためには、 <code>addListener()</code> メソッドを {{domxref("MediaQueryList")}} オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が <code>true</code> から <code>false</code> へ移行した場合) に呼び出されるコールバック関数を設定します。</p> - -<pre class="brush: js">// クエリーリストを作成する。 -const mediaQueryList = window.matchMedia("(orientation: portrait)"); - -// イベントリスナーのコールバック関数を定義する。 -function handleOrientationChange(mql) { - // ... -} - -// 向き変更時のハンドラーを一度実行する。 -handleOrientationChange(mediaQueryList); - -// コールバック関数をリスナーとしてクエリーリストに追加する。 -mediaQueryList.addListener(handleOrientationChange); -</pre> - -<p>このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。</p> - -<p>次の <code>handleOrientationChange()</code> メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。</p> - -<pre class="brush: js">function handleOrientationChange(evt) { - if (evt.matches) { - /* 現在ビューポートが縦長 */ - } else { - /* 現在ビューポートが横長 */ - } -} -</pre> - -<p>上記で、引数を <code>evt</code> — イベントオブジェクトとして定義しています。これは <a href="/ja/docs/Web/API/MediaQueryList#browser_compatibility"><code>MediaQueryList</code> の新しい実装</a>がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の {{domxref("MediaQueryListListener")}} の機構はもう使われませんが、標準のイベントリスナーの設定では、 {{domxref("MediaQueryListEvent")}} 型の<a href="/ja/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p> - -<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} および {{domxref("MediaQueryListEvent.matches","matches")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p> - -<h2 id="Ending_query_notifications">クエリーの通知の終了</h2> - -<p>メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 <code>removeListener()</code> メソッドを <code>MediaQueryList</code> オブジェクトに対して呼び出してください。</p> - -<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); -</pre> - -<h2 id="Browser_compatibility">ブラウザーの対応</h2> - -<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> インターフェイス</h3> - -<p>{{Compat("api.MediaQueryList")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリー</a></li> - <li>{{domxref("window.matchMedia()")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListEvent")}}</li> -</ul> diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.md b/files/ja/web/css/media_queries/testing_media_queries/index.md new file mode 100644 index 0000000000..a37028eb2a --- /dev/null +++ b/files/ja/web/css/media_queries/testing_media_queries/index.md @@ -0,0 +1,100 @@ +--- +title: プログラムによるメディアクエリーの評価 +slug: Web/CSS/Media_Queries/Testing_media_queries +tags: + - 上級者 + - CSS + - DOM + - ガイド + - JavaScript + - メディアクエリー + - MediaQueryList + - レスポンシブデザイン + - ウェブ + - matchMedia +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +{{CSSRef}} + +{{Glossary("DOM")}} では、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries)の結果を {{domxref("MediaQueryList")}} インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 `MediaQueryList` オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。 + +## メディアクエリーリストの作成 + +クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す `MediaQueryList` オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia")}} メソッドを用います。 + +例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにします。 + +```js +const mediaQueryList = window.matchMedia("(orientation: portrait)"); +``` + +## クエリーの結果の確認 + +メディアクエリーリストが作成されると、その `matches` プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。 + +```js +if (mediaQueryList.matches) { + /* 現在ビューポートが縦長である */ +} else { + /* 現在ビューポートが縦長ではない、すなわち横長である */ +} +``` + +## クエリーの通知の受信 + +クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりも[リスナー](/ja/docs/Web/API/EventTarget/addEventListener)を登録したことが効率的です。このためには、 `addListener()` メソッドを {{domxref("MediaQueryList")}} オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が `true` から `false` へ移行した場合) に呼び出されるコールバック関数を設定します。 + +```js +// クエリーリストを作成する。 +const mediaQueryList = window.matchMedia("(orientation: portrait)"); + +// イベントリスナーのコールバック関数を定義する。 +function handleOrientationChange(mql) { + // ... +} + +// 向き変更時のハンドラーを一度実行する。 +handleOrientationChange(mediaQueryList); + +// コールバック関数をリスナーとしてクエリーリストに追加する。 +mediaQueryList.addListener(handleOrientationChange); +``` + +このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。 + +次の `handleOrientationChange()` メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。 + +```js +function handleOrientationChange(evt) { + if (evt.matches) { + /* 現在ビューポートが縦長 */ + } else { + /* 現在ビューポートが横長 */ + } +} +``` + +上記で、引数を `evt` — イベントオブジェクトとして定義しています。これは [`MediaQueryList` の新しい実装](/ja/docs/Web/API/MediaQueryList#browser_compatibility)がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の {{domxref("MediaQueryListListener")}} の機構はもう使われませんが、標準のイベントリスナーの設定では、 {{domxref("MediaQueryListEvent")}} 型の[イベントオブジェクト](/ja/docs/Web/API/Event)をコールバック関数の引数として渡します。 + +このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} および {{domxref("MediaQueryListEvent.matches","matches")}} プロパティも含んでおり、 `MediaQueryList` のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。 + +## クエリーの通知の終了 + +メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 `removeListener()` メソッドを `MediaQueryList` オブジェクトに対して呼び出してください。 + +```js +mediaQueryList.removeListener(handleOrientationChange); +``` + +## ブラウザーの互換性 + +### `MediaQueryList` インターフェイス + +{{Compat("api.MediaQueryList")}} + +## 関連情報 + +- [メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- {{domxref("window.matchMedia()")}} +- {{domxref("MediaQueryList")}} +- {{domxref("MediaQueryListEvent")}} 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 deleted file mode 100644 index 779ab8f669..0000000000 --- a/files/ja/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: メディアクエリの使用 -slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - Advanced - - CSS - - Guide - - ウェブ - - ガイド - - メディア - - メディアクエリ - - レスポンシブデザイン -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -<div>{{cssref}}</div> - -<p><strong>メディアクエリ</strong>は、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。</p> - -<p>メディアクエリは以下の用途で使用されます。</p> - -<ul> - <li><a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("@media")}} および {{cssxref("@import")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>により、条件付きでスタイルを適用する。</li> - <li>{{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの <a href="/ja/docs/Web/HTML">HTML</a> 要素で <code>media=</code> 属性を付けて特定のメディアを対象とする。</li> - <li><a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用して<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアの状態を検査および監視</a>する。</li> -</ul> - -<div class="note"> -<p><strong>メモ:</strong> このページの例では説明のために CSS の <code>@media</code> を使用していますが、基本構文はすべての種類のメディアクエリで共通です。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>メディアクエリは、任意の<em>メディアタイプ</em>と任意の数の<em>メディア特性</em>の式で構成されます。<em>論理演算子</em>を使用して、複数のクエリを様々な形で組み合わせることができます。メディアクエリは大文字・小文字の区別がありません。</p> - -<p>メディアクエリは、 (指定されていれば) メディアタイプが文書を表示している端末に一致しており、<em>かつ</em>すべてのメディア特性式が真と計算されれば、真と計算されます。不明なメディアタイプに対するクエリは常に偽です。</p> - -<div class="note"> -<p><strong>メモ:</strong> {{HTMLElement("link")}} タグによるメディアクエリ付きのスタイルシートは、クエリが偽を返しても<a href="http://scottjehl.github.com/CSS-Download-Tests/">ダウンロードされます</a>。にもかかわらず、中身はクエリが真に変わらない限り、適用されません。</p> -</div> - -<h3 id="Media_types" name="Media_types">メディアタイプ</h3> - -<p><em>メディアタイプ</em>は端末の全般的なカテゴリを説明します。 <code>not</code> 又は <code>only</code> の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 <code>all</code> タイプが暗黙に含まれています。</p> - -<dl> - <dt><code id="all">all</code></dt> - <dd>すべての端末に一致します。</dd> - <dt><code id="print">print</code></dt> - <dd>ページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのものです。 (これらの形式に特有の整形上の問題について詳しくは、<a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a>をご覧ください。)</dd> - <dt><code id="screen">screen</code></dt> - <dd>主に画面のためのものです。</dd> - <dt><code id="speech">speech</code></dt> - <dd>主に音声合成のためのものです。</dd> -</dl> - -<div class="note"><strong>非推奨のメディアタイプ:</strong> CSS2.1 及び<a href="https://drafts.csswg.org/mediaqueries-3/#background">メディアクエリ 3</a> では、いくつかの追加のメディアタイプ (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) を定義しましたが、これらは<a href="http://dev.w3.org/csswg/mediaqueries/#media-types">メディアクエリ 4</a> で非推奨となり、使用するべきではありません。 <code>aural</code> タイプは似ている <code>speech</code> で置き換えられました。</div> - -<h3 id="Media_features" name="Media_features">メディア特性</h3> - -<p><em>メディア特性</em>は、特定の{{glossary("user agent", "ユーザーエージェント")}}や、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。</p> - -<table> - <thead> - <tr> - <th>名前</th> - <th>概要</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{cssxref("@media/any-hover", "any-hover")}}</td> - <td>入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> - <td>入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> - <td>ビューポートの幅対高さのアスペクト比</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color", "color")}}</td> - <td>出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> - <td>ユーザーエージェント及び出力端末が対応しているおよその色の範囲</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/color-index", "color-index")}}</td> - <td>出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> - <td>出力端末の幅対高さのアスペクト比</td> - <td>Media Queries Level 4 で非推奨。</td> - </tr> - <tr> - <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> - <td>出力端末のレンダリング面の高さ</td> - <td>Media Queries Level 4 で非推奨。</td> - </tr> - <tr> - <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> - <td>出力端末のレンダリング面の幅</td> - <td>Media Queries Level 4 で非推奨。</td> - </tr> - <tr> - <td>{{cssxref("@media/display-mode", "display-mode")}}</td> - <td>ウェブアプリのマニフェストの <a href="/ja/docs/Web/Manifest#display"><code>display</code></a> メンバーで指定されているアプリケーションの表示モード</td> - <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 仕様書</a>で定義</td> - </tr> - <tr> - <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> - <td>ユーザーエージェントがカラーパレットを制限しているかどうかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/grid", "grid")}}</td> - <td>出力端末はグリッドとビットマップ画面のどちらを使用するか</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/height", "height")}}</td> - <td>ビューポートの高さ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/hover", "hover")}}</td> - <td>主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> - <td>ユーザーエージェントまたはその下の OS が色を反転しているか</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/light-level", "light-level")}}</td> - <td>環境の明るさレベル</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/monochrome", "monochrome")}}</td> - <td>出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/orientation", "orientation")}}</td> - <td>ビューポートの向き</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> - <td>ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> - <td>ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/pointer", "pointer")}}</td> - <td>主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> - <td>ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> - <td>ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> - <td>ユーザーがページであまり動きを望まないかどうか</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> - <td>ユーザーが透明度を下げるよう望んでいるかどうか</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/resolution", "resolution")}}</td> - <td>出力端末のピクセル密度</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scan", "scan")}}</td> - <td>出力端末のスキャン処理方式</td> - <td></td> - </tr> - <tr> - <td>{{cssxref("@media/scripting", "scripting")}}</td> - <td>スクリプト (例えば JavaScript) が利用できるかを検出する</td> - <td>Media Queries Level 5 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/update-frequency", "update")}}</td> - <td>どれだけの頻度で出力端末がコンテンツの表示を変更できるか</td> - <td>Media Queries Level 4 で追加。</td> - </tr> - <tr> - <td>{{cssxref("@media/width", "width")}}</td> - <td>ビューポートの幅</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="Logical_operators" name="Logical_operators">論理演算子</h3> - -<p><em>論理演算子</em> <code>not</code>, <code>and</code>, <code>only</code> を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。</p> - -<h4 id="and" name="and"><code>and</code></h4> - -<p><code>and</code> 演算子は、複数のメディア特性を一つのメディアクエリにまとめるために使用し、クエリが真になるためには結合されたそれぞれの特性が真を返す必要があります。メディア特性とメディアタイプを組み合わせるためにも使用します。</p> - -<h4 id="not" name="not"><code>not</code></h4> - -<p><code>not</code> 演算子は、メディアクエリを否定するために使用し、もしクエリが偽を返せば真を返します。カンマ区切りのクエリのリストの中にある場合、適用された特定のクエリのみを否定します。 <code>not</code> 演算子を使用する場合は、メディアタイプも指定<em>しなければなりません</em>。</p> - -<div class="note"> -<p><strong>メモ:</strong> Level 3 では、 <code>not</code> キーワードは個別のメディア特性式を否定するために使用することはできず、メディアクエリ全体に対してしか使用できません。</p> -</div> - -<h4 id="only" name="only"><code>only</code></h4> - -<p><code>only</code> 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 <code>only</code> を使用しない場合、古いブラウザーは <code>screen and (max-width: 500px)</code> というクエリを単なる <code>screen</code> として解釈してクエリの注釈を無視し、あらゆる画面にスタイルを適用します。 <code>only</code> 演算子を使用する場合は、メディアタイプも指定<em>しなければなりません</em>。</p> - -<h4 id="comma" name="comma"><code>,</code> (カンマ)</h4> - -<p>カンマは、複数のメディアクエリを一つのメディアクエリに結合するために使用します。カンマで区切ったリストの中にあるそれぞれのクエリは、他とは別なものとして扱われます。よって、リストの中の何れかのクエリが真になれば、メディアステートメント全体が真を返します。言い換えれば、リストは論理 <code>or</code> 演算子のように動作します。</p> - -<h2 id="Targeting_media_types" name="Targeting_media_types">メディアタイプの対象化</h2> - -<p>メディアタイプは、その端末の一般的なカテゴリを記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや音声ベースのスクリーンリーダーのような、特殊な端末を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。</p> - -<pre class="brush: css">@media print { ... }</pre> - -<p>複数の端末を対象にすることもできます。例えば、この <code>@media</code> ルールは2つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。</p> - -<pre class="brush: css">@media screen, print { ... }</pre> - -<p>すべてのメディアタイプの一覧は、<a class="internal" href="#Media_types">メディアタイプ</a>を参照してください。とても広い用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりに<em>メディア特性</em>を使用してください。</p> - -<h2 id="Targeting_media_features" name="Targeting_media_features">メディア特性を対象とする</h2> - -<p>メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。この例はユーザーの<em>主な</em>入力手段 (マウスなど) が要素の上で停止できる時にスタイルを適用します。</p> - -<pre class="brush: css">@media (hover: hover) { ... }</pre> - -<p>多くのメディア特性は<em>範囲特性</em>であり、 "min-" 又は "max-" の接頭辞をつけて「最小条件」又は「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12,450px 以下である場合のみ、スタイルを適用します。</p> - -<pre class="brush: css">@media (max-width: 12450px) { ... }</pre> - -<p>値を指定せずにメディア特性クエリを作成した場合、特性の値がゼロ (または Level 4 では <code>none</code>) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。</p> - -<pre class="brush: css">@media (color) { ... }</pre> - -<p>ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。</p> - -<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre> - -<p>その他の<a href="#Media_features">メディア特性</a>の例については、それぞれの特性のリファレンスページを参照してください。</p> - -<h2 id="Creating_complex_media_queries" name="Creating_complex_media_queries">複雑なメディアクエリの作成</h2> - -<p>時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 <code>not</code>, <code>and</code>, <code>only</code> の<strong>論理演算子</strong>の出番です。その上、複数のメディアクエリを<strong>カンマ区切りのリスト</strong>で結合することができます。これによって、同じスタイルを異なる場面に適用することができます。</p> - -<p>以前の例で、すでに <code>and</code> 演算子がメディア<em>タイプ</em>とメディア<em>特性</em>をグループ化するために使用されているのを見ました。 <code>and</code>演算子は、複数のメディア特性を1つのメディアクエリに結合することもできます。一方で <code>not</code> 演算子は、メディアクエリを反転し、基本的に普通の意味とは逆になります。 <code>only</code> 演算子は古いブラウザーでスタイルが適用されるのを防止します。</p> - -<div class="note"> -<p><strong>メモ:</strong> 多くの場合、 <code>all</code> メディアタイプが他のタイプが指定されない場合に既定で使用されます。しかし、 <code>not</code> 又は <code>only</code> 演算子を使用する場合は、メディアタイプを明示的に指定する必要があります。</p> -</div> - -<h3 id="Combining_multiple_types_or_features" name="Combining_multiple_types_or_features">複数のタイプ又は特性の組み合わせ</h3> - -<p><code>and</code> キーワードはメディア特性をメディアタイプ、<em>又は</em>他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。</p> - -<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<p>スタイルを画面に限定する場合は、メディア特性に <code>screen</code> メディアタイプを結合します。</p> - -<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> - -<h3 id="Testing_for_multiple_queries" name="Testing_for_multiple_queries">複数のクエリの検査</h3> - -<p>カンマ区切りのリストを使うと、ユーザーの端末が様々なメディアタイプ、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下の規則はユーザーの端末の高さが 680px 以上<em>又は</em>画面が縦長モードであるときにスタイルが適用されます。</p> - -<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> - -<p>上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリが適用され、 media ステートメントはやはり真を返します。</p> - -<h3 id="Inverting_a_querys_meaning" name="Inverting_a_querys_meaning">クエリの意味の反転</h3> - -<p><code>not</code> キーワードはメディアクエリ全体の意味を反転します。これは、適用される特定のメディアクエリを単純に反転します。 (従って、メディアクエリのカンマ区切りのリストの中では、それぞれのメディアクエリは適用されません。) <code>not</code> キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 <code>not</code> は以下のクエリの最後に評価されます。</p> - -<pre class="brush: css">@media not all and (monochrome) { ... } -</pre> - -<p>... よって、上記のクエリは次のように評価されます。</p> - -<pre class="brush: css">@media not (all and (monochrome)) { ... } -</pre> - -<p>... このようにはなりません。</p> - -<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre> - -<p>他の例を挙げます。以下のメディアクエリは、</p> - -<pre class="brush: css">@media not screen and (color), print and (color) { ... } -</pre> - -<p>... 次のように評価されます。</p> - -<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre> - -<h3 id="Improving_compatibility_with_older_browsers" name="Improving_compatibility_with_older_browsers">古いブラウザーとの互換性の維持</h3> - -<p><code>only</code> キーワードは、メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。<em>最近のブラウザーでは効果がありません。</em></p> - -<pre class="brush: css">@media only screen and (color) { ... } -</pre> - -<h2 id="Syntax_improvements_in_Level_4" name="Syntax_improvements_in_Level_4">Level 4 での構文の拡張</h2> - -<p>Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために<em>範囲コンテキスト</em>を追加しています。例えば、幅について <code>max-</code> の特性を使用する場合は、以下のように書くことができます。</p> - -<div class="note"> -<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/ja/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p> -</div> - -<pre class="brush: css">@media (max-width: 30em) { ... }</pre> - -<p>Media Queries Level 4 では、これを次のように書くことができます。</p> - -<pre class="brush: css">@media (width <= 30em) { ... }</pre> - -<p><code>min-</code> および <code>max-</code> を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。</p> - -<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> - -<p>Level 4 の構文に変換すると、次のようになります。</p> - -<pre class="brush: css">@media (30em <= width <= 50em ) { ... } -</pre> - -<p>また、 Media Queries Level 4 では <strong>and</strong>, <strong>not</strong>, <strong>or</strong> を伴う完全な論理代数を使ったメディアクエリの組み合わせの方法も追加されました。</p> - -<h3 id="Negating_a_feature_with_not" name="Negating_a_feature_with_not"><code>not</code> による特性の否定</h3> - -<p>メディア特性を <code>not()</code> を使用して囲むことで、クエリでその特性を否定します。例えば、 <code>not(hover)</code> は端末でホバーができない場合に一致します。</p> - -<pre class="brush: css">@media (not(hover)) { ... }</pre> - -<h3 id="or_による特性の結合"><code>or</code> による特性の結合</h3> - -<p><code>or</code> を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば <code>true</code> になります。例えば、次のクエリは端末がモノクロ画面である、またはホバーができるかどうかを検査します。</p> - -<pre class="brush: css">@media (not (color)) or (hover) { ... } -</pre> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Using_media_queries_from_code">プログラムからのメディアクエリの検査</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li> - <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 拡張メディア特性</a></li> - <li><a href="/ja/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 拡張メディア特性</a></li> -</ul> diff --git a/files/ja/web/css/media_queries/using_media_queries/index.md b/files/ja/web/css/media_queries/using_media_queries/index.md new file mode 100644 index 0000000000..297e398020 --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries/index.md @@ -0,0 +1,225 @@ +--- +title: メディアクエリーの使用 +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - 上級者 + - CSS + - ガイド + - ウェブ + - メディア + - メディアクエリー + - レスポンシブデザイン +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +{{CSSRef}} + +**メディアクエリー**は、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。 + +メディアクエリーは以下の用途で使用されます。 + +- [CSS](/ja/docs/Web/CSS) の {{cssxref("@media")}} および {{cssxref("@import")}} [アットルール](/ja/docs/Web/CSS/At-rule)により、条件付きでスタイルを適用する。 +- {{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの [HTML](/ja/docs/Web/HTML) 要素で `media=` 属性を付けて特定のメディアを対象とする。 +- [メディアの状態の検査と監視](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)をするために、[JavaScript](/ja/docs/Web/JavaScript) で {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用する + +> **Note:** このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。 + +## 構文 + +メディアクエリーは、任意の*メディア種別*と任意の数の*メディア特性*の式で構成されます。*論理演算子*を使用して、複数のクエリーを様々な形で組み合わせることができます。メディアクエリーは大文字小文字の区別がありません。 + +- [メディア種別](/ja/docs/Web/CSS/@media#メディア種別)は、メディアクエリーを適用する機器の大まかな分類を `all`, `print`, `screen`, `speech` で定義します。 + + 種別は省略可能 (`all` と見なされる) ですが、 `not` や `only` 論理演算子を使用する場合は例外です。 +- [メディア特性](/ja/docs/Web/CSS/@media#メディア特性)は、{{glossary("user agent", "ユーザーエージェント")}}、出力機器、環境などの特定の特徴を記述します。 {{cssxref("@media/any-hover", "any-hover")}}, {{cssxref("@media/any-pointer", "any-pointer")}}, {{cssxref("@media/aspect-ratio", "aspect-ratio")}}, {{cssxref("@media/color", "color")}}, {{cssxref("@media/color-gamut", "color-gamut")}}, {{cssxref("@media/color-index", "color-index")}}, {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}}, {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}}, {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}}, {{cssxref("@media/display-mode", "display-mode")}}, {{cssxref("@media/forced-colors", "forced-colors")}}, {{cssxref("@media/grid", "grid")}}, {{cssxref("@media/height", "height")}}, {{cssxref("@media/hover", "hover")}}, {{cssxref("@media/inverted-colors", "inverted-colors")}}, {{cssxref("@media/monochrome", "monochrome")}}, {{cssxref("@media/orientation", "orientation")}}, {{cssxref("@media/overflow-block", "overflow-block")}}, {{cssxref("@media/overflow-inline", "overflow-inline")}}, {{cssxref("@media/pointer", "pointer")}}, {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}, {{cssxref("@media/prefers-contrast", "prefers-contrast")}}, {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}, {{cssxref("@media/resolution", "resolution")}}, {{cssxref("@media/scripting", "scripting")}}, {{cssxref("@media/update-frequency", "update")}}, {{cssxref("@media/width", "width")}} があります。 + + 例えば、{{cssxref("@media/hover", "hover")}} という機能では、端末が要素の上で停止したことを検出できるかどうかをクエリーで検査することができます。 + メディア特性式は、その存在や値をテストするもので、完全にオプションです。 + それぞれのメディア特性式は括弧で囲む必要があります。 + +- [論理演算子](/ja/docs/Web/CSS/@media#論理演算子)は、複合的なメディアクエリーを構成するために使用します。 `not`, `and`, `only` があります。 + また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。 + +メディア種別（指定されている場合）が文書を表示する端末と照合され、かつ、すべてのメディア機能式が `true` と計算されると、メディアクエリーは true と計算されます。 +未知のメディア種別を含むクエリは常に false となります。 + +> **Note:** {{HTMLElement("link")}} タグにメディアクエリーがついていた場合、スタイルシートはクエリーが `false` を返したとしても[ダウンロードされます](https://scottjehl.github.io/CSS-Download-Tests/)が、ダウンロードの優先度ははるかに低くなります。 +> ただし、その内容は、クエリーの結果が `true` にならない限り適用されません。 +> なぜこのようになるかは、 Tomayac 氏のブログ [Why Browser Download Stylesheet with Non-Matching Media Queries](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2) に書かれています。 + + +## メディア種別を対象にする + +メディア種別は、その機器の一般的な分類を記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや、音声ベースの画面リーダーのような特殊な機器を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。 + +```css +@media print { ... } +``` + +複数の機器を対象にすることもできます。例えば、この `@media` ルールは 2 つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。 + +```css +@media screen, print { ... } +``` + +すべてのメディア種別の一覧は、[メディア種別](/ja/docs/Web/CSS/@media#メディア種別)を参照してください。とても大まかな用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりに*メディア特性*を使用してください。 + +## メディア特性を対象にする + +メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。 +例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。 +この例は、ユーザーの*主な*入力手段（マウスなど）が要素の上で停止したことを検出できる場合にスタイルを適用します。 + +```css +@media (hover: hover) { ... } +``` + +多くのメディア特性は*範囲特性*であり、 "min-" または "max-" の接頭辞をつけて「最小条件」または「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12450px 以下である場合のみ、スタイルを適用します。 + +```css +@media (max-width: 12450px) { ... } +``` + +値を指定せずにメディア特性クエリーを作成した場合、特性の値がゼロ (または Level 4 では `none`) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。 + +```css +@media (color) { ... } +``` + +ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリーの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。 + +```css +@media speech and (aspect-ratio: 11/5) { ... } +``` + +その他の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)の例については、それぞれの特性のリファレンスページを参照してください。 + +## 複合メディアクエリーの作成 + +複数の条件に依存するメディアクエリーを作成したくなる場合があるかもしれません。これは、 `not`, `and`, `only` の**論理演算子**の出番です。その上、複数のメディアクエリーを**カンマ区切りのリスト**で結合することができます。これによって、同じスタイルを異なる場面で適用することができます。 + +以前の例で、すでに `and` 演算子がメディア*種別*とメディア*特性*をグループ化するために使用されているのを見ました。 +`and` 演算子は、複数のメディア特性を 1 つのメディアクエリーに結合することもできます。一方で `not` 演算子は、メディアクエリーを反転し、基本的に普通の意味とは逆になります。 +`only` 演算子は古いブラウザーでスタイルが適用されるのを防止します。 + +> **Note:** 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。 +しかし、 `not` または `only` 演算子を使用する場合は、メディア種別を明示的に指定する必要があります。 + +### 複数の種別または特性の組み合わせ + +`and` キーワードはメディア特性をメディア種別、*または*他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。 + +```css +@media (min-width: 30em) and (orientation: landscape) { ... } +``` + +スタイルを画面に限定する場合は、メディア特性に `screen` メディア種別を結合します。 + +```css +@media screen and (min-width: 30em) and (orientation: landscape) { ... } +``` + +### 複数のクエリーの検査 + +カンマ区切りのリストを使うと、ユーザーの端末が様々なメディア種別、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下のルールはユーザーの端末の高さが 680px 以上*または*画面が縦長モードであるときにスタイルが適用されます。 + +```css +@media (min-height: 680px), screen and (orientation: portrait) { ... } +``` + +上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリーが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリーが適用され、 media ステートメントはやはり真を返します。 + +### クエリーの意味の反転 + +`not` キーワードはメディアクエリー全体の意味を反転します。これは、適用される特定のメディアクエリーを単純に反転します。 +(従って、メディアクエリーのカンマ区切りのリストにあるそれぞれのメディアクエリーには適用されません。) +`not` キーワードは個別の特性クエリーに対して使用することができず、クエリー全体のみを反転します。 `not` は以下のクエリーの最後に評価されます。 + +```css +@media not all and (monochrome) { ... } +``` + +... よって、上記のクエリーは次のように評価されます。 + +```css +@media not (all and (monochrome)) { ... } +``` + +... このようにはなりません。 + +```css example-bad +@media (not all) and (monochrome) { ... } +``` + +他の例を挙げます。以下のメディアクエリーは、 + +```css +@media not screen and (color), print and (color) { ... } +``` + +... 次のように評価されます。 + +```css +@media (not (screen and (color))), print and (color) { ... } +``` + +### 古いブラウザーとの互換性の維持 + +`only` キーワードは、メディア特性がついたメディアクエリーに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。*最近のブラウザーでは効果がありません。* + +```css +@media only screen and (color) { ... } +``` + +## Level 4 での構文の拡張 + +Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリーを作れるよう構文が拡張されました。 +Level 4 はこのようなクエリーを書くために*範囲コンテキスト*を追加しています。例えば、幅について `max-` の特性を使用する場合は、以下のように書くことができます。 + +> **Note:** Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は [`@media` ブラウザー互換性一覧表](/ja/docs/Web/CSS/@media#ブラウザーの互換性)を参照してください。 + +```css +@media (max-width: 30em) { ... } +``` + +Media Queries Level 4 では、これを次のように書くことができます。 + +```css +@media (width <= 30em) { ... } +``` + +`min-` および `max-` を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。 + +```css +@media (min-width: 30em) and (max-width: 50em) { ... } +``` + +Level 4 の構文に変換すると、次のようになります。 + +```css +@media (30em <= width <= 50em ) { ... } +``` + +また、 Media Queries Level 4 では **and**, **not**, **or** を伴う完全な論理代数を使ったメディアクエリーの組み合わせの方法も追加されました。 + +### `not` による特性の否定 + +`not()` を使用してメディア特性を囲むと、クエリーのその特性を否定します。例えば、 `not(hover)` は端末でホバーができない場合に一致します。 + +```css +@media (not(hover)) { ... } +``` + +### + +`or` を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば `true` になります。例えば、次のクエリーは端末がモノクロ画面である、またはホバーができるかどうかを検査します。 + +```css +@media (not (color)) or (hover) { ... } +``` + +## 関連情報 + +- [プログラムからのメディアクエリーの検査](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries) +- [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries) +- [Mozilla 拡張メディア特性](/ja/docs/Web/CSS/Mozilla_Extensions#media_features) +- [WebKit 拡張メディア特性](/ja/docs/Web/CSS/WebKit_Extensions#media_features) 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 deleted file mode 100644 index 02eaddac0f..0000000000 --- a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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 ---- -<p><strong>メディアクエリ</strong>は、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。</p> - -<h2 id="Reduced_Motion" name="Reduced_Motion">動きの縮減</h2> - -<p>点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。</p> - -<p>また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。</p> - -<h3 id="構文">構文</h3> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>システムが把握している設定をユーザーが行っていないことを示します。</dd> - <dt><code><dfn>reduce</dfn></code></dt> - <dd>ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。</dd> -</dl> - -<h3 id="Example">Example</h3> - -<p>この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="animation">animated box</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: 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; - } -} -</pre> - -<h2 id="High_Contrast_Mode" name="High_Contrast_Mode">高コントラストモード</h2> - -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-ms-high-contrast</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。</p> - -<p>これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。</p> - -<h3 id="Syntax_2" name="Syntax_2">構文</h3> - -<p><strong><code>-ms-high-contrast</code></strong> メディア特性は、以下の値のうちの一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>active</code></dt> - <dd> - <p>配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。</p> - </dd> - <dt><code>black-on-white</code></dt> - <dd> - <p>配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。</p> - </dd> - <dt><code>white-on-black</code></dt> - <dd> - <p>配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。</p> - </dd> -</dl> - -<h3 id="Example_2" name="Example_2">例</h3> - -<p>以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。</p> - -<pre class="brush: css">@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'); } -} -</pre> diff --git a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.md b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.md new file mode 100644 index 0000000000..e81759e788 --- /dev/null +++ b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.md @@ -0,0 +1,87 @@ +--- +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` + - : ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。 + +### 例 + +この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。 + +#### HTML + +```html +<div class="animation">animated box</div> +``` + +#### CSS + +```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}} + +**-ms-high-contrast** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)、 [Microsoft 拡張](/ja/docs/Web/CSS/Microsoft_extensions)であり、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。 + +これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。 + +## 構文 + +**`-ms-high-contrast`** メディア特性は、以下の値のうちの一つで指定します。 + +### 値 + +- `active` + - : 配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。 +- `black-on-white` + - : 配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。 +- `white-on-black` + - : 配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。 + +## 例 + +以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。 + +```css +@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'); } +} +``` diff --git a/files/ja/web/html/element/img/index.html b/files/ja/web/html/element/img/index.html index 65c2c41d65..7306d6129c 100644 --- a/files/ja/web/html/element/img/index.html +++ b/files/ja/web/html/element/img/index.html @@ -159,7 +159,7 @@ translation_of: Web/HTML/Element/img <dt>{{htmlattrdef("sizes")}}</dt> <dd>ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。 <ol> - <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#syntax">メディア条件</a>。リスト内の最後のアイテムでは省略しなければなりません。</li> + <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#構文">メディア条件</a>。リスト内の最後のアイテムでは省略しなければなりません。</li> <li>ソースサイズ値。</li> </ol> diff --git a/files/ja/web/html/element/link/index.html b/files/ja/web/html/element/link/index.html index 512c41be30..3b64f38381 100644 --- a/files/ja/web/html/element/link/index.html +++ b/files/ja/web/html/element/link/index.html @@ -163,7 +163,7 @@ translation_of: Web/HTML/Element/link <p><strong>注:</strong></p> <ul> - <li>HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これは<a href="/ja/docs/Web/CSS/@media">メディアタイプとグループ</a> で、<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code> などの使用可能な値が定義されています。 HTML5 ではこれがあらゆる<a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a>に拡張され、 HTML 4 で使用できる値の上位互換となっています。</li> + <li>HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これは<a href="/ja/docs/Web/CSS/@media">メディア種別とグループ</a> で、<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code> などの使用可能な値が定義されています。 HTML5 ではこれがあらゆる<a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a>に拡張され、 HTML 4 で使用できる値の上位互換となっています。</li> <li><a href="/ja/docs/Web/CSS/Media_queries">CSS3 メディアクエリ</a>に対応していないブラウザーは、リンクを適切に理解するとは限りません。 HTML 4 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。</li> </ul> </div> diff --git a/files/ja/web/html/element/portal/index.html b/files/ja/web/html/element/portal/index.html index 02f26e18a2..af918dff45 100644 --- a/files/ja/web/html/element/portal/index.html +++ b/files/ja/web/html/element/portal/index.html @@ -60,7 +60,7 @@ translation_of: Web/HTML/Element/portal <p>事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の {{cssxref("display")}} プロパティの値を <code>none</code> にして非表示にしてください。</p> -<p>ポータルがアクティブ化している間にアニメーションを使用する場合は、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>を尊重してください。</p> +<p>ポータルがアクティブ化している間にアニメーションを使用する場合は、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} <a href="/ja/docs/Web/CSS/@media#メディア特性">メディア特性</a>を尊重してください。</p> <h2 id="Specifications">仕様書</h2> diff --git a/files/ja/web/html/link_types/preload/index.html b/files/ja/web/html/link_types/preload/index.html index 50b6a46987..c3a740da87 100644 --- a/files/ja/web/html/link_types/preload/index.html +++ b/files/ja/web/html/link_types/preload/index.html @@ -139,7 +139,7 @@ translation_of: Web/HTML/Link_types/preload <h2 id="Including_media">media を含める</h2> -<p><code><link></code> 要素の優れた機能のひとつが、 {{htmlattrxref("media", "link")}} 属性を受け入れることができることです。この属性は、<a href="/ja/docs/Web/CSS/@media#media_types">メディア種別</a>や本格的な<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリー</a>を受け付けることができるので、レスポンシブな先読みを行うことができます。</p> +<p><code><link></code> 要素の優れた機能のひとつが、 {{htmlattrxref("media", "link")}} 属性を受け入れることができることです。この属性は、<a href="/docs/Web/CSS/@media#メディア種別">メディア種別</a>や本格的な<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリー</a>を受け付けることができるので、レスポンシブな先読みを行うことができます。</p> <p>例を見てみましょう (GitHub 上の<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">ソースコード</a>、<a href="https://mdn.github.io/html-examples/link-rel-preload/media/">デモ</a>)。</p> diff --git a/files/ja/web/progressive_web_apps/loading/index.html b/files/ja/web/progressive_web_apps/loading/index.html index 0e7733d524..c47a23694a 100644 --- a/files/ja/web/progressive_web_apps/loading/index.html +++ b/files/ja/web/progressive_web_apps/loading/index.html @@ -34,7 +34,7 @@ translation_of: Web/Progressive_web_apps/Loading <pre class="brush: html"><script src="app.js" defer></script> </pre> -<p>それらは文書自体が解析された<em>後</em>にダウンロードされて実行されるので、それは HTML 構造のレンダリングをブロックしません。 CSS ファイルを分割して次のようにメディアタイプを追加することもできます。</p> +<p>それらは文書自体が解析された<em>後</em>にダウンロードされて実行されるので、それは HTML 構造のレンダリングをブロックしません。 CSS ファイルを分割して次のようにメディア種別を追加することもできます。</p> <pre class="brush: html"><link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> |