このエントリーをはてなブックマークに追加


CSSでマウスカーソルの形状を設定する

CSSでマウスカーソルの形状を設定する方法を以下に記します。


スポンサーリンク

確認用ページ

以下のURLで本記事の設定を確認することができます。

http://web.just4fun.biz/css/2/

マウスカーソルの形状を設定する書式

マウスカーソルの形状を設定する書式は以下の通りです。

cursor: 形状値

マウスカーソルの形状値はいかのようのものがあります。

形状値説明
defaultブラウザのデフォルトの形状
auto自動的に適切な形状になる
crosshair十字の形状
helpヘルプを示す形状
move移動可能の形状
pointerリンクの形状
textテキスト選択の形状
wait処理中の形状
n-resize
s-resize
w-resize
e-resize
ne-resize
nw-resize
se-resize
sw-resize
サイズ変更を示す形状・東西南北で示す

マウスカーソル形状を変更するCSSとHTML

実際の動作に関しては確認ページでマウスカーソルの形状が変化する事を確認してみてください。

http://web.just4fun.biz/css/2/

スタイルシート

.default { cursor: default }
.auto { cursor: auto } 
.crosshair { cursor: crosshair } 
.help { cursor: help } 
.move { cursor: move } 
.pointer { cursor: pointer } 
.text { cursor: text } 
.wait { cursor: wait } 
.n-resize { cursor: n-resize } 
.s-resize { cursor: s-resize } 
.w-resize { cursor: w-resize } 
.e-resize { cursor: e-resize } 
.ne-resize { cursor: ne-resize } 
.nw-resize { cursor: nw-resize } 
.se-resize { cursor: se-resize } 
.sw-resize { cursor: sw-resize } 

HTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <title>CSS TABLE TR TD TEST</title>
    <link rel="stylesheet" type="text/css" href="cursor.css" />
  </head>
  <body>
マウスカーソルを以下のリンクに移動してください。<br />
マウスカーソルの形状が変更されます。<br />
<a href="#" class='default'>{ cursor: default }</a><br />
<a href="#" class='auto'>{ cursor: auto }</a><br />
<a href="#" class='crosshair'>{ cursor: crosshair }</a><br />
<a href="#" class='help'>{ cursor: help }</a><br />
<a href="#" class='move'>{ cursor: move }</a><br />
<a href="#" class='pointer'>{ cursor: pointer }</a><br />
<a href="#" class='text'>{ cursor: text }</a><br />
<a href="#" class='wait'>{ cursor: wait }</a><br />
<a href="#" class='n-resize'>{ cursor: n-resize }</a><br />
<a href="#" class='s-resize'>{ cursor: s-resize }</a><br />
<a href="#" class='w-resize'>{ cursor: w-resize }</a><br />
<a href="#" class='e-resize'>{ cursor: e-resize }</a><br />
<a href="#" class='ne-resize'>{ cursor: ne-resize }</a><br />
<a href="#" class='nw-resize'>{ cursor: nw-resize }</a><br />
<a href="#" class='se-resize'>{ cursor: se-resize }</a><br />
<a href="#" class='sw-resize'>{ cursor: sw-resize }</a><br />
  </body>
</html>

スポンサーリンク

添付ファイル: filecursor.html 88件 [詳細] filecursor.css 64件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-20 (金) 22:35:48 (1216d)