Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【52】カーソルの表示をいろいろ変えられる cursorプロパティ

最終更新日:2020年01月04日  (初回投稿日:2020年01月04日)

今回から、UI(User Interface ユーザーインターフェイス)のためのプロパティを使ってみよう。

最初はcursorプロパティ。これは、名前のまんま「カーソル」の表示を指定します。

<a>要素を使わずに JavaScriptなどでリンクを貼った時、カーソルをではなくにするなどの操作ができます。
また、自分で作った画像をカーソルとして使うこともできます。

cursorプロパティは、当然ですがPCブラウザのみで適用されます。
スマホやタブレットのブラウザには適用されません。マウスが無いから。

「カーソル」とはマウスポインターの現在位置を示すもの。
要素の種類によってカーソルの表示は変わります。

例えば、普段はデフォルトの「矢印」のカーソルが、テキストにマウスオーバーしたり、入力フォーム内では「テキスト用カーソル」に、リンク情では「指先の表示(ポインター)」になります。
ちなみに、テキスト入力時に入力位置で点滅している縦の線は「キャレット」と呼びます。

本日のINDEX
  1. cursorプロパティの値
    1. 汎用カーソル
    2. リンクと状態のカーソル
    3. 選択カーソル
    4. ドラッグ & ドロップのカーソル
    5. リサイズとスクロールのカーソル
    6. ズームカーソル
  2. cursorプロパティで画像を使ってみる
    1. 画像カーソルのサンプル(画像はCUR形式がオススメ)
    2. ホットスポットの x・y座標を設定したサンプル

参考:
CSS Basic User Interface Module Level 3 (CSS3 UI) | W3C Recommendation
cursor - CSS | MDN
cursorプロパティに URL 値を使用する | MDN

cursorプロパティの値

cursorプロパティの値は以下のものがあります。

cursorプロパティの値
キーワード autoがデフォルト値。
default、none、context-menu、help、pointer、progress、wait、cell、crosshair、text、vertical-text、alias、copy、move、no-drop、not-allowed、e-resize、n-resize、ne-resize、nw-resize、s-resize、se-resize、sw-resize、w-resize、ew-resize、ns-resize、nesw-resize、nwse-resize、col-resize、row-resize、all-scroll、zoom-in、zoom-out、grab、grabbing
URL url() のかたちで、画像のurlを指定。復数指定もできます。
単位なしの数値で、使用する画像の x座標、y座標を指定することもできます。
値の継承 する 適用できる要素 すべての要素

それぞれのキーワードは、以下のカーソルを表示します。
★「カーソル例」として表示した画像は Macのものです。Winは多少違う表示です。
★「見本」にマウスオーバーすると、カーソルを表示します。

汎用カーソル

cursor:auto
要素にふさわしいカーソルを、ブラウザが自動で切り替えます。これがデフォルト。
cursor:default
平常時のカーソル。たいていは矢印のカーソルです
カーソル例:
cursor:none
カーソル無し。
見本(マウスオーバーしてください)
(カーソルが無いと、めっちゃ不安になるのは私だけ?)

リンクと状態のカーソル

cursor:context-menu
コンテキストメニューが使えることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:help
ヘルプの使用ができることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:pointer
リンクに乗ったときなどの表示。たいていは指を指したようなカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:progress
プログラムがビジーの状態を表すカーソル。ユーザーが操作可能な状態です(waitじゃない)。
矢印に、回転しているボールや時計や砂時計などが付く表示。
カーソル例:
見本(マウスオーバーしてください)
cursor:wait
プログラムがビジー状態で操作不可な状態を表すカーソル。
時計や砂時計やサークルが回転している表示。
カーソル例:
見本(マウスオーバーしてください)

選択カーソル

cursor:cell
セルの選択を表すカーソル。たいていは白抜きのプラスマーク。
カーソル例:
見本(マウスオーバーしてください)
cursor:crosshair
ビットマップ上の選択を表すカーソル。たいていはプラスマーク。
カーソル例:
見本(マウスオーバーしてください)
cursor:text
テキスト選択を表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:vertical-text
縦書きテキスト選択を表すカーソル。
カーソル例:
見本(マウスオーバーしてください)

ドラッグ & ドロップのカーソル

cursor:alias
エイリアスやショートカットが作成されることを表すカーソル。たいていは曲がった矢印。
カーソル例:
見本(マウスオーバーしてください)
cursor:copy
コピーできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:move
移動できることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:no-drop
その位置にドロップできないことを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:not-allowed
そのアクションが実行できないことを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:grab
つかむことができる(=ドラッグできる)ことを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:grabbing
つかんでいる(=ドラッグしている)ことを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)

リサイズとスクロールのカーソル

