CSS 基本ユーザーインターフェイスの文書を更新

- 2021/10/15 時点の英語版に同期

2 files changed, 115 insertions, 137 deletions

diff --git a/files/ja/web/css/css_basic_user_interface/index.md b/files/ja/web/css/css_basic_user_interface/index.md
index c8e3a80d85..98740f9d8b 100644
--- a/files/ja/web/css/css_basic_user_interface/index.md
+++ b/files/ja/web/css/css_basic_user_interface/index.md
@@ -4,71 +4,45 @@ slug: Web/CSS/CSS_Basic_User_Interface
 tags:
   - CSS
   - CSS 基本ユーザーインターフェイス
-  - Reference
+  - ガイド
   - 概要
+  - Reference
 translation_of: Web/CSS/CSS_Basic_User_Interface
 ---
-<div>{{CSSRef}}</div>
-
-<p><ruby><strong>CSS 基本ユーザーインターフェイス</strong><rp> (</rp><rt>CSS Basic User Interface</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。</p>
-
-<h2 id="Reference" name="Reference">リファレンス</h2>
-
-<h3 id="Properties" name="Properties">プロパティ</h3>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("box-sizing")}}</li>
- <li>{{CSSxRef("cursor")}}</li>
- <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
- <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef("outline")}}</li>
- <li>{{CSSxRef("outline-width")}}</li>
- <li>{{CSSxRef("outline-style")}}</li>
- <li>{{CSSxRef("outline-color")}}</li>
- <li>{{CSSxRef("outline-offset")}}</li>
- <li>{{CSSxRef("resize")}}</li>
- <li>{{CSSxRef("text-overflow")}}</li>
- <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
-</ul>
-</div>
-
-<h2 id="Guides" name="Guides">ガイド</h2>
-
-<dl>
- <dt><a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> プロパティでの URL 値の使用</a></dt>
- <dd>カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。</dd>
-</dl>
-
-<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 Basic UI")}}</td>
-   <td>{{Spec2("CSS4 Basic UI")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Basic UI")}}</td>
-   <td>{{Spec2("CSS3 Basic UI")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**CSS 基本ユーザーインターフェイス** (CSS Basic User Interface) は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。
+
+## リファレンス
+
+## プロパティ
+
+- {{CSSxRef("appearance")}} {{Experimental_Inline}}
+- {{CSSxRef("box-sizing")}}
+- {{CSSxRef("cursor")}}
+- {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
+- {{CSSxRef("nav-down")}} {{Experimental_Inline}}
+- {{CSSxRef("nav-left")}} {{Experimental_Inline}}
+- {{CSSxRef("nav-right")}} {{Experimental_Inline}}
+- {{CSSxRef("nav-up")}} {{Experimental_Inline}}
+- {{CSSxRef("outline")}}
+- {{CSSxRef("outline-width")}}
+- {{CSSxRef("outline-style")}}
+- {{CSSxRef("outline-color")}}
+- {{CSSxRef("outline-offset")}}
+- {{CSSxRef("resize")}}
+- {{CSSxRef("text-overflow")}}
+- {{CSSxRef("user-select")}}
+
+## ガイド
+
+- [`cursor` プロパティでの URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)
+  - : カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。
+
+## 仕様書
+
+| 仕様書                            | 状態                       | 備考     |
+| --------------------------------- | -------------------------- | -------- |
+| {{SpecName("CSS4 Basic UI")}}     | {{Spec2("CSS4 Basic UI")}} |          |
+| {{SpecName("CSS3 Basic UI")}}     | {{Spec2("CSS3 Basic UI")}} |          |
+| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}}        | 初回定義 |
diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md
index 98b56ee788..cb2fcddd24 100644
--- a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md
+++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md
@@ -4,37 +4,43 @@ slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
 tags:
   - CSS
   - Gecko
-  - Guide
+  - ガイド
   - NeedsUpdate
   - Reference
 translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
 ---
-<div>{{cssref}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Mozilla/Gecko">Gecko</a> 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (<a href="/ja/docs/Mozilla/Firefox/Releases/4">Firefox 4</a>) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。</p>
+[Gecko](/ja/docs/Mozilla/Gecko) 1.8 は URL の値を CSS の{{CSSxRef("cursor")}} プロパティで、 Windows と Linux で対応しています。 Mac の対応は Gecko 2 ([Firefox 4](/ja/docs/Mozilla/Firefox/Releases/4)) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p>基本 (CSS 2.1) の基本的な記述は次の通りです。</p>
+基本 (CSS 2.1) の基本的な記述は次の通りです。
 
-<pre class="syntaxbox notranslate">{{CSSxRef("cursor")}}: <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> {{CSSxRef("&lt;url&gt;")}} , <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Values")}}</pre>
+```css
+{{CSSxRef("cursor")}}: [ {{CSSxRef("url()")}} , ]* {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Values")}}
+```
 
-<p>つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 <code>auto</code> や <code>pointer</code> などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。</p>
+つまり、0 個以上の URL を (カンマ区切りで) 指定することがありますが、 `auto` や `pointer` などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。
 
-<p>例えば次のような値が有効です。</p>
+例えば次のような値が有効です。
 
-<pre class="brush: css notranslate">cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;</pre>
+```css
+cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+```
 
-<p>始めに <em>foo.cur</em> を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 <em>bar.gif</em> を読み込もうとし、どちらも利用できない場合は <code>auto</code> が使用されます。</p>
+始めに _foo.cur_ を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、_bar.gif_ を読み込もうとし、どちらも利用できない場合は `auto` が使用されます。
 
-<p>Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。</p>
+Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。
 
-<pre class="syntaxbox notranslate">{{CSSxRef("cursor")}}: <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> {{CSSxRef("&lt;uri&gt;")}} <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> &lt;x&gt; &lt;y&gt; <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Question_mark" title="Question mark: the entity is optional">?</a> , <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Values")}}
-</pre>
+```css
+{{CSSxRef("cursor")}}: [ {{CSSxRef("url()")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Values")}}
+```
 
-<p>これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。</p>
+これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。
 
-<pre class="brush: css; notranslate">.foo  {
+```css
+.foo  {
   cursor: auto;
   cursor: url(cursor1.png) 4 12, auto;
 }
@@ -45,75 +51,73 @@ translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor
 }
 
 /* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
-</pre>
+```
 
-<p>初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。</p>
+初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。
 
 <h2 id="Limitations" name="Limitations">制限</h2>
 
-<p>Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。</p>
+Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。</p>
-</div>
+> **Note:** Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。
 
-<p>Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。</p>
+Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。
 
-<p>(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)</p>
+(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)
 
-<p>Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。</p>
+Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。
 
-<p>カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。</p>
+カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>Microsoft Internet Explorer 6.0 も <code>cursor</code> プロパティに対応しています。しかし、次の制限があります。</p>
+Microsoft Internet Explorer 6.0 も `cursor` プロパティに対応しています。しかし、次の制限があります。
 
-<ul>
- <li>IE は CUR と ANI 形式のみに対応。</li>
- <li>IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。</li>
-</ul>
+- IE は CUR と ANI 形式のみに対応。
+- IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>ブラウザー</th>
-   <th>最初期バージョン</th>
-   <th>形式 (例)</th>
-   <th>X-Y座標有効範囲</th>
-  </tr>
-  <tr>
-   <td>Internet Explorer</td>
-   <td><strong>6.0</strong></td>
-   <td><code>.cur | .ani</code></td>
-   <td>---</td>
-  </tr>
-  <tr>
-   <td>Firefox (Gecko), Windows および Linux</td>
-   <td><strong>1.5</strong> (1.8)</td>
-   <td><code>.cur | .png | .gif | .jpg</code></td>
-   <td>1.5 (1.8)</td>
-  </tr>
-  <tr>
-   <td>Firefox (Gecko)</td>
-   <td><strong>4.0</strong> (2.0)</td>
-   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
-   <td>(Gecko 2.0)</td>
-  </tr>
-  <tr>
-   <td>Opera</td>
-   <td>---</td>
-   <td>---</td>
-   <td>---</td>
-  </tr>
-  <tr>
-   <td rowspan="2">Safari (Webkit)</td>
-   <td><strong>3.0</strong> (522-523)</td>
-   <td><code>.cur | .png | .gif | .jpg</code></td>
-   <td rowspan="2">3.0 (522-523)</td>
-  </tr>
-  <tr>
-   <td colspan="2">OS X 10.5 から、 Safari (Mac) は <code>.cur</code> に対応しています。</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>ブラウザー</th>
+      <th>最初期バージョン</th>
+      <th>形式 (例)</th>
+      <th>X-Y 座標</th>
+    </tr>
+    <tr>
+      <td>Internet Explorer</td>
+      <td><strong>6.0</strong></td>
+      <td><code>.cur | .ani</code></td>
+      <td>---</td>
+    </tr>
+    <tr>
+      <td>Firefox (Gecko), Windows および Linux</td>
+      <td><strong>1.5</strong> (1.8)</td>
+      <td><code>.cur | .png | .gif | .jpg</code></td>
+      <td>1.5 (1.8)</td>
+    </tr>
+    <tr>
+      <td>Firefox (Gecko)</td>
+      <td><strong>4.0</strong> (2.0)</td>
+      <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+      <td>(Gecko 2.0)</td>
+    </tr>
+    <tr>
+      <td>Opera</td>
+      <td>---</td>
+      <td>---</td>
+      <td>---</td>
+    </tr>
+    <tr>
+      <td rowspan="2">Safari (Webkit)</td>
+      <td><strong>3.0</strong> (522-523)</td>
+      <td><code>.cur | .png | .gif | .jpg</code></td>
+      <td rowspan="2">3.0 (522-523)</td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        OS X 10.5 から、 Safari (Mac) は <code>.cur</code> ファイルに対応しています。
+      </td>
+    </tr>
+  </tbody>
 </table>