diff options
Diffstat (limited to 'files/ja/web/css/@media')
41 files changed, 3173 insertions, 0 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 new file mode 100644 index 0000000000..0f0a90b57e --- /dev/null +++ b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html @@ -0,0 +1,58 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}</p> diff --git a/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html b/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html new file mode 100644 index 0000000000..5f41e28efb --- /dev/null +++ b/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-mac-graphite-theme' +slug: Web/CSS/@media/-moz-mac-graphite-theme +tags: + - '-moz-mac-graphite-theme' + - '@media' + - CSS + - Mozilla 拡張 + - Non-standard + - メディア特性 +translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme +--- +<p>{{CSSRef}}{{Non-standard_Header}}</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (例えば to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p> +</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-mac-graphite-theme</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーが Mac OS X の "Graphite" テーマを有効にしているかどうかでスタイルを適用するために使用することができます。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<dl> + <dt>{{CSSxRef("<integer>")}}</dt> + <dd>ユーザーが Mac OS X で "Graphite" を使用するよう端末を設定している場合、これは 1 になります。ユーザーが標準の青い表示を使用しているか、 Mac OS X ではない場合、これは 0 になります。</dd> +</dl> + +<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br> + <strong>min/max 接頭辞の受付:</strong> いいえ</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>この特性は、 CSS の {{CSSxRef(":-moz-system-metric/mac-graphite-theme", ":-moz-system-metric(mac-graphite-theme)")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と深く関係しています。</li> +</ul> diff --git a/files/ja/web/css/@media/-moz-maemo-classic/index.html b/files/ja/web/css/@media/-moz-maemo-classic/index.html new file mode 100644 index 0000000000..dfecdc64b9 --- /dev/null +++ b/files/ja/web/css/@media/-moz-maemo-classic/index.html @@ -0,0 +1,30 @@ +--- +title: '-moz-maemo-classic' +slug: Web/CSS/@media/-moz-maemo-classic +tags: + - '@media' + - CSS + - Mozilla 拡張 + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-maemo-classic +--- +<p>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</p> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-maemo-classic</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーエージェントが Maemo のオリジナルのテーマを使用しているかどうかでスタイルを適用するために使用することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<dl> + <dt>{{CSSxRef("<integer>")}}</dt> + <dd>ユーザーエージェントがオリジナルのテーマで Maemo を使用している場合、これは 1 です。もっと新しい Fremantle テーマを使用している場合は、これは 0 です。</dd> +</dl> + +<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br> + <strong>min/max 接頭辞の受付:</strong> いいえ</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>この特性は CSS の {{CSSxRef(":-moz-system-metric(maemo-classic)")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>に対応します。</li> +</ul> diff --git a/files/ja/web/css/@media/-moz-os-version/index.html b/files/ja/web/css/@media/-moz-os-version/index.html new file mode 100644 index 0000000000..10e70bc450 --- /dev/null +++ b/files/ja/web/css/@media/-moz-os-version/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-os-version' +slug: Web/CSS/@media/-moz-os-version +tags: + - '@media' + - CSS + - Mozilla 拡張 + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-os-version +--- +<div>{{cssref}}{{Non-standard_header}} +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p> +</div> +</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-os-version</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーの Microsoft Windows のバージョンによってスタイルを適用するために使用することができます。これはユーザーのオペレーティングシステムのバージョンに応じてアプリケーションのスキンやその他のクロームコードを適用するのに便利です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>windows-win7</code></dt> + <dd>ユーザーは Windows 7 オペレーティングシステムを利用しています。</dd> + <dt><code>windows-win8</code></dt> + <dd>ユーザーは Windows 8 オペレーティングシステムを利用しています。</dd> + <dt><code>windows-win10</code></dt> + <dd>ユーザーは Windows 10 オペレーティングシステムを利用しています。</dd> +</dl> + +<p><br> + <strong>メディア:</strong> {{cssxref("Media/Visual")}}<br> + <strong>min/max 接頭辞の受付:</strong> いいえ</p> diff --git a/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html new file mode 100644 index 0000000000..81a7c78396 --- /dev/null +++ b/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-windows-accent-color-in-titlebar' +slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar +tags: + - '@media' + - CSS + - Mozilla 拡張 + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar +--- +<p>{{CSSRef}}{{Non-standard_Header}}</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p> +</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-moz-windows-accent-color-in-titlebar</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、 Microsoft Windows のタイトルバーで強調色が有効であるかどうかでスタイルを適用するために使用することができます。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<dl> + <dt>{{CSSxRef("<integer>")}}</dt> + <dd>最新の Windows のバージョンでは、ウィンドウのタイトルバーで強調色が有効であれば、これは 1 です。それ以外は 0 です。</dd> +</dl> + +<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br> + <strong>min/max 接頭辞の受付:</strong> いいえ</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: css">@media (-moz-windows-accent-color-in-titlebar: 1) { + h1 { + color: -moz-win-accentcolortext; + } + + body { + background-color: -moz-win-accentcolor; + } +}</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>この特性は、 CSS から Windows 強調色及び重複テキスト強調色にアクセスできるという点で、 Mozilla 独自の {{CSSxRef("<color>")}} 値である <code>-moz-win-accentcolor</code> 及び <code>-moz-win-accentcolortext</code> と深く関係しています。</li> +</ul> diff --git a/files/ja/web/css/@media/-moz-windows-classic/index.html b/files/ja/web/css/@media/-moz-windows-classic/index.html new file mode 100644 index 0000000000..3c8754a33b --- /dev/null +++ b/files/ja/web/css/@media/-moz-windows-classic/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-windows-classic' +slug: Web/CSS/@media/-moz-windows-classic +tags: + - '-moz-windows-classic' + - '@media' + - CSS + - Mozilla 拡張 + - Non-standard + - メディア特性 +translation_of: Archive/Web/CSS/@media/-moz-windows-classic +--- +<p>{{CSSRef}}{{Non-standard_Header}}</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<dl> + <dt>{{CSSxRef("<integer>")}}</dt> + <dd><span class="seoSummary">Windows をテーマなしで (uxtheme を使用しない classic モードで) 使用しているユーザーの場合は、 1 になります。そうでなければ 0 になります。</span></dd> +</dl> + +<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br> + <strong>min/max 接頭辞の受け付け:</strong> なし</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>この機能は CSS の {{CSSxRef(":-moz-system-metric/windows-classic", ":-moz-system-metric(windows-classic)")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>に対応します。</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li> + <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li> +</ul> diff --git a/files/ja/web/css/@media/-moz-windows-theme/index.html b/files/ja/web/css/@media/-moz-windows-theme/index.html new file mode 100644 index 0000000000..288987c972 --- /dev/null +++ b/files/ja/web/css/@media/-moz-windows-theme/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-windows-theme' +slug: Web/CSS/@media/-moz-windows-theme +tags: + - '-moz-windows-theme' + - '@media' + - CSS + - Mozilla 拡張 + - Non-standard + - メディア特性 + - 標準外 +translation_of: Archive/Web/CSS/@media/-moz-windows-theme +--- +<p>{{CSSRef}}{{Non-standard_Header}}</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p> +</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-windows-theme</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーの Windows のテーマに合わせてアプリケーションのスキンやその他のクロムコードをカスタマイズするのに便利です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>-moz-windows-theme</code> 特性は現在使用されている Windwos テーマを示すキーワード値です。</p> + +<h3 id="Values" name="Values">値</h3> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br> + <strong>min/max 接頭辞の受け付け:</strong> なし</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li> +</ul> 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 new file mode 100644 index 0000000000..f8a9df9419 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,120 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<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-transform-2d/index.html b/files/ja/web/css/@media/-webkit-transform-2d/index.html new file mode 100644 index 0000000000..3b4ef6a179 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-2d/index.html @@ -0,0 +1,40 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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-3d/index.html b/files/ja/web/css/@media/-webkit-transform-3d/index.html new file mode 100644 index 0000000000..55d1da5975 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-3d/index.html @@ -0,0 +1,75 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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-transition/index.html b/files/ja/web/css/@media/-webkit-transition/index.html new file mode 100644 index 0000000000..3c4b7b5dd6 --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transition/index.html @@ -0,0 +1,61 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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/any-hover/index.html b/files/ja/web/css/@media/any-hover/index.html new file mode 100644 index 0000000000..d7f232b331 --- /dev/null +++ b/files/ja/web/css/@media/any-hover/index.html @@ -0,0 +1,74 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..d05842a639 --- /dev/null +++ b/files/ja/web/css/@media/any-pointer/index.html @@ -0,0 +1,107 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/any-pointer +--- +<div>{{cssref}}</div> + +<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-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/pointer">pointer</a></code> を使用してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>any-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> + +<div class="note"> +<p><strong>メモ:</strong> 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 <code>none</code> はポインティングデバイスがない場合のみ一致します。</p> +</div> + +<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 (any-pointer: fine) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 15px; + border: 1px solid blue; + } +} + +@media (any-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', '#descdef-media-any-pointer', 'any-pointer')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.any-pointer")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code> メディア特性</a></li> +</ul> diff --git a/files/ja/web/css/@media/aspect-ratio/index.html b/files/ja/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..e8e8e36864 --- /dev/null +++ b/files/ja/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,126 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p> diff --git a/files/ja/web/css/@media/color-gamut/index.html b/files/ja/web/css/@media/color-gamut/index.html new file mode 100644 index 0000000000..c052bb4183 --- /dev/null +++ b/files/ja/web/css/@media/color-gamut/index.html @@ -0,0 +1,70 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.color-gamut")}}</p> diff --git a/files/ja/web/css/@media/color-index/index.html b/files/ja/web/css/@media/color-index/index.html new file mode 100644 index 0000000000..baeae1cd1b --- /dev/null +++ b/files/ja/web/css/@media/color-index/index.html @@ -0,0 +1,86 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.color-index")}}</p> diff --git a/files/ja/web/css/@media/color/index.html b/files/ja/web/css/@media/color/index.html new file mode 100644 index 0000000000..f04c2cde11 --- /dev/null +++ b/files/ja/web/css/@media/color/index.html @@ -0,0 +1,93 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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/device-aspect-ratio/index.html b/files/ja/web/css/@media/device-aspect-ratio/index.html new file mode 100644 index 0000000000..4b2f947935 --- /dev/null +++ b/files/ja/web/css/@media/device-aspect-ratio/index.html @@ -0,0 +1,62 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p> diff --git a/files/ja/web/css/@media/device-height/index.html b/files/ja/web/css/@media/device-height/index.html new file mode 100644 index 0000000000..eb44c03918 --- /dev/null +++ b/files/ja/web/css/@media/device-height/index.html @@ -0,0 +1,55 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.device-height")}}</p> diff --git a/files/ja/web/css/@media/device-width/index.html b/files/ja/web/css/@media/device-width/index.html new file mode 100644 index 0000000000..5b43b18229 --- /dev/null +++ b/files/ja/web/css/@media/device-width/index.html @@ -0,0 +1,55 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.device-width")}}</p> diff --git a/files/ja/web/css/@media/display-mode/index.html b/files/ja/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..ccbc387df1 --- /dev/null +++ b/files/ja/web/css/@media/display-mode/index.html @@ -0,0 +1,88 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.display-mode")}}</p> diff --git a/files/ja/web/css/@media/grid/index.html b/files/ja/web/css/@media/grid/index.html new file mode 100644 index 0000000000..20264e07d0 --- /dev/null +++ b/files/ja/web/css/@media/grid/index.html @@ -0,0 +1,91 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.grid")}}</p> diff --git a/files/ja/web/css/@media/height/index.html b/files/ja/web/css/@media/height/index.html new file mode 100644 index 0000000000..c9154f7cd7 --- /dev/null +++ b/files/ja/web/css/@media/height/index.html @@ -0,0 +1,82 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.height")}}</p> diff --git a/files/ja/web/css/@media/hover/index.html b/files/ja/web/css/@media/hover/index.html new file mode 100644 index 0000000000..7c6604d40c --- /dev/null +++ b/files/ja/web/css/@media/hover/index.html @@ -0,0 +1,68 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.hover")}}</p> diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html new file mode 100644 index 0000000000..c513968094 --- /dev/null +++ b/files/ja/web/css/@media/index.html @@ -0,0 +1,157 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@-規則' + - '@media' + - CSS + - Reference + - 条件付き +translation_of: Web/CSS/@media +--- +<div>{{CSSRef}}</div> + +<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> + +<div class="note"> +<p><strong>メモ:</strong> JavaScript では、 <code>@media</code> を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p> + +<pre class="brush: css no-line-numbers">/* コードの最上位 */ +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} + +/* 他の条件付き＠規則の中にネスト */ +@supports (display: flex) { + @media screen and (min-width: 900px) { + article { + display: flex; + } + } +} +</pre> + +<p>メディアクエリの文法について詳しくは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">メディアクエリの利用</a>を参照してください。</p> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> + +<pre class="brush: css">@media print { + body { font-size: 10pt; } +} + +@media screen { + body { font-size: 13px; } +} + +@media screen, print { + body { line-height: 1.2; } +} + +@media only screen + and (min-width: 320px) + and (max-width: 480px) + and (resolution: 150dpi) { + body { line-height: 1.4; } +} +</pre> + +<p>Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。</p> + +<pre class="brush: css">@media (height > 600px) { + body { line-height: 1.4; } +} + +@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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<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> diff --git a/files/ja/web/css/@media/index/index.html b/files/ja/web/css/@media/index/index.html new file mode 100644 index 0000000000..b8b8d56198 --- /dev/null +++ b/files/ja/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: 索引 +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - 索引 +translation_of: Web/CSS/@media/Index +--- +<p>{{CSSRef}}</p> + +<p>{{Index("/ja/docs/Web/CSS/@media")}}</p> diff --git a/files/ja/web/css/@media/inverted-colors/index.html b/files/ja/web/css/@media/inverted-colors/index.html new file mode 100644 index 0000000000..6b5353f258 --- /dev/null +++ b/files/ja/web/css/@media/inverted-colors/index.html @@ -0,0 +1,81 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.inverted-colors")}}</p> diff --git a/files/ja/web/css/@media/monochrome/index.html b/files/ja/web/css/@media/monochrome/index.html new file mode 100644 index 0000000000..82e5a0ece3 --- /dev/null +++ b/files/ja/web/css/@media/monochrome/index.html @@ -0,0 +1,81 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.monochrome")}}</p> diff --git a/files/ja/web/css/@media/orientation/index.html b/files/ja/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..3d10aab23a --- /dev/null +++ b/files/ja/web/css/@media/orientation/index.html @@ -0,0 +1,96 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.orientation")}}</p> diff --git a/files/ja/web/css/@media/overflow-block/index.html b/files/ja/web/css/@media/overflow-block/index.html new file mode 100644 index 0000000000..78205ff244 --- /dev/null +++ b/files/ja/web/css/@media/overflow-block/index.html @@ -0,0 +1,73 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.overflow-block")}}</p> diff --git a/files/ja/web/css/@media/overflow-inline/index.html b/files/ja/web/css/@media/overflow-inline/index.html new file mode 100644 index 0000000000..2b0a2d67d4 --- /dev/null +++ b/files/ja/web/css/@media/overflow-inline/index.html @@ -0,0 +1,75 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("css.at-rules.media.overflow-inline")}}</div> diff --git a/files/ja/web/css/@media/pointer/index.html b/files/ja/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..c912376e81 --- /dev/null +++ b/files/ja/web/css/@media/pointer/index.html @@ -0,0 +1,103 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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/prefers-color-scheme/index.html b/files/ja/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..6a22ffbc04 --- /dev/null +++ b/files/ja/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,108 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme + - ウェブ + - メディア特性 +translation_of: Web/CSS/@media/prefers-color-scheme +--- +<div class="blockIndicator note"> +<p><code>privacy.resistFingerprinting</code> を <strong>true</strong> に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は <code>light</code> に上書きされます。<br> + あるいは、ユーザーは <code>ui.systemUsesDarkTheme</code> という数値設定を作成して既定の動作を上書きし、 <code>light</code> (値: 0)、 <code>dark</code> (値: 1)、 <code>no-preference</code> (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は <code>light</code> を返します。)</p> +</div> + +<p><strong><code>prefers-color-scheme</code></strong> は <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> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a> では <code>false</code> と評価されます。</dd> + <dt><code><dfn>light</dfn></code></dt> + <dd>ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。</dd> + <dt><code><dfn>dark</dfn></code></dt> + <dd>ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="day">Day (initial)</div> +<div class="day light-scheme">Day (changes in light scheme)</div> +<div class="day dark-scheme">Day (changes in dark scheme)</div> <br> + +<div class="night">Night (initial)</div> +<div class="night light-scheme">Night (changes in light scheme)</div> +<div class="night dark-scheme">Night (changes in dark scheme)</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.day { background: #eee; color: black; } +.night { background: #333; color: white; } + +@media (prefers-color-scheme: dark) { + .day.dark-scheme { background: #333; color: white; } + .night.dark-scheme { background: black; color: #ddd; } +} + +@media (prefers-color-scheme: light) { + .day.light-scheme { background: white; color: #555; } + .night.light-scheme { background: #eee; color: black; } +} + +.day, .night { + display: inline-block; + padding: 1em; + width: 7em; + height: 2em; + vertical-align: middle; +} +</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-color-scheme', 'prefers-color-scheme')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li> + <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li> + <li><a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a>, <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a> での色スキームの変更</li> +</ul> + +<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div> diff --git a/files/ja/web/css/@media/prefers-contrast/index.html b/files/ja/web/css/@media/prefers-contrast/index.html new file mode 100644 index 0000000000..b055d572b4 --- /dev/null +++ b/files/ja/web/css/@media/prefers-contrast/index.html @@ -0,0 +1,95 @@ +--- +title: prefers-contrast +slug: Web/CSS/@media/prefers-contrast +tags: + - CSS + - Reference + - media feature + - メディア特性 +translation_of: Web/CSS/@media/prefers-contrast +--- +<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div> + +<div class="blockIndicator note"> +<p><strong>注:</strong>この機能はどのユーザーエージェントも対応しておらず、仕様が変更されることがあります。</p> +</div> + +<p><strong><code>prefers-contrast</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の<a href="/en-US/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>high</code></dt> + <dd>ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。</dd> + <dt><code><dfn>low</dfn></code></dt> + <dd>ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。</dd> +</dl> + +<h2 id="User_preferences" name="User_preferences">ユーザー設定</h2> + +<p>現在のところ、この機能を実装しているユーザエージェントはありませんが、様々なオペレーティングシステムがこのような設定をサポートしており、このメディアクエリが実装されると、ユーザエージェントはおそらくオペレーティングシステムによって提供される設定に依存することになるでしょう。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<div class="blockIndicator note"> +<p><strong>注:</strong> 現在、この機能を実装しているブラウザはないため、次の例は動作しません。</p> +</div> + +<p>この例では、既定でいまいましい低いコントラストが与えられています。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="notranslate"><div class="contrast">low contrast box</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="notranslate">.contrast { + color: grey; +} + +@media (prefers-contrast: high) { + .contrast { + color: 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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<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> +</ul> + +<p>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</p> diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.html b/files/ja/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..b284267a69 --- /dev/null +++ b/files/ja/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,133 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<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/resolution/index.html b/files/ja/web/css/@media/resolution/index.html new file mode 100644 index 0000000000..b71f0311f8 --- /dev/null +++ b/files/ja/web/css/@media/resolution/index.html @@ -0,0 +1,85 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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/scan/index.html b/files/ja/web/css/@media/scan/index.html new file mode 100644 index 0000000000..a67c63a5f9 --- /dev/null +++ b/files/ja/web/css/@media/scan/index.html @@ -0,0 +1,88 @@ +--- +title: scan +slug: Web/CSS/@media/scan +tags: + - '@media' + - CSS + - Media Queries + - Reference + - media feature + - メディアクエリ + - メディア特性 +translation_of: Web/CSS/@media/scan +--- +<div>{{cssref}}</div> + +<p><strong><code>scan</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<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>scan</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p> + +<dl> + <dt><code>interlace</code></dt> + <dd>その端末では奇数の走査線と偶数の走査線を別々に描きます。一部のテレビはインターレスのスキャン方式を採用しています。</dd> + <dt><code>progressive</code></dt> + <dd>その端末ではすべての走査線を順番に描きます。コンピューターの画面はすべてプログレッシブのスキャン方式を採用しています。</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">p { + font-family: cursive; +} + +@media (scan: interlace) { + p { + font-family: sans-serif; + } +} + +@media (scan: progressive) { + p { + font-family: serif; + } +}</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', '#scan', 'scan')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>変更なし。</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.scan")}}</p> diff --git a/files/ja/web/css/@media/scripting/index.html b/files/ja/web/css/@media/scripting/index.html new file mode 100644 index 0000000000..7b967b5148 --- /dev/null +++ b/files/ja/web/css/@media/scripting/index.html @@ -0,0 +1,91 @@ +--- +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: htm notranslatel 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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.scripting")}}</p> diff --git a/files/ja/web/css/@media/shape/index.html b/files/ja/web/css/@media/shape/index.html new file mode 100644 index 0000000000..88a428d1c6 --- /dev/null +++ b/files/ja/web/css/@media/shape/index.html @@ -0,0 +1,94 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.shape")}}</p> diff --git a/files/ja/web/css/@media/update-frequency/index.html b/files/ja/web/css/@media/update-frequency/index.html new file mode 100644 index 0000000000..ac3b99b545 --- /dev/null +++ b/files/ja/web/css/@media/update-frequency/index.html @@ -0,0 +1,81 @@ +--- +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> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.media.update")}}</p> diff --git a/files/ja/web/css/@media/width/index.html b/files/ja/web/css/@media/width/index.html new file mode 100644 index 0000000000..88f07e05bf --- /dev/null +++ b/files/ja/web/css/@media/width/index.html @@ -0,0 +1,82 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.media.width")}}</p> |