ぱたぱたアニメ館

CSSカーソル

はじめに

このページでは、CSS で指定できる マウスカーソルの種類を実際に体験しながら確認できます。 各項目の文字の上にマウスを重ねると、カーソルの形が変わります。

カーソルにはそれぞれ意味があります。見た目だけで変更すると、利用者の混乱につながるため注意しましょう。

サンプル（マウスをのせて確認）

  • 自動選択されたカーソル（auto）
  • 標準カーソル（default）
  • リンクカーソル（pointer）
  • テキスト編集用カーソル（text）
  • 移動カーソル（move）
  • 禁止カーソル（not-allowed）
  • 待機カーソル（wait）
  • 進行中カーソル（progress）

CSS

CSS 

.cursor-list {
  list-style: none;
  padding: 0;
}

.cursor-list li {
  margin: 6px 0;
  font-weight: bold;
}

/* 基本 */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }

/* 状態を表す */
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }
.cursor-progress { cursor: progress; }

HTML

HTML 

<ul class="cursor-list">
  <li class="cursor-auto">自動選択されたカーソル（auto）</li>
  <li class="cursor-default">標準カーソル（default）</li>
  <li class="cursor-pointer">リンクカーソル（pointer）</li>
  <li class="cursor-text">テキスト編集用カーソル（text）</li>
  <li class="cursor-move">移動カーソル（move）</li>
  <li class="cursor-not-allowed">禁止カーソル（not-allowed）</li>
  <li class="cursor-wait">待機カーソル（wait）</li>
  <li class="cursor-progress">進行中カーソル（progress）</li>
</ul>

よく使われるカーソル

カーソル用途
default通常の表示
textテキスト入力・選択
moveドラッグで移動できる要素
not-allowed操作できないことを示す

resize 系カーソル

resize 系カーソルは、 「要素をリサイズ（サイズ変更）できること」をユーザーに示すためのカーソルです。CSS の cursor プロパティで指定します。

カーソルは 操作の目印 であり、実際のリサイズ処理には JavaScript が必要です。


cursor: ew-resize;   /* 左右 */
cursor: ns-resize;   /* 上下 */
cursor: nwse-resize; /* 斜め（↘↖） */
cursor: nesw-resize; /* 斜め（↙↗） */
CSS
ew → East-West（左右） ns → North-South（上下） nwse → NorthWest-SouthEast（左上→右下斜め） nesw → NorthEast-SouthWest（右上→左下斜め）

接頭辞を「resize-」にして指定して進めます / .resize-box を追加

見た目 → 「.resize-box」
挙動の意味 → 「.resize-ew」

CSS 

.resize-ew { cursor: ew-resize; }   /* 左右に伸縮 */
.resize-ns { cursor: ns-resize; }   /* 上下に伸縮 */
.resize-nwse { cursor: nwse-resize; } /* 斜めに伸縮（↘↖） */
.resize-nesw { cursor: nesw-resize; } /* 斜めに伸縮（↙↗） */

.resize-box {
  width: 200px;
  height: 50px;
  border: 1px solid #333;
}

実例：左右リサイズできるボックス・上下リサイズできるボックス

HTML 

<div class="resize-box resize-ew">左右に伸縮できます</div>
<div class="resize-box resize-ns">上下に伸縮できます</div>

マウスをこのボックスの端に置くと 左右 / 上下に変化させられる印 が表示されます。 実際にドラッグで幅を変えるには JavaScript が必要です。（カーソルはあくまで「目印」）

カスタムカーソル（応用）

「カスタムカーソル」は、自分で用意した画像やアニメーションをマウスカーソルとして使う方法のことです。 CSS の cursor プロパティで、画像ファイルを指定します。使用できる拡張子は、「.cur / .ani」対応状況はブラウザにより異なります。

CSS 

.custom-cursor {
  cursor: url(cursor.cur), auto;
}

例：静止カーソル

HTML 

<p class="custom-cursor">この文字にマウスをのせるとカーソルが変わります</p>
CSS 

.custom-cursor {
  cursor: url('arrow.cur'), auto;
}

arrow.cur は自作の矢印カーソル。マウスを文字に重ねると、この画像がカーソルになる。

例：アニメーションカーソル

CSS 

.custom-ani {
  cursor: url('spark.ani'), auto;
}

拡張子は 「.cur（静止）か .ani（アニメ）」。 「auto …」 ブラウザが標準カーソルを代わりに表示する指定（必須）。

「GIF：いろいろ」のページにアニメーションカーソルを掲載していますが、 矢印形状ではないため、実用用途には向きません。

注意（とても大切）

マウスカーソルの形には、それぞれ意味があります。

  • クリックできないのに pointer
  • 文字入力できないのに text
  • 常に wait

このような使い方は、ユーザーの混乱や誤操作の原因になります。カーソル変更は「意味があるときだけ」にしましょう。

上に戻る