#navi(../)
* CSSでマウスカーソルの形状を設定する [#a4745ccf]
CSSでマウスカーソルの形状を設定する方法を以下に記します。

#contents
#htmlinsertpcsp(web-top.html,web-sp.html)

* 確認用ページ [#eff84983]
以下のURLで本記事の設定を確認することができます。

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

* マウスカーソルの形状を設定する書式 [#jfa998d5]
マウスカーソルの形状を設定する書式は以下の通りです。
 cursor: 形状値
マウスカーソルの形状値はいかのようのものがあります。
|形状値|説明|
|default|ブラウザのデフォルトの形状|
|auto|自動的に適切な形状になる|
|crosshair|十字の形状|
|help|ヘルプを示す形状|
|move|移動可能の形状|
|pointer|リンクの形状|
|text|テキスト選択の形状|
|wait|処理中の形状|
|n-resize&br;s-resize&br;w-resize&br;e-resize&br;ne-resize&br;nw-resize&br;se-resize&br;sw-resize|サイズ変更を示す形状・東西南北で示す|

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

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

** スタイルシート [#r99b4c22]
#ref(cursor.css)
 .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 [#n5876deb]
#ref(cursor.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>

#htmlinsertpcsp(web-btm.html,web-sp.html)
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS