path: root/files/ja/web/css/cursor/index.html

---
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="#&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>

{{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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<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>