SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.08.12
  • CATEGORY
TITLE

【CSS】cursorカーソルデザインについて36種類のご紹介

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】cursorプロパティについてマウスポインターを指定する
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • cursorプロパティについて学びたい方へ
  • cursorデザインについての記事になります

cursorプロパティとは、マウスポインターのデザインを指定します。
デフォルトは「矢印」ですが、「オリジナルの画像」や「ズーム、ズームアウト」などに変更することも可能です。

cursorについて

cursorについて

cursorプロパティとは、マウスポインターのデザインを指定します。
書き方は以下のようになります。

/*オリジナル画像の指定*/
要素 { cursor: url(画像パス), auto;}

/*矢印などの指定*/
要素 { cursor: 値;}

cursor オリジナル画像の指定について

オリジナル画像を指定する際には、URLを指定します。
その後ろにカンマ(,)に続けて、画像が表示できない場合の指定をしておきます。
また「auto」を指定していることで、画像が表示しない場合はデフォルトのcursorが表示します。

/*オリジナル画像の指定*/
要素 { cursor: url(画像パス), auto;}
画像に対して指定できる値
  • url(画像パス)
    オリジナル画像を指定する際には、URLを指定します。
    その後ろにカンマ(,)に続けて、画像が表示できない場合の指定をしておきます。
    IEのバージョンによっては、「*.cur」または「*.ani」形式の画像を用意する必要があります。
  • url()ポインターの位置
    cursor: url(画像パス) 20 30のようにスペースで数値を入力するとx軸、y軸で画像の位置を指定できます。
    数値が1つだけの場合はとx軸、y軸ともに同じ値になります。単位は必要ありません。

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
画像を指定する際には、「画像」を指定後、カンマ(,)を入れ値(キーワード)を入力しておきましょう。
※値(キーワード)とは「auto」、「pointer」など 次の章で解説します。

画像に対して指定できる値

01:url(画像パス)

02:url()ポインターの位置

<p class="cursor-01">01:url(画像パス)</p>
<p class="cursor-02">02:url()ポインターの位置</p>
/*共通CSS*/
.cursor-txt {
	width: 30%;
	border: solid 2px #ccc;
	padding: 10px 20px;
	font-weight: bold;
}

/*cursor-01*/
p.cursor-01 {
	cursor: url(画像パス), auto;
}

/*cursor-02*/
p.cursor-02 {
	cursor: url(画像パス) 20 30, auto;
}

cursor デザイン(一般)指定について

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。

(一般)

03:自動的にブラウザが決める

04:カーソル(初期値)

05:ポインター非表示

<p class="cursor-03">03:自動的にブラウザが決める</p>
<p class="cursor-04">04:カーソル(初期値)</p>
<p class="cursor-05">05:ポインター非表示</p>
/*共通CSS 省略*/
/*cursor-03*/
p.cursor-03 {cursor: auto;}

/*cursor-04*/
p.cursor-04 {cursor: default;}

/*cursor-05*/
p.cursor-05 {cursor: none;}

cursor デザイン(リンク用、特定状態用)指定について

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。

(リンク用、特定状態用)

06:コンテキストメニュー用

07:ヘルプ用

08:リンク用

09:ビジー状態になり、ユーザーによる操作が可能な状態

10:ビジー状態になり、ユーザーによる操作が不能な状態

<p class="cursor-06">06:コンテキストメニュー用</p>
<p class="cursor-07">07:ヘルプ用</p>
<p class="cursor-08">08:リンク用</p>
<p class="cursor-09">09:ビジー状態になり、ユーザーによる操作が可能な状態</p>
<p class="cursor-10">10:ビジー状態になり、ユーザーによる操作が不能な状態</p>
/*共通CSS 省略*/
/*cursor-06*/
p.cursor-06 {cursor: context-menu;}

/*cursor-07*/
p.cursor-07 {cursor: help;}

/*cursor-08*/
p.cursor-08 {cursor: pointer;}

/*cursor-09*/
p.cursor-09 {cursor: progress;}

/*cursor-10*/
p.cursor-10 {cursor: wait;}

cursor デザイン(選択用)指定について

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。

(選択用)

11:セル選択用

12:範囲選択用

13:テキスト選択用

14:縦書きテキスト

<p class="cursor-11">11:セル選択用</p>
<p class="cursor-12">12:範囲選択用</p>
<p class="cursor-13">13:テキスト選択用</p>
<p class="cursor-14">14:縦書きテキスト</p>
/*共通CSS 省略*/
/*cursor-11*/
p.cursor-11 {cursor: cell;}

/*cursor-12*/
p.cursor-12 {cursor: crosshair;}

