From d54b0e0f0a7aa80f4bb20fbdab8ee03a381c4ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:38:00 +0900 Subject: .html を .md に改名 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/cursor/index.html | 329 ------------------------------------- files/ja/web/css/cursor/index.md | 329 +++++++++++++++++++++++++++++++++++++ 2 files changed, 329 insertions(+), 329 deletions(-) delete mode 100644 files/ja/web/css/cursor/index.html create mode 100644 files/ja/web/css/cursor/index.md (limited to 'files/ja/web/css/cursor') diff --git a/files/ja/web/css/cursor/index.html b/files/ja/web/css/cursor/index.html deleted file mode 100644 index cd3cb00f97..0000000000 --- a/files/ja/web/css/cursor/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: cursor -slug: Web/CSS/cursor -tags: - - Arrow - - CSS - - CSS Property - - CSS プロパティ - - Cursor - - Custom Cursor - - Reference - - UI - - mouse - - pointer - - 'recipe:css-property' - - カスタムカーソル - - カーソル - - ポインター - - マウス -translation_of: Web/CSS/cursor ---- -

{{CSSRef}}

- -

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

- -
{{EmbedInteractiveExample("pages/css/cursor.html")}}
- - - -

構文

- -
/* キーワード値 */
-cursor: pointer;
-cursor: auto;
-
-/* URL とキーワードによる代替 */
-cursor: url(hand.cur), pointer;
-
-/* URL と座標とキーワードによる代替 */
-cursor: url(cursor1.png) 4 12, auto;
-cursor: url(cursor2.png) 2 2, pointer;
-
-/* グローバル値 */
-cursor: inherit;
-cursor: initial;
-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}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

カーソルの種類の設定

- -
.foo {
-  cursor: crosshair;
-}
-
-.bar {
-  cursor: zoom-in;
-}
-
-/* URL を使用する場合は、代替のキーワード値が必要です。 */
-.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")}}
- -

関連情報

- - diff --git a/files/ja/web/css/cursor/index.md b/files/ja/web/css/cursor/index.md new file mode 100644 index 0000000000..cd3cb00f97 --- /dev/null +++ b/files/ja/web/css/cursor/index.md @@ -0,0 +1,329 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Arrow + - CSS + - CSS Property + - CSS プロパティ + - Cursor + - Custom Cursor + - Reference + - UI + - mouse + - pointer + - 'recipe:css-property' + - カスタムカーソル + - カーソル + - ポインター + - マウス +translation_of: Web/CSS/cursor +--- +

{{CSSRef}}

+ +

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

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+cursor: pointer;
+cursor: auto;
+
+/* URL とキーワードによる代替 */
+cursor: url(hand.cur), pointer;
+
+/* URL と座標とキーワードによる代替 */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* グローバル値 */
+cursor: inherit;
+cursor: initial;
+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}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

カーソルの種類の設定

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL を使用する場合は、代替のキーワード値が必要です。 */
+.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")}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf