menu
menu

cursor【CSSリファレンス】 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook2
  • はてなブックマーク3
  • Google+2
  • Pocket0
  • Twitter0

cursor【CSSリファレンス】

  • CSS

cursor

こんにちは(・∀・)

 CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはcursorです。

概要

 cursorプロパティを使用してカーソルの形状を指定します。



.sample {
	cursor: auto;
}
適用要素

 すべての要素

指定できる値
解説 (カーソル一覧)    
auto 自動選択
default デフォルト
pointer リンク
crosshair クロス
move 移動
text テキスト
wait 処理中
help ヘルプ
n-resize 上リサイズ
e-resize 右リサイズ
s-resize 下リサイズ
w-resize 左リサイズ
ne-resize 右上リサイズ
se-resize 右下リサイズ
sw-resize 左下リサイズ
nw-resize 左上リサイズ
url(URI) オリジナル
オリジナルカーソル

 オリジナルカーソルを指定する場合、ユーザー環境によって利用できる画像形式が違うので、カンマ(,)で区切って複数のカーソルを指定する事ができます。また、初めに指定したものが優先されます。

 cursor: url(sample.cur), url(sample.png);


 画像が表示されないときに備えカンマ(,)に続けて任意のキーワードを指定する事もできます。

 cursor: url(sample.cur), text;

 カーソルに使用できるファイル形式はIEはカーソル(.cur)とアニメーションカーソル(.ani)です。FirefoxはGIF、JPEG、PNG等も使用できます。

 カーソル用の画像(.cur、.ani)を作成するにはアイコン作成ソフトが必要にです。


解説 (カーソル一覧)
*独自拡張
col-resize 左右リサイズ
row-resize 上下リサイズ
all-scroll 上下左右スクロール
not-allowed 不可
no-drop ドロップ不可
progress 処理中
vertical-text 縦書テキスト
初期値

 auto

サンプルデモ

カーソル一覧

auto

default

pointer

crosshair

move

text

wait

help

n-resize

e-resize

s-resize

w-resize

ne-resize

se-resize

sw-resize

nw-resize

url(URI)


独自拡張カーソル一覧

col-resize

row-resize

all-scroll

not-allowed

no-drop

progress

vertical-text

HTML

<p class="demo1">auto</p>
<p class="demo2">default</p>
<p class="demo3">pointer</p>
<p class="demo4">crosshair</p>
<p class="demo5">move</p>
<p class="demo6">text</p>
<p class="demo7">wait</p>
<p class="demo8">help</p>
<p class="demo9">n-resize</p>
<p class="demo10">e-resize</p>
<p class="demo11">s-resize</p>
<p class="demo12">w-resize</p>
<p class="demo13">ne-resize</p>
<p class="demo14">se-resize</p>
<p class="demo15">sw-resize</p>
<p class="demo16">nw-resize</p>
<p class="demo24">url(URI)</p>
<br>
<p>独自拡張カーソル一覧</p>
<p class="demo17">col-resize</p>
<p class="demo18">row-resize</p>
<p class="demo19">all-scroll</p>
<p class="demo20">not-allowed</p>
<p class="demo21">no-drop</p>
<p class="demo22">progress</p>
<p class="demo23">vertical-text</p>
CSS

.demo1 { cursor: auto; }
.demo2 { cursor: default; }
.demo3 { cursor: pointer; }
.demo4 { cursor: crosshair; }
.demo5 { cursor: move; }
.demo6 { cursor: text; }
.demo7 { cursor: wait; }
.demo8 { cursor: help; }
.demo9 { cursor: n-resize; }
.demo10 { cursor: e-resize; }
.demo11 { cursor: s-resize; }
.demo12 { cursor: w-resize; }
.demo13 { cursor: ne-resize; }
.demo14 { cursor: se-resize; }
.demo15 { cursor: sw-resize; }
.demo16 { cursor: nw-resize; }
.demo17 { cursor: col-resize; }
.demo18 { cursor: row-resize; }
.demo19 { cursor: all-scroll; }
.demo20 { cursor: not-allowed; }
.demo21 { cursor: no-drop; }
.demo22 { cursor: progress; }
.demo23 { cursor: vertical-text; }
.demo24 { cursor: url(cursor.cur); }
  • カテゴリー:CSS
  • facebook2
  • はてなブックマーク3
  • Google+2
  • Pocket0
  • Twitter0