/*cursor-13*/
p.cursor-13 {cursor: text;}

/*cursor-14*/
p.cursor-14 {cursor: vertical-text;}

cursor デザイン(ドラッグ・アンド・ドロップ)指定について

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。

(ドラッグ・アンド・ドロップ)

15:エイリアスやショートカット用

16:コピー用

17:移動用

18:ドロップができない領域用

19:操作ができない領域用

<p class="cursor-15">15:エイリアスやショートカット用</p>
<p class="cursor-16">16:コピー用</p>
<p class="cursor-17">17:移動用</p>
<p class="cursor-18">18:ドロップができない領域用</p>
<p class="cursor-19">19:操作ができない領域用</p>
/*共通CSS 省略*/
/*cursor-15*/
p.cursor-15 {cursor: alias;}

/*cursor-16*/
p.cursor-16 {cursor: copy;}

/*cursor-17*/
p.cursor-17 {cursor: move;}

/*cursor-18*/
p.cursor-18 {cursor: no-drop;}

/*cursor-19*/
p.cursor-19 {cursor: not-allowed;}

cursor デザイン(リサイズ、スクロール用)指定について

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。

(リサイズ、スクロール用)

20:上側へのリサイズを用

21:右側へのリサイズを用

22:左側へのリサイズを用

23:下側へのリサイズを用

24:左上側へのリサイズを用

25:右上側へのリサイズを用

26:右下側へのリサイズを用

27:左下側へのリサイズを用

28:左右へのリサイズを用

29:上下へのリサイズを用

30:右上、左下へのリサイズを用

31:左上、右下へのリサイズを用

32:列のリサイズ用

33:行のリサイズ用

34:任意の方向にスクロール可能を示す

<p class="cursor-20">20:上側へのリサイズを用</p>
<p class="cursor-21">21:右側へのリサイズを用</p>
<p class="cursor-22">22:左側へのリサイズを用</p>
<p class="cursor-23">23:下側へのリサイズを用</p>
<p class="cursor-24">24:左上側へのリサイズを用</p>
<p class="cursor-25">25:右上側へのリサイズを用</p>
<p class="cursor-26">26:右下側へのリサイズを用</p>
<p class="cursor-27">27:左下側へのリサイズを用</p>
<p class="cursor-28">28:左右へのリサイズを用</p>
<p class="cursor-29">29:上下へのリサイズを用</p>
<p class="cursor-30">30:右上、左下へのリサイズを用</p>
<p class="cursor-31">31:左上、右下へのリサイズを用</p>
<p class="cursor-32">32:列のリサイズ用</p>
<p class="cursor-33">33:行のリサイズ用</p>
<p class="cursor-34">34:任意の方向にスクロール可能を示す</p>
/*共通CSS 省略*/
/*cursor-20*/
p.cursor-20 {cursor: n-resize;}

/*cursor-21*/
p.cursor-21 {cursor: e-resize;}

/*cursor-22*/
p.cursor-22 {cursor: s-resize;}

/*cursor-23*/
p.cursor-23 {cursor: w-resize;}

/*cursor-24*/
p.cursor-24 {cursor: nw-resize;}

/*cursor-25*/
p.cursor-25 {cursor: ne-resize;}

/*cursor-26*/
p.cursor-26 {cursor: se-resize;}

/*cursor-27*/
p.cursor-27 {cursor: sw-resize;}

/*cursor-28*/
p.cursor-28 {cursor: ew-resize;}

/*cursor-29*/
p.cursor-29 {cursor: ns-resize;}

/*cursor-30*/
p.cursor-30 {cursor: nesw-resize;}

/*cursor-31*/
p.cursor-31 {cursor: nwse-resize;}

/*cursor-32*/
p.cursor-32 {cursor: col-resize;}

/*cursor-33*/
p.cursor-33 {cursor: row-resize;}

/*cursor-34*/
p.cursor-34 {cursor: all-scroll;}

cursor デザイン(ズーム用)指定について

マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。

(ズーム用)

35:ズームイン用

36:ズームアウト用

<p class="cursor-35">35:ズームイン用</p>
<p class="cursor-36">36:ズームアウト用</p>
/*共通CSS 省略*/
/*cursor-35*/
p.cursor-35 {cursor: zoom-in;}

/*cursor-36*/
p.cursor-36 {cursor: zoom-out;}

まとめ

今回はこれで以上です。

POINT
  • cursorプロパティとは、マウスポインターのデザインを指定します。
  • 画像を指定する際には、「画像」を指定後、カンマ(,)を入れ値(キーワード)を入力しておきましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top