はじめに
HTML＆CSS入門講座の第十七弾として、【CSS】 cursorの基本の使い方ついて紹介します。 この記事を読むと次の疑問について知ることができます。●cssのcursorとは？
●cursorの基本的な使い方はどうすればよいの？
・cursorの取れる値と書き方
・cursorの値一覧にはなにがあるの？
・cursorを使ってみよう！
値のみを指定した場合
画像を使った場合
HTML＆CSS入門講座（16）では、【CSS】z-indexの基本の使い方について解説してきました。
ここでは【CSS】 cursorの基本の使い方について深堀していきます。
cssのcursorとは？
Windows10では、cursorの形状や大きさなどは、「Winスタート」⇒左メニューの「設定」⇒「簡単操作」⇒「マウスポインタ」や「」テキストカーソル」から大きさや色などの変更、「Winスタート」⇒左メニューの「設定」⇒「デバイス」⇒「マウス」⇒右にある「その他のマウスオプション」⇒マウスのプロパティの「ポインター」の「カスタマイズ」からマウス形状を選ぶことができます。 cssでも、cursorのプロパティで形状を変更することができます。 どのようなcursorに変更できるのか？、また、主要なcursor形状の一覧などを紹介します。cursorの基本的な使い方
cursorの取れる値と書き方
cursorは、初期値はautoになっています。 autoでは、テキストならテキスト内に入れ易いように縦線型のcursorに、リンクなら指の形状のcursorにと言う具合に状況により変化します。 「CSS Basic User Interface Module Level 3 cursor の定義」により、幾つかのキーワード、ポジション構文、 url() 関数形式の追加（画像の読み込みurl）が追加されました。 それでは、cssではどのようにしてカーソルの形状を変えるのでしょうか？ cursorの書き方は、次の通りcursorの値一覧
カーソルの値一覧を次の載せます。| 分類 | cursorの値 | 説明 |
| 通常 | auto | 初期値、文書内容により適したcursorに変更 |
| default | 通常の矢印 | |
| none | cursorを表示させない | |
| リンクや状態 | context-menu |
コンテキストメニューのアイコンが付いたポインターの表示
|
| help |
クエスチョンマークの付いたポインターを表示
|
|
| pointer |
リンクを表す指差しマークのポインターを表示
|
|
| progress |
ビジー状態のアイコンのポインターが表示（ユーザーの操作可能）
|
|
| wait | ビジー状態のアイコンのポインターが表示（ユーザーの操作不可能） | |
| 選択 | cell |
セルまたはセルグループを選択できるポインターを表示
|
| crosshair |
シンプルな十字のポインターを表示
|
|
| text |
テキストを選択、入力できる縦バーのポインターを表示
|
|
| virtical-text |
縦書きのテキストの選択、入力可能を表す横バーのポインターを表示
|
|
| ドラッグ＆ドロップ | alias |
ショートカットやエイリアスを作成可能な小さな矢印が付いたポインターを表示
|
| copy |
コピーできることを表すプラス（+）マークが付いたポインターを表示
|
|
| move |
移動できることを表す矢印十字のマークが付いたポインターを表示
|
|
| no-drop |
ドラッグ＆ドロップ禁止を表すマークが付いたポインターを表示
|
|
| not-allowed |
処理を実行不可のマークが付いたポインターを表示
|
|
| grab | ドラッグ可能であることを示すポインターを表示 | |
| grabbing | ドラッグ中であることを示すポインターを表示 | |
| サイズ変更とスクロール | all-scroll |
任意の方向へスクロールできるポインターを表示
|
| row-resize |
行の高さを変更できるポインターを表示
|
|
| col-resize |
列の幅を変更できるポインターを表示
|
|
| e-resize |
右方向にサイズ変更できるポインターを表示
|
|
| ne-resize |
右上方向にサイズ変更できるポインターを表示
|
|
| n-resize |
上方向にサイズ変更できポインターを表示
|
|
| nw-resize |
左上方向にサイズ変更できるポインターを表示
|
|
| w-resize |
左方向にサイズ変更できるポインターを表示
|
|
| sw-resize |
左下方向にサイズ変更できるポインターを表示
|
|
| s-resize |
下方向にサイズ変更できるポインターを表示
|
|
| se-resize |
右下方向にサイズ変更できるポインターを表示
|
|
| ew-resize |
左右方向にサイズ変更できるポインターを表示
|
|
| ns-resize |
上下方向にサイズ変更できるポインターを表示
|
|
| nesw-resize |
右上左下方向にサイズ変更できるポインターを表示
|
|
| nwse-resize |
左上右下方向にサイズ変更できるポインターを表示
|
|
| 拡大、縮小 | zoom-in | 拡大を示すポインターを表示 |
| zoom-out | 縮小を示すポインターを表示 |
cursorを使ってみよう！
値のみを指定した場合
分類からそれぞれ１～2つ選んで試してみましょう。 通常から「default」、選択から「crosshair」、ドラッグ＆ドロップから「not-allowed」、サイズ変更とスクロールから「col-resize」と「nwse-resize」、拡大、縮小から「zoom-in」を表示して見たいと思います。<h3>下記の文書にマウスカーソルを合わせるとどのように変わるかを見て下さい。</h3>
<div>
<div class="default">このカーソル形状は通常の矢印のポインタ「default」です。</div>
<div class="space"></div>
<div class="crosshair">このカーソル形状はシンプルな十字のポインタ「crosshair」です。</div>
<div class="space"></div>
<div class="not-allowed">このカーソル形状は処理を実行不可のマークが付いたポインター「not-allowed」です。</div>
<div class="space"></div>
<div class="col-resize">このカーソル形状は列の幅を変更できるポインター「col-resize」です。</div>
<div class="space"></div>
<div class="nwse-resize">このカーソル形状は左上右下方向にサイズ変更できるポインター「nwse-resize」です。</div>
<div class="space"></div>
<div class="zoom-in">このカーソル形状は拡大を示すポインター「zoom-in」です。</div>
</div>
.space {
height:20px;
}
.default {
cursor: default;
height: 50px;
background-color: aqua;
}
.crosshair {
cursor:crosshair;
height: 50px;
background-color:black;
color:white
}
.not-allowed {
cursor:not-allowed;
height: 50px;
background-color:blue;
color:white
}
.col-resize {
cursor:col-resize;
height: 50px;
background-color:orange;
}
.nwse-resize {
cursor:nwse-resize;
height: 50px;
background-color:red;
color:white
}
.zoom-in {
cursor:zoom-in;
height: 50px;
background-color:green;
color:white
}
画像を使った場合
次は、画像を使ったカーソルの指定をしてみたいと思います。 1つは、下のカーソルの画像の無料配布サイトから取ってきた（パソコン画像）、もう一つは、私のサイトアイコンを使ってみたいと思います。 なお、アイコンサイズはあまりにも大きいと動作しませんでした。 Chromeでの検証ですが、パソコン画像が（50×43ピクセル）、サイトアイコン（100×100ピクセル）ではOKでした。 画像はAlvaro_cabrera - jp.freepik.com によって作成された icon ベクトルからのアイコンを使っています。 ありがとうございます。<h3>下記の文書にマウスカーソルを合わせるとパソコンアイコンとサイトアイコン（ウシの顔）が表れるのが見れます</h3>
<div id="pasoconicon">このカーソル形状はパソコン画像のアイコンポインタです。</div>
<div class="space"></div>
<div id="siteicon">このカーソル形状は私のサイトアイコンのポインタです。</div>
<div class="space"></div>
.space {
height:20px;
}
#pasoconicon {
cursor: url(https://yanai-ke.com/wp-content/uploads/2021/07/pasoconaicon01.png) 2 2, auto;
height: 50px;
background-color: aqua;
}
#siteicon {
cursor: url(https://yanai-ke.com/wp-content/uploads/2021/07/siteaicon.png) 10 5, default;
height: 50px;
background-color:red;
color:white
}
コメント