マウスカーソル


cursor

 cursor属性はマウスカーソルの形状を設定します。下の例で黄色の矩形にかーするを合わせると砂時計カーソルを、水色の矩形にカーソルを合わせるとコピーカーソルに変化します。

<style>
#box1 {
  cursor: wait;
  width: 100px;
  height: 60px;
  border: thin solid black;
  background-color: yellow;
}

#box2 {
  cursor: copy;
  width: 100px;
  height: 60px;
  border: thin solid black;
  background-color: cyan;
}
</style>
<div id="box1">wait</div>
<div id="box2">copy</div>
wait
copy

 下の表はcursor属性が取る値のうちでよく使われるものの一覧です。

説明
all-scrollドラッグして地図などをスクロールするときに使われるカーソル
auto自動カーソル(矢印カーソル)
cell太い白十字
col-resize列幅を変えるとき使うカーソル
copyクリップボードへコピーするとき使うカーソル
crosshair細い黒十字
default矢印カーソル
helpクエスチョンマーク
no-dropドロップ不可を表すカーソル
noneカーソルを表示しない。
not-allowed進入禁止マーク
pointer指先カーソル
progress矢印+砂時計カーソル
row-resize行幅を変更するとき使うカーソル
textIビームカーソル
wait砂時計カーソル
zoom-in拡大カーソル
zoom-out縮小カーソル
initial初期状態(矢印カーソル)にする

 

このページの先頭へ戻る