diff options
Diffstat (limited to 'files/ja/web/css/cursor/index.md')
| -rw-r--r-- | files/ja/web/css/cursor/index.md | 329 |
1 files changed, 329 insertions, 0 deletions
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 +--- +<p>{{CSSRef}}</p> + +<p><strong><code>cursor</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。</p> + +<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +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; +</pre> + +<p> <code>cursor</code> プロパティはゼロ個以上の <code><a href="#<url>"><url></a></code> をカンマで区切ったものと、それに続く必須の<a href="#Keyword values">キーワード値</a>によって指定します。それぞれの <code><url></code> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。</p> + +<p>それぞれの <code><url></code> には二つの空白で区切った数値を続けることができ、 <code><a href="#<x> <y>"><x><y></a></code> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。</p> + +<p>例えば、これは <code><url></code> 値を使用して二つの画像を指定し、 <code><x><y></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="<url>"><url></code></dt> + <code>url(…)</code> の形式か、又はカンマ区切りのリスト <code>url(…), url(…), …</code> で画像の URL を指定します。複数の {{cssxref("<url>")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した <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="<x> <y>"><x></code> <code><y></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> + +{{csssyntax}} + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_cursor_types" name="Setting_cursor_types">カーソルの種類の設定</h3> + +<pre class="brush:css notranslate">.foo { + cursor: crosshair; +} + +.bar { + cursor: zoom-in; +} + +/* URL を使用する場合は、代替のキーワード値が必要です。 */ +.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> |