cursor:e-resize
右(east = 東)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:w-resize
左(west = 西)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:n-resize
上(north = 北)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:s-resize
下(south = 南)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:ne-resize
右上(northeast = 北東)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:nw-resize
左上(northwest = 北西)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:se-resize
右下(southeast = 南東)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:sw-resize
左下(southwest = 南西)方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:ew-resize
左右(東と西)の双方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:ns-resize
上下(北と南)の双方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:nesw-resize
右上と左下(北東と南西)の双方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:nwse-resize
左上と右下(北西と南東)の双方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:col-resize
水平方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:row-resize
垂直方向にリサイズできることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:all-scroll
任意の方向にスクロールできることを表すカーソル。
中心点から上下左右の矢印があるカーソル(対応しているのは Win だけで、Mac は「move」「grab」と同じカーソルが出る)
カーソル例:
見本(マウスオーバーしてください)

ズームカーソル

cursor:zoom-in
拡大できることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)
cursor:zoom-out
縮小できることを表すカーソル。
カーソル例:
見本(マウスオーバーしてください)

cursorプロパティで画像を使ってみる

cursorプロパティで、画像を使ったカーソルもできます。

構文はこのようになっています。
cursor: [ <url> [ <x> <y>]?, ]* keyword;

[ ] はひとまとまりという意味。
疑問符(?)は「0または1回出現」という意味。
アスタリスク(*)は「0回以上出現」という意味。
構文の詳細は、 CSS の値の定義構文 | MDN をご覧ください。

<url>は、url( ) のカタチで括弧の中に画像ファイルのURLを書きます。
そしてURL のあとに x・y座標の数値を書いても書かなくてもOK。
x・y座標の数値は、画像の左上端( x='0' y='0' )がデフォルトのホットスポット(操作点。クリックしたり、テキスト選択したりする点)です。デフォルトから何pxずらすかを正の整数で単位無しで指定します。

この「x・y座標の数値」は CSS 3 から追加されました。
今のところ Chrome, Firefox, Opera が対応しています。IEは未対応。

で、そこまでを「,(カンマ)区切り」で復数指定できます
復数指定した場合、ブラウザは最初の画像を使用できない場合、次の画像を試す..を繰り返します。

最後に keyword を書きます。これ重要。キーワードが無いと無効です。
キーワードは前半に出てきたヤツ。( auto とか pointer とか)
ブラウザは、画像を試して使えなかったら最後はこのキーワードのカーソルを使います。

というわけで、下記のような書き方ができます。

/*最小のカタチはこんなかんじ*/
cursor: url(image/pointer.gif), pointer;

/*URLが2つ(=ブラウザが順に試す)*/
cursor: url(image/pointer.gif), url(http://www.example.com/pointer.cur), auto;

/*x・y座標の数値も指定(このサンプルは左上端から、右に8px、下に12pxずれた点がホットスポットに)*/
cursor: url(image/pointer.gif) 8 12, auto;

画像カーソルのサンプル(画像はCUR形式がオススメ)

サンプルです。
下のエリアをマウスオーバーすると、画像カーソルが出ます。

見本(マウスオーバーしてください)

サンプルのHTMLはこちら。

<div class="mihon">見本(マウスオーバーしてください)</div>

サンプルのCSSはこちら。

.mihon {
	margin:1.5em 0 3em;
	border:solid 1px #ccc;
	padding:1.4em;
	cursor:url(image/bigCur.png), url(image/bigCur.cur), auto;
	}

url( ) は「,(カンマ)」で区切って復数指定しています。(5行目)。
PNG形式では表示できないブラウザ(IE, Edge)のために、CUR形式も用意しました。

PNGから CUR形式への変換は、こちらのサイトが便利です↓
PNG CUR 変換 — Convertio(クリックで別ウィンドウで開きます)

ホットスポットの x・y座標を設定したサンプル

ホットスポットの x・y座標を設定したサンプルです。

この「x・y座標の数値」は CSS 3 から追加されました。
今のところ Chrome, Firefox, Opera が対応しています。IEは未対応。

40×50pxの画像ですが、ホットスポット(操作点)を x=40, y=50 にしたので、右下(矢印のお尻)がホットスポットになります。

見本(マウスオーバーしてください)

サンプルのHTMLはこちら。

<div class="mihon2">見本(マウスオーバーしてください)</div>

サンプルのCSSはこちら。

.mihon2 {
	margin:1.5em 0 3em;
	border:solid 1px #ccc;
	padding:1.4em;
	cursor:url(image/bigCur.png) 40 50, url(image/bigCur.cur) 40 50, auto;
	}

次回予告

次回は、caret-colorプロパティを使ってみよう。
これは テキスト入力時に、入力箇所を示す「キャレット」の「色」を指定します。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

関連記事

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
12 | 2020/01 | 02
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.