1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです！笑
こんな方に読んでほしい
cursorプロパティについて学びたい方へcursorプロパティとは、マウスポインターのデザインを指定します。
デフォルトは「矢印」ですが、「オリジナルの画像」や「ズーム、ズームアウト」などに変更することも可能です。
[記事の内容]
cursorプロパティとは、マウスポインターのデザインを指定します。
書き方は以下のようになります。
/*オリジナル画像の指定*/
要素 { cursor: url(画像パス), auto;}
/*矢印などの指定*/
要素 { cursor: 値;}
オリジナル画像を指定する際には、URLを指定します。
その後ろにカンマ(,)に続けて、画像が表示できない場合の指定をしておきます。
また「auto」を指定していることで、画像が表示しない場合はデフォルトのcursorが表示します。
/*オリジナル画像の指定*/
要素 { cursor: url(画像パス), auto;}
マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
画像を指定する際には、「画像」を指定後、カンマ(,)を入れ値(キーワード)を入力しておきましょう。
※値(キーワード)とは「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;
}マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
(一般)
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;}
マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
(リンク用、特定状態用)
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;}
マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
(選択用)
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;}
マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
(ドラッグ・アンド・ドロップ)
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;}
マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
(リサイズ、スクロール用)
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;}
マウスを乗せてみると、どのようにカーソルが変化するか確認してみてください。
(ズーム用)
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;}
今回はこれで以上です。
cursorプロパティとは、マウスポインターのデザインを指定します。
2024.03.07
2023.12.14
2023.06.22
2023.06.01
2024.03.07
2024.02.08
2024.01.25
2024.01.11
2023.12.26
2023.12.14
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog
