diff options
Diffstat (limited to 'files/ja/web/html/element')
| -rw-r--r-- | files/ja/web/html/element/meta/name/theme-color/index.html | 38 | ||||
| -rw-r--r-- | files/ja/web/html/element/meta/name/theme-color/theme-color.png | bin | 0 -> 32088 bytes |
2 files changed, 38 insertions, 0 deletions
diff --git a/files/ja/web/html/element/meta/name/theme-color/index.html b/files/ja/web/html/element/meta/name/theme-color/index.html new file mode 100644 index 0000000000..46c4b3562d --- /dev/null +++ b/files/ja/web/html/element/meta/name/theme-color/index.html @@ -0,0 +1,38 @@ +--- +title: theme-color +slug: Web/HTML/Element/meta/name/theme-color +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata +browser-compat: html.elements.meta.name.theme-color +translation_of: Web/HTML/Element/meta/name/theme-color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>theme-color</code></strong> の値は {{htmlelement("meta")}} 要素の {{htmlattrxref("name", "meta")}} 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 {{htmlattrxref("content", "meta")}} 属性には有効な CSS の {{cssxref("<color>")}} が含まれていなければなりません。</span></p> + +<h2 id="Example">例</h2> + +<pre class="brush: html"><meta name="theme-color" content="#4285f4"></pre> + +<p>次の画像は、上記の {{htmlelement("meta")}} 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。</p> + +<figure><img alt="theme-color を使用した影響を表す図" src="theme-color.png"> +<figcaption><small>画像の出典: <a href="https://developers.google.com/web/fundamentals/design-and-ux/browser-customization">Icons & Browser Colors</a> より、<a href="https://developers.google.com/readme/policies">Google</a> が作成・共有し <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons 4.0 Attribution License</a> に記載された条件に従って使用されています。</small></figcaption> +</figure> + +<p>{{htmlattrxref("media", "meta")}} 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。</p> + +<pre class="brush: html"><meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> +<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"></pre> + +<h2 id="Specifications">仕様書</h2> + +<p>{{Specifications}}</p> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/html/element/meta/name/theme-color/theme-color.png b/files/ja/web/html/element/meta/name/theme-color/theme-color.png Binary files differnew file mode 100644 index 0000000000..ef9ea7378e --- /dev/null +++ b/files/ja/web/html/element/meta/name/theme-color/theme-color.png |
