From 4b515493c0854b46b84a5fc4448d72694b351440 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 22 Dec 2021 01:05:50 +0900
Subject: CSS Device Adaptation 関係の文書を変換準備
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
files/ja/web/css/@viewport/index.html | 131 ----------------------
files/ja/web/css/@viewport/index.md | 131 ++++++++++++++++++++++
files/ja/web/css/css_device_adaptation/index.html | 50 ---------
files/ja/web/css/css_device_adaptation/index.md | 50 +++++++++
4 files changed, 181 insertions(+), 181 deletions(-)
delete mode 100644 files/ja/web/css/@viewport/index.html
create mode 100644 files/ja/web/css/@viewport/index.md
delete mode 100644 files/ja/web/css/css_device_adaptation/index.html
create mode 100644 files/ja/web/css/css_device_adaptation/index.md
(limited to 'files/ja/web/css')
diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html
deleted file mode 100644
index 168577a98c..0000000000
--- a/files/ja/web/css/@viewport/index.html
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: '@viewport'
-slug: Web/CSS/@viewport
-tags:
- - '@viewport'
- - At-rule
- - CSS
- - Experimental
- - Layout
- - Mobile
- - Reference
- - Screen Layout
- - viewport
-browser-compat: css.at-rules.viewport
-translation_of: Web/CSS/@viewport
----
-<div>{{CSSRef}}{{deprecated_header}}</div>
-
-<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>
-
-<p><strong><code>@viewport</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。</p>
-
-<p>パーセント値で指定された長さは、<strong>初期ビューポート</strong>からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。</p>
-
-<p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p>
-
-<pre class="brush: css no-line-numbers">@viewport {
- width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
-}
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>メモ</strong>: <code><meta name="viewport"></code> タグを使用すると、 <code>@viewport</code> より優先します。</p>
-</div>
-
-<h2 id="Syntax">構文</h2>
-
-<p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p>
-
-<p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p>
-
-<h3 id="Descriptors">記述子</h3>
-
-<p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p>
-
-<dl>
- <dt><code>min-width</code></dt>
- <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
- <dt><code>max-width</code></dt>
- <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
- <dt><code>width</code></dt>
- <dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd>
- <dt><code>min-height</code></dt>
- <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
- <dt><code>max-height</code></dt>
- <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
- <dt><code>height</code></dt>
- <dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd>
- <dt><code>zoom</code></dt>
- <dd>ズームの初期値を設定します。</dd>
- <dt><code>min-zoom</code></dt>
- <dd>ズームの最小値を設定します。</dd>
- <dt><code>max-zoom</code></dt>
- <dd>ズームの最大値を設定します。</dd>
- <dt><code>user-zoom</code></dt>
- <dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd>
- <dt><code>orientation</code></dt>
- <dd>文書の向きを制御します。</dd>
- <dt><code>viewport-fit</code></dt>
- <dd>長方形ではないディスプレイでの文書の表示を制御します。</dd>
-</dl>
-
-<h2 id="Formal_syntax">形式文法</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples">例</h2>
-
-<h3 id="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3>
-
-<pre class="brush: css">@viewport {
- min-width: 640px;
- max-width: 800px;
-}
-
-@viewport {
- zoom: 0.75;
- min-zoom: 0.5;
- max-zoom: 0.9;
-}
-
-@viewport {
- orientation: landscape;
-}</pre>
-
-<h2 id="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", "#extending-viewport-rule", "@viewport")}}</td>
- <td>{{Spec2("CSS Round Display")}}</td>
- <td><code>viewport-fit</code> 記述子を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}</td>
- <td>{{Spec2('CSS3 Device')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
- <li>{{HTMLElement("meta")}}、特に <code><meta name="viewport"></code> の項目</li>
- <li><a href="/ja/docs/Web/HTML/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li>
-</ul>
diff --git a/files/ja/web/css/@viewport/index.md b/files/ja/web/css/@viewport/index.md
new file mode 100644
index 0000000000..168577a98c
--- /dev/null
+++ b/files/ja/web/css/@viewport/index.md
@@ -0,0 +1,131 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+ - '@viewport'
+ - At-rule
+ - CSS
+ - Experimental
+ - Layout
+ - Mobile
+ - Reference
+ - Screen Layout
+ - viewport
+browser-compat: css.at-rules.viewport
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<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>
+
+<p><strong><code>@viewport</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。</p>
+
+<p>パーセント値で指定された長さは、<strong>初期ビューポート</strong>からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。</p>
+
+<p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p>
+
+<pre class="brush: css no-line-numbers">@viewport {
+ width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
+}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <code><meta name="viewport"></code> タグを使用すると、 <code>@viewport</code> より優先します。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p>
+
+<p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p>
+
+<h3 id="Descriptors">記述子</h3>
+
+<p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p>
+
+<dl>
+ <dt><code>min-width</code></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
+ <dt><code>max-width</code></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
+ <dt><code>width</code></dt>
+ <dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd>
+ <dt><code>min-height</code></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
+ <dt><code>max-height</code></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
+ <dt><code>height</code></dt>
+ <dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd>
+ <dt><code>zoom</code></dt>
+ <dd>ズームの初期値を設定します。</dd>
+ <dt><code>min-zoom</code></dt>
+ <dd>ズームの最小値を設定します。</dd>
+ <dt><code>max-zoom</code></dt>
+ <dd>ズームの最大値を設定します。</dd>
+ <dt><code>user-zoom</code></dt>
+ <dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd>
+ <dt><code>orientation</code></dt>
+ <dd>文書の向きを制御します。</dd>
+ <dt><code>viewport-fit</code></dt>
+ <dd>長方形ではないディスプレイでの文書の表示を制御します。</dd>
+</dl>
+
+<h2 id="Formal_syntax">形式文法</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3>
+
+<pre class="brush: css">@viewport {
+ min-width: 640px;
+ max-width: 800px;
+}
+
+@viewport {
+ zoom: 0.75;
+ min-zoom: 0.5;
+ max-zoom: 0.9;
+}
+
+@viewport {
+ orientation: landscape;
+}</pre>
+
+<h2 id="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", "#extending-viewport-rule", "@viewport")}}</td>
+ <td>{{Spec2("CSS Round Display")}}</td>
+ <td><code>viewport-fit</code> 記述子を定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}</td>
+ <td>{{Spec2('CSS3 Device')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}、特に <code><meta name="viewport"></code> の項目</li>
+ <li><a href="/ja/docs/Web/HTML/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li>
+</ul>
diff --git a/files/ja/web/css/css_device_adaptation/index.html b/files/ja/web/css/css_device_adaptation/index.html
deleted file mode 100644
index f0e038a960..0000000000
--- a/files/ja/web/css/css_device_adaptation/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: CSS 端末適合
-slug: Web/CSS/CSS_Device_Adaptation
-tags:
- - CSS
- - CSS 端末適合
- - リファレンス
- - 概要
-translation_of: Web/CSS/CSS_Device_Adaptation
----
-<div>{{CSSRef}}</div>
-
-<p><ruby><strong>CSS 端末適合</strong><rp> (</rp><rt>CSS Device Adaptation</rt><rp>) </rp></ruby>は CSS モジュールの一つで、ビューポートの寸法、拡大率、方向を定義することができるものです。</p>
-
-<h2 id="Reference" name="Reference">リファレンス</h2>
-
-<h3 id="At-rules" name="At-rules">@-規則</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("@viewport")}}</li>
-</ul>
-</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("CSS3 Device")}}</td>
- <td>{{Spec2("CSS3 Device")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<h3 id="viewport_規則"><code>@viewport</code> 規則</h3>
-
-<div>
-<p>{{Compat("css.at-rules.viewport")}}</p>
-</div>
diff --git a/files/ja/web/css/css_device_adaptation/index.md b/files/ja/web/css/css_device_adaptation/index.md
new file mode 100644
index 0000000000..f0e038a960
--- /dev/null
+++ b/files/ja/web/css/css_device_adaptation/index.md
@@ -0,0 +1,50 @@
+---
+title: CSS 端末適合
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+ - CSS
+ - CSS 端末適合
+ - リファレンス
+ - 概要
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 端末適合</strong><rp> (</rp><rt>CSS Device Adaptation</rt><rp>) </rp></ruby>は CSS モジュールの一つで、ビューポートの寸法、拡大率、方向を定義することができるものです。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
+</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("CSS3 Device")}}</td>
+ <td>{{Spec2("CSS3 Device")}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="viewport_規則"><code>@viewport</code> 規則</h3>
+
+<div>
+<p>{{Compat("css.at-rules.viewport")}}</p>
+</div>
--
cgit v1.2.3-54-g00ecf