はじめに
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を使ってみよう!
値のみを指定した場合
分類からそれぞれ1~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
}
それでは見てみましょう。

コメント