diff options
Diffstat (limited to 'files/ja/web/css/@media')
69 files changed, 2601 insertions, 2653 deletions
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) |