diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-07-02 23:36:25 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-02 23:36:25 +0900 |
commit | 610c333b45ce0c5da3cebc27b00b37e458d53498 (patch) | |
tree | 16dda8d6154b65dd383888bdad6773e6bf6c0f2b /files/ja | |
parent | fc1482b743e8f428c77adadeebbe243b94f9a7c9 (diff) | |
download | translated-content-610c333b45ce0c5da3cebc27b00b37e458d53498.tar.gz translated-content-610c333b45ce0c5da3cebc27b00b37e458d53498.tar.bz2 translated-content-610c333b45ce0c5da3cebc27b00b37e458d53498.zip |
Web/CSS/@viewport を更新 (#1277)
* Web/CSS/@viewport を更新
- 英語版で削除された conflicting 版の記事を削除
- 2021/05/08 時点の英語版を同期
* ファイルが削除できていなかったのを削除
Diffstat (limited to 'files/ja')
9 files changed, 39 insertions, 567 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index f4ce9ad9c7..d80fc1bd2a 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -4333,14 +4333,14 @@ /ja/docs/Web/CSS/@media/scan /ja/docs/orphaned/Web/CSS/@media/scan /ja/docs/Web/CSS/@page/bleed /ja/docs/orphaned/Web/CSS/@page/bleed /ja/docs/Web/CSS/@page/marks /ja/docs/orphaned/Web/CSS/@page/marks -/ja/docs/Web/CSS/@viewport/height /ja/docs/conflicting/Web/CSS/@viewport -/ja/docs/Web/CSS/@viewport/max-height /ja/docs/conflicting/Web/CSS/@viewport_516ab4b0283b5b2231fb657505e22440 -/ja/docs/Web/CSS/@viewport/max-zoom /ja/docs/conflicting/Web/CSS/@viewport_d03ebc763769680c55d1a4258592d3ed -/ja/docs/Web/CSS/@viewport/min-zoom /ja/docs/conflicting/Web/CSS/@viewport_6e9c91ec34cdb0393d301240d0d50d84 +/ja/docs/Web/CSS/@viewport/height /ja/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/@viewport/max-height /ja/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/@viewport/max-zoom /ja/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/@viewport/min-zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/orientation /en-US/docs/Web/CSS/@viewport /ja/docs/Web/CSS/@viewport/user-zoom /ja/docs/Web/CSS/@viewport -/ja/docs/Web/CSS/@viewport/viewport-fit /ja/docs/conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -/ja/docs/Web/CSS/@viewport/zoom /ja/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 +/ja/docs/Web/CSS/@viewport/viewport-fit /ja/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/@viewport/zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Adjacent_sibling_combinator /ja/docs/Web/CSS/Background_Backup /ja/docs/Web/CSS/background /ja/docs/Web/CSS/Block_formatting_context /ja/docs/Web/Guide/CSS/Block_formatting_context @@ -4390,11 +4390,11 @@ /ja/docs/Web/CSS/Motion_Path /ja/docs/Web/CSS/CSS_Motion_Path /ja/docs/Web/CSS/Other_Resources /ja/docs/conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea /ja/docs/Web/CSS/Reference/@viewport /ja/docs/Web/CSS/@viewport -/ja/docs/Web/CSS/Reference/@viewport/max-zoom /ja/docs/conflicting/Web/CSS/@viewport_d03ebc763769680c55d1a4258592d3ed -/ja/docs/Web/CSS/Reference/@viewport/min-zoom /ja/docs/conflicting/Web/CSS/@viewport_6e9c91ec34cdb0393d301240d0d50d84 +/ja/docs/Web/CSS/Reference/@viewport/max-zoom /ja/docs/Web/CSS/@viewport +/ja/docs/Web/CSS/Reference/@viewport/min-zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/@viewport/orientation /en-US/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/@viewport/user-zoom /ja/docs/Web/CSS/@viewport -/ja/docs/Web/CSS/Reference/@viewport/zoom /ja/docs/conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 +/ja/docs/Web/CSS/Reference/@viewport/zoom /ja/docs/Web/CSS/@viewport /ja/docs/Web/CSS/Reference/Mozilla_Extensions /ja/docs/Web/CSS/Mozilla_Extensions /ja/docs/Web/CSS/Scaling_background_images /ja/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /ja/docs/Web/CSS/Understanding_z_index /ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index f75dab2def..5336ebae40 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48823,51 +48823,6 @@ "Marsf" ] }, - "conflicting/Web/CSS/@viewport": { - "modified": "2020-10-15T22:35:00.773Z", - "contributors": [ - "mfuji09" - ] - }, - "conflicting/Web/CSS/@viewport_516ab4b0283b5b2231fb657505e22440": { - "modified": "2020-10-15T22:19:56.603Z", - "contributors": [ - "Uemmra3", - "mzmjp" - ] - }, - "conflicting/Web/CSS/@viewport_6e9c91ec34cdb0393d301240d0d50d84": { - "modified": "2020-10-15T22:04:16.205Z", - "contributors": [ - "ExE-Boss", - "mfuji09" - ] - }, - "conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f": { - "modified": "2020-10-15T22:13:25.298Z", - "contributors": [ - "mfuji09", - "acid-chicken", - "silverskyvicto" - ] - }, - "conflicting/Web/CSS/@viewport_d03ebc763769680c55d1a4258592d3ed": { - "modified": "2020-10-15T22:04:17.200Z", - "contributors": [ - "mfuji09", - "ExE-Boss" - ] - }, - "conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518": { - "modified": "2020-10-15T21:44:32.570Z", - "contributors": [ - "mfuji09", - "ExE-Boss", - "takahashim", - "dskmori", - ".Hiroya" - ] - }, "conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { "modified": "2019-03-23T23:37:28.021Z", "contributors": [ diff --git a/files/ja/conflicting/web/css/@viewport/index.html b/files/ja/conflicting/web/css/@viewport/index.html deleted file mode 100644 index 19f1c5354f..0000000000 --- a/files/ja/conflicting/web/css/@viewport/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: height -slug: conflicting/Web/CSS/@viewport -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height -original_slug: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p> - -<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* 1つの値 */ -height: auto; -height: 320px; -height: 15em; - -/* Two values */ -height: 320px 200px; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用値は他の CSS 記述子の値から計算されます。</dd> - <dt><code><length></code></dt> - <dd>負の数ではない絶対的または相対的な長さです。</dd> - <dt><code><percentage></code></dt> - <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3> - -<pre class="brush: css notranslate">@viewport { - height: 500px; -}</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('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.viewport.height")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html deleted file mode 100644 index 1957f3d3ef..0000000000 --- a/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: max-height -slug: conflicting/Web/CSS/@viewport_516ab4b0283b5b2231fb657505e22440 -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-height -original_slug: Web/CSS/@viewport/max-height ---- -<div>{{CSSRef}}</div> - -<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p> - -<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* Keyword value */ -max-height: auto; - -/* <length> values */ -max-height: 400px; -max-height: 50em; -max-height: 20cm; - -/* <percentage> value */ -max-height: 75%;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>使用する値は他の CSS 記述子の値から計算されます。</dd> - <dt><code><length></code></dt> - <dd>負ではない絶対値または相対値。</dd> - <dt><code><percentage></code></dt> - <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@viewport { - max-height: 600px; -}</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('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html deleted file mode 100644 index 9c8e0522de..0000000000 --- a/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: min-zoom -slug: conflicting/Web/CSS/@viewport_6e9c91ec34cdb0393d301240d0d50d84 -tags: - - '@viewport' - - CSS - - CSS 記述子 - - リファレンス -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-zoom -original_slug: Web/CSS/@viewport/min-zoom ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p> - -<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* キーワード値 */ -min-zoom: auto; - -/* <number> 値 */ -min-zoom: 0.8; -min-zoom: 2.0; - -/* <percentage> 値 */ -min-zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>非負の数値で、表示倍率の下限です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>非負のパーセント値で、表示倍率の下限です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<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>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html deleted file mode 100644 index a1f0ac621c..0000000000 --- a/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: viewport-fit -slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -tags: - - '@viewport' - - CSS - - CSS 記述子 - - Experimental - - Reference - - モバイル - - 画面レイアウト -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit -original_slug: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css; no-line-numbers">/* キーワード値 */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd> - <dt><code>contain</code></dt> - <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd> - <dt><code>cover</code></dt> - <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox">auto | contain | cover -</pre> - -<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</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("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html deleted file mode 100644 index e8fcf26519..0000000000 --- a/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: max-zoom -slug: conflicting/Web/CSS/@viewport_d03ebc763769680c55d1a4258592d3ed -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-zoom -original_slug: Web/CSS/@viewport/max-zoom ---- -<div>{{CSSRef}}</div> - -<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p> - -<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ -max-zoom: auto; - -/* <number> 値 */ -max-zoom: 0.8; -max-zoom: 2.0; - -/* <percentage> 値 */ -max-zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>非負の数値で、表示倍率の上限です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>非負のパーセント値で、表示倍率の上限です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3> - -<pre class="notranslate"><code>@viewport { - max-zoom: 1.5; -}</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('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html deleted file mode 100644 index f6ced2def4..0000000000 --- a/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: zoom -slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 -tags: - - '@viewport' - - At-rule descriptor - - CSS - - CSS Descriptor - - Graphics - - Layout - - Reference - - Web -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom -original_slug: Web/CSS/@viewport/zoom ---- -<div>{{CSSRef}}</div> - -<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p> - -<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css notranslate">/* キーワード値 */ -zoom: auto; - -/* <number> 値 */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> 値 */ -zoom: 150%; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd>表示倍率として使われる非負の数値です。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>表示倍率として使われる非負のパーセント値です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3> - -<pre class="notranslate"><code>@viewport { - zoom: 2.0; -}</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('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@viewport")}}</li> -</ul> diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html index 3b68effd7d..9df15a0789 100644 --- a/files/ja/web/css/@viewport/index.html +++ b/files/ja/web/css/@viewport/index.html @@ -11,11 +11,12 @@ tags: - Reference - Screen Layout - viewport +browser-compat: css.at-rules.viewport translation_of: Web/CSS/@viewport --- <div>{{CSSRef}}{{deprecated_header}}</div> -<div class="blockIndicator note"> +<div class="notecard note"> <p><strong>注</strong>: <a href="https://github.com/w3c/csswg-drafts/issues/4766">https://github.com/w3c/csswg-drafts/issues/4766</a> に @viewport を標準路線から除外することに関する議論があります。</p> </div> @@ -25,7 +26,7 @@ translation_of: Web/CSS/@viewport <p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p> -<pre class="brush: css no-line-numbers notranslate">@viewport { +<pre class="brush: css no-line-numbers">@viewport { width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/ } </pre> @@ -34,52 +35,52 @@ translation_of: Web/CSS/@viewport <p><strong>メモ</strong>: <code><meta name="viewport"></code> タグを使用すると、 <code>@viewport</code> より優先します。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p> <p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p> -<h3 id="Descriptors" name="Descriptors">記述子</h3> +<h3 id="Descriptors">記述子</h3> <p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p> <dl> - <dt><a href="/ja/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt> + <dt><code>min-width</code></dt> <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> + <dt><code>max-width</code></dt> <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> + <dt><code>width</code></dt> <dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> + <dt><code>min-height</code></dt> <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> + <dt><code>max-height</code></dt> <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> + <dt><code>height</code></dt> <dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> + <dt><code>zoom</code></dt> <dd>ズームの初期値を設定します。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> + <dt><code>min-zoom</code></dt> <dd>ズームの最小値を設定します。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt> + <dt><code>max-zoom</code></dt> <dd>ズームの最大値を設定します。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt> + <dt><code>user-zoom</code></dt> <dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd> - <dt><a href="/ja/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt> + <dt><code>orientation</code></dt> <dd>文書の向きを制御します。</dd> - <dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt> + <dt><code>viewport-fit</code></dt> <dd>長方形ではないディスプレイでの文書の表示を制御します。</dd> </dl> -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="Setting_viewport_size_zoom_and_orientation" name="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3> +<h3 id="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3> -<pre class="brush: css notranslate">@viewport { +<pre class="brush: css">@viewport { min-width: 640px; max-width: 800px; } @@ -94,7 +95,7 @@ translation_of: Web/CSS/@viewport orientation: landscape; }</pre> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -108,7 +109,7 @@ translation_of: Web/CSS/@viewport <tr> <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td> <td>{{Spec2("CSS Round Display")}}</td> - <td>{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。</td> + <td><code>viewport-fit</code> 記述子を定義。</td> </tr> <tr> <td>{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}</td> @@ -118,15 +119,19 @@ translation_of: Web/CSS/@viewport </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> +<<<<<<< Updated upstream <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.viewport")}}</p> +======= +<p>{{Compat}}</p> +>>>>>>> Stashed changes -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>{{HTMLElement("meta")}}、特に <code><meta name="viewport"></code> の項目</li> - <li><a href="/ja/docs/Mobile/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li> + <li><a href="/ja/docs/Web/HTML/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li> </ul> |