diff options
| -rw-r--r-- | files/ja/web/manifest/display/index.md | 152 |
1 files changed, 64 insertions, 88 deletions
diff --git a/files/ja/web/manifest/display/index.md b/files/ja/web/manifest/display/index.md index b0ed8f2295..6e23626623 100644 --- a/files/ja/web/manifest/display/index.md +++ b/files/ja/web/manifest/display/index.md @@ -2,111 +2,87 @@ title: display slug: Web/Manifest/display tags: - - Manifest - - Web - - display - マニフェスト + - ウェブ + - display +browser-compat: html.manifest.display translation_of: Web/Manifest/display --- -<div>{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}</div> +{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} <table class="properties"> - <tbody> - <tr> - <th scope="row">型</th> - <td><code>String</code></td> - </tr> - <tr> - <th scope="row">必須</th> - <td>いいえ</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">型</th> + <td>`String`</td> + </tr> + <tr> + <th scope="row">必須</th> + <td>いいえ</td> + </tr> + </tbody> </table> -<p><code>display</code> メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 <code>browser</code> (ブラウザーのウィンドウが完全に見える) から <code>fullscreen</code> (アプリが全画面になる) までの範囲を取ります。</p> +`display` メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 `browser` (ブラウザーのウィンドウが完全に見える) から `fullscreen` (アプリが全画面になる) までの範囲を取ります。 -<div class="blockIndicator note"> -<p><strong>注:</strong> <code>display</code> メンバーが指定されてなかった場合は、既定で <code>browser</code> になります。</p> -</div> +> **Note:** ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` であり、 `browser` が `display` メンバーが指定されていなかった場合の既定値です。 -<div class="blockIndicator note"> -<p><strong>注:</strong> 表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。</p> -</div> +> **Note:** 表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。 -<h2 id="値">値</h2> +## 値 -<p>次の値を使用することができます。</p> +以下の値を利用することができます。 <table class="fullwidth-table 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> + <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="Examples" name="Examples">例</h2> +## 例 -<pre class="brush: json">"display": "standalone" -</pre> +```json +"display": "standalone" +``` -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - <th scope="col">フィードバック</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p>{{SpecName('Manifest', '#display-member', 'display')}}</p> - </td> - <td> - <p>{{Spec2('Manifest')}}</p> - </td> - <td> - <p>初回定義</p> - </td> - <td> - <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p> - </td> - </tr> - </tbody> -</table> +## 仕様書 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +{{Specifications}} -<div class="blockIndicator note"> -<p><strong>注:</strong> Firefox バージョン 47 では、 <code>display</code> の値は <code>browser</code> のみに対応しています。 <code>minimal-ui</code>, <code>standalone</code> , <code>fullscreen</code> は Firefox 57 で追加されました。</p> -</div> +## ブラウザーの互換性 -<p>{{Compat("html.manifest.display")}}</p> +{{Compat}} |