はじめに
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
}
コメント