「CSSでカーソルの形を変更する」の編集履歴（バックアップ）一覧はこちら
「CSSでカーソルの形を変更する」(2015/11/16 (月) 22:09:10) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
リンクタグの場合は自動的にカーソルの形が変わりますが、jQueryの使用時にdivのboxなどに合わせた時にカーソルを変えたい時があります。そんな時にCSSでカーソルの形を変更する方法を記述していきます。11月15日記事
~
~
目次
#contents
~
~
----
~
*cursorプロパティ
cssにはcursorプロパティが存在します。それを変更していきます。
~
~
*コード
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>CSSでカーソルの形を変更する</title>
</head>
<body>
<div id="wrapper">
<div class="button" id="cursor1">auto</div>
<div class="button" id="cursor2">default</div>
<div class="button" id="cursor3">pointer</div>
<div class="button" id="cursor4">crosshair</div>
<div class="button" id="cursor5">move</div>
<div class="button" id="cursor6">text</div>
<div class="button" id="cursor7">wait</div>
<div class="button" id="cursor8">help</div>
<div class="button" id="cursor9">n-resize</div>
<div class="button" id="cursor10">s-resize</div>
<div class="button" id="cursor11">w-resize</div>
<div class="button" id="cursor12">e-resize</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding :20px;
border:1px solid #000;
width:480px;
min-height: 400px;
}
div.button{
width:458px;
padding:10px;
border: 1px solid #000;
border-radius: 6px;
text-align:center;
margin-bottom: 10px;
}
#cursor1{
cursor:auto;
}
#cursor2{
cursor:default;
}
#cursor3{
cursor:pointer;
}
#cursor4{
cursor:crosshair;
}
#cursor5{
cursor:move;
}
#cursor6{
cursor:text;
}
#cursor7{
cursor:wait;
}
#cursor8{
cursor:help;
}
#cursor9{
cursor:n-resize;
}
#cursor10{
cursor:s-resize;
}
#cursor11{
cursor:w-resize;
}
#cursor12{
cursor:e-resize;
}
~
~
*まとめ
意図的にカーソルを変えたい場合にのみ使用するようにし、あとはデフォルトで対応するといいと思います。
~
^
以上
