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

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

1 files changed, 322 insertions, 283 deletions

diff --git a/files/ja/web/css/cursor/index.md b/files/ja/web/css/cursor/index.md
index cd3cb00f97..0a92415576 100644
--- a/files/ja/web/css/cursor/index.md
+++ b/files/ja/web/css/cursor/index.md
@@ -4,32 +4,27 @@ slug: Web/CSS/cursor
 tags:
   - Arrow
   - CSS
-  - CSS Property
   - CSS プロパティ
-  - Cursor
-  - Custom Cursor
+  - カーソル
+  - カスタムカーソル
   - Reference
   - UI
-  - mouse
-  - pointer
-  - 'recipe:css-property'
-  - カスタムカーソル
-  - カーソル
-  - ポインター
   - マウス
+  - ポインター
+  - recipe:css-property
+browser-compat: css.properties.cursor
 translation_of: Web/CSS/cursor
 ---
-<p>{{CSSRef}}</p>
-
-<p><strong><code>cursor</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。</p>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+**`cursor`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+{{EmbedInteractiveExample("pages/css/cursor.html")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 cursor: pointer;
 cursor: auto;
 
@@ -43,242 +38,308 @@ cursor: url(cursor2.png) 2 2, pointer;
 /* グローバル値 */
 cursor: inherit;
 cursor: initial;
+cursor: revert;
 cursor: unset;
-</pre>
-
-<p> <code>cursor</code> プロパティはゼロ個以上の <code><a href="#&lt;url>">&lt;url&gt;</a></code> をカンマで区切ったものと、それに続く必須の<a href="#Keyword values">キーワード値</a>によって指定します。それぞれの <code>&lt;url&gt;</code> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。</p>
-
-<p>それぞれの <code>&lt;url&gt;</code> には二つの空白で区切った数値を続けることができ、 <code><a href="#&lt;x> &lt;y>">&lt;x&gt;&lt;y&gt;</a></code> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。</p>
-
-<p>例えば、これは <code>&lt;url&gt;</code> 値を使用して二つの画像を指定し、 <code>&lt;x&gt;&lt;y&gt;</code> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは <code>progress</code> キーワードで代替されるように指定しています。</p>
-
-<pre class="brush: css notranslate">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code id="&lt;url>">&lt;url&gt;</code></dt>
- <code>url(…)</code> の形式か、又はカンマ区切りのリスト <code>url(…), url(…), …</code> で画像の URL を指定します。複数の {{cssxref("&lt;url&gt;")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した <code>url()</code> 形式の記述は無効となります。詳細は <a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">cursor プロパティにおける URL 値の使用</a>を参照して下さい。
- <dt><code id="&lt;x> &lt;y>">&lt;x&gt;</code> <code>&lt;y&gt;</code> {{experimental_inline}}</dt>
- <dd>任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。</dd>
- <dt><span id="Keyword values">キーワード値</span></dt>
- <dd>
- <p><em>値の上にマウスを当てると、各項目の実際の表示を確認できます。</em></p>
-
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">カテゴリ</th>
-    <th scope="col">CSS 値</th>
-    <th scope="col">例</th>
-    <th scope="col">説明</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr style="cursor: auto;">
-    <th rowspan="3">一般</th>
-    <td><code>auto</code></td>
-    <td></td>
-    <td>現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には <code>text</code> キーワードを指定した場合と同様です。</td>
-   </tr>
-   <tr style="cursor: default;">
-    <td><code>default</code></td>
-    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
-    <td>プラットフォームに依存する既定のカーソルです。ふつうは矢印です。</td>
-   </tr>
-   <tr style="cursor: none;">
-    <td><code>none</code></td>
-    <td></td>
-    <td>カーソルを表示しません。</td>
-   </tr>
-   <tr style="cursor: context-menu;">
-    <th rowspan="5" scope="row" style="cursor: auto;">リンクおよび状態</th>
-    <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
-   <td>コンテキストメニューが利用できることを示します。</td>
-   </tr>
-   <tr style="cursor: help;">
-    <td><code>help</code></td>
-    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
-    <td>ヘルプが使用可能であることを示します。</td>
-   </tr>
-   <tr style="cursor: pointer;">
-    <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
-    <td>カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。</td>
-   </tr>
-   <tr style="cursor: progress;">
-    <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
-    <td>バックグラウンドでプログラムがビジー状態dが、 (<code>wait</code> とは異なり) ユーザーがインターフェイスを操作可能であることを示します。</td>
-   </tr>
-   <tr style="cursor: wait;">
-    <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
-    <td>プログラムがビジー状態で、 (<code>progress</code> とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。</td>
-   </tr>
-   <tr style="cursor: cell;">
-    <th rowspan="4" scope="row" style="cursor: auto;">選択</th>
-    <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
-    <td>表のセルまたは一連のセルが選択できることを示します。</td>
-   </tr>
-   <tr style="cursor: crosshair;">
-    <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
-    <td>十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。</td>
-   </tr>
-   <tr style="cursor: text;">
-    <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
-    <td>テキストを選択可能であることを示します。通常、 I ビームが表示されます。</td>
-   </tr>
-   <tr style="cursor: vertical-text;">
-    <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
-    <td>縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。</td>
-   </tr>
-   <tr style="cursor: alias;">
-    <th rowspan="7" scope="row" style="cursor: auto;">ドラッグ＆ドロップ</th>
-    <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
-    <td>エイリアスやショートカットが作成されることを示します。</td>
-   </tr>
-   <tr style="cursor: copy;">
-    <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
-    <td>何かがコピーされることを示します。</td>
-   </tr>
-   <tr style="cursor: move;">
-    <td><code>move</code></td>
-    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
-    <td>何かが移動されることを示します。</td>
-   </tr>
-   <tr style="cursor: no-drop;">
-    <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
-    <td>現在の位置にアイテムがドロップできないことを示します。<br>
-     {{bug("275173")}}: Windows および Mac OS X では、 <code>no-drop</code> が <code>not-allowed</code> と同じです。</td>
-   </tr>
-   <tr style="cursor: not-allowed;">
-    <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
-    <td>要求された操作が受け付けられないことを示します。</td>
-   </tr>
-   <tr id="grab" style="cursor: grab;">
-    <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
-    <td>何かがグラブ (移動のためにドラッグ) することができることを示します。</td>
-   </tr>
-   <tr style="cursor: grabbing;">
-    <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
-    <td>何かがグラブ (移動のためにドラッグ) されようとしていることを示します。</td>
-   </tr>
-   <tr style="cursor: all-scroll;">
-    <th rowspan="15" scope="row" style="cursor: auto;">サイズ変更＆スクロール</th>
-    <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
-    <td>何かが任意の方向にスクロール (パン) 可能であることを示します。<br>
-    {{bug("275174")}}: Windows では、 <code>all-scroll</code> は <code>move</code> 同じです。</td>
-   </tr>
-   <tr style="cursor: col-resize;">
-    <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
-    <td>アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。</td>
-   </tr>
-   <tr style="cursor: row-resize;">
-    <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
-    <td>アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。</td>
-   </tr>
-   <tr style="cursor: n-resize;">
-    <td><code>n-resize</code></td>
-    <td><img alt="上方向へのサイズ変更カーソルの例" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
-    <td rowspan="8" style="cursor: auto;">辺が移動できることを表します。例えば、 <code>se-resize</code> のカーソルはボックスの<ruby><em>南東</em><rp> (</rp><rt>south-east</rt><rp>) </rp></ruby>の角から移動を開始した時に使われます。<br>
-     環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 <code>n-resize</code> および <code>s-resize</code> は <code>ns-resize</code> と同じです。</td>
-   </tr>
-   <tr style="cursor: e-resize;">
-    <td><code>e-resize</code></td>
-    <td><img alt="右方向へのサイズ変更カーソルの例" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: s-resize;">
-    <td><code>s-resize</code></td>
-    <td><img alt="下方向へのサイズ変更カーソルの例" src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: w-resize;">
-    <td><code>w-resize</code></td>
-    <td><img alt="左方向へのサイズ変更カーソルの例" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: ne-resize;">
-    <td><code>ne-resize</code></td>
-    <td><img alt="右上方向へのサイズ変更カーソルの例" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: nw-resize;">
-    <td><code>nw-resize</code></td>
-    <td><img alt="左上方向へのサイズ変更カーソルの例" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: se-resize;">
-    <td><code>se-resize</code></td>
-    <td><img alt="右下方向へのサイズ変更カーソルの例" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: sw-resize;">
-    <td><code>sw-resize</code></td>
-    <td><img alt="左下方向へのサイズ変更カーソルの例" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: ew-resize;">
-    <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
-    <td rowspan="4" style="cursor: auto;">双方向へのサイズ変更が可能であることを示します。</td>
-   </tr>
-   <tr style="cursor: ns-resize;">
-    <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: nesw-resize;">
-    <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
-   </tr>
-   <tr style="cursor: nwse-resize;">
-    <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: zoom-in;">
-    <th rowspan="2" style="cursor: auto;">拡大/縮小</th>
-    <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
-    <td rowspan="2" style="cursor: auto;">
-     <p>拡大/縮小が可能であることを示す</p>
-    </td>
-   </tr>
-   <tr style="cursor: zoom-out;">
-    <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
-
-<p>仕様書では <code>cursor</code> について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。</p>
-
-<p>カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。</p>
-
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+```
+
+ `cursor` プロパティはゼロ個以上の `<url>` をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの `<url>` は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。
+
+それぞれの `<url>` には空白で区切った 2 つの数値を続けることができ、`<x><y>` 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。
+
+例えば、これは `<url>` 値を使用して 2 つの画像を指定し、`<x><y>` 座標を 2 つ目に設定し、どちらの画像も読み込めなかったときは `progress` キーワードで代替されるように指定しています。
+
+```css
+cursor: url(one.svg), url(two.svg) 5 5, progress;
+```
+
+### 値
+
+- `<url>`
+ `url(…)` の形式か、またはカンマ区切りのリスト `url(…), url(…), …` で画像の URL を指定します。複数の {{cssxref("url()")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定*しなければなりません*。詳細は [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)を参照して下さい。
+- `<x>` `<y>` {{experimental_inline}}
+  - : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。
+- キーワード値
+
+ - : _値の上にマウスを当てると、各項目の実際の表示を確認できます。_
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">カテゴリー</th>
+          <th scope="col">CSS 値</th>
+          <th scope="col">例</th>
+          <th scope="col">説明</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr style="cursor: auto">
+          <th rowspan="3" scope="row">一般</th>
+          <td><code>auto</code></td>
+          <td></td>
+          <td>
+            現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には <code>text</code> キーワードを指定した場合と同様です。
+          </td>
+        </tr>
+        <tr style="cursor: default">
+          <td><code>default</code></td>
+          <td><img src="default.gif" /></td>
+          <td>プラットフォームに依存する既定のカーソルです。ふつうは矢印です。</td>
+        </tr>
+        <tr style="cursor: none">
+          <td><code>none</code></td>
+          <td></td>
+          <td>カーソルを表示しません。</td>
+        </tr>
+        <tr style="cursor: context-menu">
+          <th rowspan="5" scope="row" style="cursor: auto">リンクおよび状態</th>
+          <td><code>context-menu</code></td>
+          <td><img alt="context-menu.png" src="context-menu.png" /></td>
+          <td>コンテキストメニューが利用できることを示します。</td>
+        </tr>
+        <tr style="cursor: help">
+          <td><code>help</code></td>
+          <td><img src="help.gif" /></td>
+          <td>ヘルプが使用可能であることを示します。</td>
+        </tr>
+        <tr style="cursor: pointer">
+          <td><code>pointer</code></td>
+          <td><img src="pointer.gif" /></td>
+          <td>
+            カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
+          </td>
+          </tr>
+        <tr style="cursor: progress">
+          <td><code>progress</code></td>
+          <td><img src="progress.gif" /></td>
+          <td>
+            プログラムがバックグラウンドでビジー状態であるが、(<code>wait</code> とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
+          </td>
+        </tr>
+        <tr style="cursor: wait">
+          <td><code>wait</code></td>
+          <td><img src="wait.gif" /></td>
+          <td>
+            プログラムがビジー状態で、(<code>progress</code> とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
+          </td>
+        </tr>
+        <tr style="cursor: cell">
+          <th rowspan="4" scope="row" style="cursor: auto;">選択</th>
+          <td><code>cell</code></td>
+          <td><img src="cell.gif" /></td>
+          <td>表のセルまたは一連のセルが選択できることを示します。</td>
+        </tr>
+        <tr style="cursor: crosshair">
+          <td><code>crosshair</code></td>
+          <td><img src="crosshair.gif" /></td>
+          <td>十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。</td>
+        </tr>
+        <tr style="cursor: text">
+          <td><code>text</code></td>
+          <td><img class="default" src="text.gif" /></td>
+          <td>テキストを選択可能であることを示します。通常、I ビームが表示されます。</td>
+        </tr>
+        <tr style="cursor: vertical-text">
+          <td><code>vertical-text</code></td>
+          <td><img alt="vertical-text.gif" src="vertical-text.gif" /></td>
+          <td>
+            縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
+          </td>
+        </tr>
+        <tr style="cursor: alias">
+          <th rowspan="7" scope="row" style="cursor: auto">ドラッグ＆ドロップ</th>
+          <td><code>alias</code></td>
+          <td><img src="alias.gif" /></td>
+          <td>エイリアスやショートカットが作成されることを示します。</td>
+        </tr>
+        <tr style="cursor: copy">
+          <td><code>copy</code></td>
+          <td><img class="default" src="copy.gif" /></td>
+          <td>何かがコピーされることを示します。</td>
+        </tr>
+        <tr style="cursor: move">
+          <td><code>move</code></td>
+          <td><img src="move.gif" /></td>
+          <td>何かが移動されることを示します。</td>
+        </tr>
+        <tr style="cursor: no-drop">
+          <td><code>no-drop</code></td>
+          <td>
+            <img
+              alt="no-drop.gif"
+              class="lwrap"
+              src="no-drop.gif"
+              style="float: left"
+            />
+          </td>
+          <td>
+            現在の位置にアイテムがドロップできないことを示します。<br />{{bug("275173")}}: Windows および Mac OS X では、<code>no-drop</code> は <code>not-allowed</code> と同じです。
+          </td>
+        </tr>
+        <tr style="cursor: not-allowed">
+          <td><code>not-allowed</code></td>
+          <td><img alt="not-allowed.gif" src="not-allowed.gif" /></td>
+          <td>要求された操作が受け付けられないことを示します。</td>
+        </tr>
+        <tr style="cursor: grab">
+          <td><code>grab</code></td>
+          <td><img class="default" src="grab.gif" /></td>
+          <td>何かをグラブ (移動のためにドラッグ) することができることを示します。</td>
+        </tr>
+        <tr style="cursor: grabbing">
+          <td><code>grabbing</code></td>
+          <td><img class="default" src="grabbing.gif" /></td>
+          <td>何かをグラブ (移動のためにドラッグ) していることを示します。</td>
+        </tr>
+        <tr style="cursor: all-scroll">
+          <th rowspan="15" scope="row" style="cursor: auto">
+            サイズ変更＆スクロール
+          </th>
+          <td><code>all-scroll</code></td>
+          <td><img alt="all-scroll.gif" src="all-scroll.gif" /></td>
+          <td>
+            何かが任意の方向にスクロール (パン) 可能であることを示します。<br />{{bug("275174")}}: Windows では、 <code>all-scroll</code> は <code>move</code> 同じです。
+          </td>
+        </tr>
+        <tr style="cursor: col-resize">
+          <td><code>col-resize</code></td>
+          <td><img alt="col-resize.gif" src="col-resize.gif" /></td>
+          <td>
+            アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
+          </td>
+        </tr>
+        <tr style="cursor: row-resize">
+          <td><code>row-resize</code></td>
+          <td><img alt="row-resize.gif" src="row-resize.gif" /></td>
+          <td>
+            アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
+          </td>
+        </tr>
+        <tr style="cursor: n-resize">
+          <td><code>n-resize</code></td>
+          <td>
+            <img
+              alt="上方向へのサイズ変更カーソルの例"
+              src="n-resize.gif"
+              style="border-style: solid; border-width: 0px"
+            />
+          </td>
+        <td rowspan="8" style="cursor: auto">辺が移動できることを表します。例えば、<code>se-resize</code> のカーソルはボックスの*南東* (south-east) の角から移動を開始した時に使われます。<br />環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 <code>n-resize</code> と <code>s-resize</code> は <code>ns-resize</code> と同じになります。</td>
+        </tr>
+        <tr style="cursor: e-resize">
+          <td><code>e-resize</code></td>
+          <td>
+            <img
+              alt="右方向へのサイズ変更カーソルの例"
+              src="e-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: s-resize">
+          <td><code>s-resize</code></td>
+          <td>
+            <img
+              alt="下方向へのサイズ変更カーソルの例"
+              src="s-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: w-resize">
+          <td><code>w-resize</code></td>
+          <td>
+            <img
+              alt="左方向へのサイズ変更カーソルの例"
+              src="w-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: ne-resize">
+          <td><code>ne-resize</code></td>
+          <td>
+            <img
+              alt="右上方向へのサイズ変更カーソルの例"
+              src="ne-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: nw-resize">
+          <td><code>nw-resize</code></td>
+          <td>
+            <img
+              alt="左上方向へのサイズ変更カーソルの例"
+              src="nw-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: se-resize">
+          <td><code>se-resize</code></td>
+          <td>
+            <img
+              alt="右下方向へのサイズ変更カーソルの例"
+              src="se-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: sw-resize">
+          <td><code>sw-resize</code></td>
+          <td>
+            <img
+              alt="左下方向へのサイズ変更カーソルの例"
+              src="sw-resize.gif"
+            />
+          </td>
+        </tr>
+        <tr style="cursor: ew-resize">
+          <td><code>ew-resize</code></td>
+          <td><img alt="3-resize.gif" class="default" src="3-resize.gif" /></td>
+          <td rowspan="4" style="cursor: auto">双方向へのサイズ変更が可能であることを示します。</td>
+        </tr>
+        <tr style="cursor: ns-resize">
+          <td><code>ns-resize</code></td>
+          <td><img alt="6-resize.gif" class="default" src="6-resize.gif" /></td>
+        </tr>
+        <tr style="cursor: nesw-resize">
+          <td><code>nesw-resize</code></td>
+          <td><img alt="1-resize.gif" class="default" src="1-resize.gif" /></td>
+        </tr>
+        <tr style="cursor: nwse-resize">
+          <td><code>nwse-resize</code></td>
+          <td><img alt="4-resize.gif" class="default" src="4-resize.gif" /></td>
+        </tr>
+        <tr style="cursor: zoom-in">
+          <th rowspan="2" scope="row" style="cursor: auto">拡大/縮小</th>
+          <td><code>zoom-in</code></td>
+          <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif" /></td>
+          <td rowspan="2" style="cursor: auto">
+            <p>拡大/縮小が可能であることを示します。</p>
+          </td>
+        </tr>
+        <tr style="cursor: zoom-out">
+          <td><code>zoom-out</code></td>
+          <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif" /></td>
+        </tr>
+      </tbody>
+    </table>
+
+## 使用上の注意
+
+仕様書では `cursor` について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。
+
+カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_cursor_types" name="Setting_cursor_types">カーソルの種類の設定</h3>
+<h3 id="Setting_cursor_types">カーソルの種類の設定</h3>
 
-<pre class="brush:css notranslate">.foo {
+```css
+.foo {
   cursor: crosshair;
 }
 
@@ -290,40 +351,18 @@ cursor: unset;
 .baz {
   cursor: url("hyper.cur"), auto;
 }
-</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 Basic UI', '#cursor', 'cursor')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>幾つかのキーワード、ポジション構文、 <code>url()</code> 関数形式の追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat("css.properties.cursor")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">cursor プロパティにおける URL 値の使用</a></li>
- <li>{{cssxref("pointer-events")}}</li>
- <li>{{cssxref("url()", "url()")}} 関数</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)
+- {{cssxref("pointer-events")}}
+- {{cssxref("url()", "url()")}} 関数