From 0ed7c371f7ff103e19b2474e8a55c02d77e3c74d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Oct 2021 23:48:25 +0900 Subject: CSS 基本ユーザーインターフェイスの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/15 時点の英語版に同期 --- files/ja/web/css/cursor/index.md | 605 +++++++++++++++++++++------------------ 1 file changed, 322 insertions(+), 283 deletions(-) (limited to 'files/ja/web/css/cursor') 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 --- -

{{CSSRef}}

- -

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+**`cursor`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。 - +{{EmbedInteractiveExample("pages/css/cursor.html")}} -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 cursor: pointer;
 cursor: auto;
 
@@ -43,242 +38,308 @@ cursor: url(cursor2.png) 2 2, pointer;
 /* グローバル値 */
 cursor: inherit;
 cursor: initial;
+cursor: revert;
 cursor: unset;
-
- -

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

- -

それぞれの <url> には二つの空白で区切った数値を続けることができ、 <x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

- -

例えば、これは <url> 値を使用して二つの画像を指定し、 <x><y> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードで代替されるように指定しています。

- -
cursor: url(one.svg), url(two.svg) 5 5, progress;
- -

値

- -
-
<url>
- url(…) の形式か、又はカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の {{cssxref("<url>")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。 -
<x> <y> {{experimental_inline}}
-
任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。
-
キーワード値
-
-

値の上にマウスを当てると、各項目の実際の表示を確認できます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
カテゴリCSS 値例説明
一般auto現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
defaultdefault.gifプラットフォームに依存する既定のカーソルです。ふつうは矢印です。
noneカーソルを表示しません。
リンクおよび状態context-menucontext-menu.pngコンテキストメニューが利用できることを示します。
helphelp.gifヘルプが使用可能であることを示します。
pointerpointer.gifカーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
progressprogress.gifバックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
waitwait.gifプログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
選択cellcell.gif表のセルまたは一連のセルが選択できることを示します。
crosshaircrosshair.gif十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
texttext.gifテキストを選択可能であることを示します。通常、 I ビームが表示されます。
vertical-textvertical-text.gif縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ＆ドロップaliasalias.gifエイリアスやショートカットが作成されることを示します。
copycopy.gif何かがコピーされることを示します。
movemove.gif何かが移動されることを示します。
no-dropno-drop.gif現在の位置にアイテムがドロップできないことを示します。
- {{bug("275173")}}: Windows および Mac OS X では、 no-drop が not-allowed と同じです。
not-allowednot-allowed.gif要求された操作が受け付けられないことを示します。
grabgrab.gif何かがグラブ (移動のためにドラッグ) することができることを示します。
grabbinggrabbing.gif何かがグラブ (移動のためにドラッグ) されようとしていることを示します。
サイズ変更＆スクロールall-scrollall-scroll.gif何かが任意の方向にスクロール (パン) 可能であることを示します。
- {{bug("275174")}}: Windows では、 all-scroll は move 同じです。
col-resizecol-resize.gifアイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
row-resizerow-resize.gifアイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
n-resize上方向へのサイズ変更カーソルの例辺が移動できることを表します。例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われます。
- 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize および s-resize は ns-resize と同じです。
e-resize右方向へのサイズ変更カーソルの例
s-resize下方向へのサイズ変更カーソルの例
w-resize左方向へのサイズ変更カーソルの例
ne-resize右上方向へのサイズ変更カーソルの例
nw-resize左上方向へのサイズ変更カーソルの例
se-resize右下方向へのサイズ変更カーソルの例
sw-resize左下方向へのサイズ変更カーソルの例
ew-resize3-resize.gif双方向へのサイズ変更が可能であることを示します。
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
拡大/縮小zoom-inzoom-in.gif -

拡大/縮小が可能であることを示す

-
zoom-outzoom-out.gif
-
-
- -

使用上の注意

- -

仕様書では cursor について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

- -

カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

+``` + + `cursor` プロパティはゼロ個以上の `` をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの `` は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。 + +それぞれの `` には空白で区切った 2 つの数値を続けることができ、`` 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。 + +例えば、これは `` 値を使用して 2 つの画像を指定し、`` 座標を 2 つ目に設定し、どちらの画像も読み込めなかったときは `progress` キーワードで代替されるように指定しています。 + +```css +cursor: url(one.svg), url(two.svg) 5 5, progress; +``` + +### 値 + +- `` + `url(…)` の形式か、またはカンマ区切りのリスト `url(…), url(…), …` で画像の URL を指定します。複数の {{cssxref("url()")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定*しなければなりません*。詳細は [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)を参照して下さい。 +- `` `` {{experimental_inline}} + - : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。 +- キーワード値 + + - : _値の上にマウスを当てると、各項目の実際の表示を確認できます。_ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
カテゴリーCSS 値例説明
一般auto + 現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。 +
defaultプラットフォームに依存する既定のカーソルです。ふつうは矢印です。
noneカーソルを表示しません。
リンクおよび状態context-menucontext-menu.pngコンテキストメニューが利用できることを示します。
helpヘルプが使用可能であることを示します。
pointer + カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。 +
progress + プログラムがバックグラウンドでビジー状態であるが、(wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。 +
wait + プログラムがビジー状態で、(progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。 +
選択cell表のセルまたは一連のセルが選択できることを示します。
crosshair十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
textテキストを選択可能であることを示します。通常、I ビームが表示されます。
vertical-textvertical-text.gif + 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。 +
ドラッグ＆ドロップaliasエイリアスやショートカットが作成されることを示します。
copy何かがコピーされることを示します。
move何かが移動されることを示します。
no-drop + no-drop.gif + + 現在の位置にアイテムがドロップできないことを示します。
{{bug("275173")}}: Windows および Mac OS X では、no-drop は not-allowed と同じです。 +
not-allowednot-allowed.gif要求された操作が受け付けられないことを示します。
grab何かをグラブ (移動のためにドラッグ) することができることを示します。
grabbing何かをグラブ (移動のためにドラッグ) していることを示します。
+ サイズ変更＆スクロール + all-scrollall-scroll.gif + 何かが任意の方向にスクロール (パン) 可能であることを示します。
{{bug("275174")}}: Windows では、 all-scroll は move 同じです。 +
col-resizecol-resize.gif + アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。 +
row-resizerow-resize.gif + アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。 +
n-resize + 上方向へのサイズ変更カーソルの例 + 辺が移動できることを表します。例えば、se-resize のカーソルはボックスの*南東* (south-east) の角から移動を開始した時に使われます。
環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize と s-resize は ns-resize と同じになります。
e-resize + 右方向へのサイズ変更カーソルの例 +
s-resize + 下方向へのサイズ変更カーソルの例 +
w-resize + 左方向へのサイズ変更カーソルの例 +
ne-resize + 右上方向へのサイズ変更カーソルの例 +
nw-resize + 左上方向へのサイズ変更カーソルの例 +
se-resize + 右下方向へのサイズ変更カーソルの例 +
sw-resize + 左下方向へのサイズ変更カーソルの例 +
ew-resize3-resize.gif双方向へのサイズ変更が可能であることを示します。
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
拡大/縮小zoom-inzoom-in.gif +

拡大/縮小が可能であることを示します。

+
zoom-outzoom-out.gif
+ +## 使用上の注意 + +仕様書では `cursor` について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。 + +カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

カーソルの種類の設定

+

カーソルの種類の設定

-
.foo {
+```css
+.foo {
   cursor: crosshair;
 }
 
@@ -290,40 +351,18 @@ cursor: unset;
 .baz {
   cursor: url("hyper.cur"), auto;
 }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}幾つかのキーワード、ポジション構文、 url() 関数形式の追加
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -
{{Compat("css.properties.cursor")}}
- -

関連情報

- - +``` + +## 仕様書 + +{{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()")}} 関数 -- cgit v1.2.3-54-g00ecf