01カーソルの種類
| HTML | CSS | |
 | <a href="#">001</a> | a {cursor: default} |
 | <a href="#">002</a> | a {cursor: pointer} |
 | <a href="#">003</a> | a {cursor: crosshair} |
| <a href="#">004</a> | a {cursor: text} | |
| <a href="#">005</a> | a {cursor: vertical-text} | |
| <a href="#">006</a> | a {cursor: help} | |
| <a href="#">007</a> | a {cursor: n-resize} | |
| <a href="#">008</a> | a {cursor: e-resize} | |
| <a href="#">009</a> | a {cursor: s-resize} | |
| <a href="#">010</a> | a {cursor: w-resize} | |
| <a href="#">011</a> | a {cursor: ne-resize} | |
| <a href="#">012</a> | a {cursor: se-resize} | |
| <a href="#">013</a> | a {cursor: sw-resize} | |
| <a href="#">014</a> | a {cursor: nw-resize} | |
| <a href="#">015</a> | a {cursor: col-resize} | |
| <a href="#">016</a> | a {cursor: row-resize} | |
| <a href="#">017</a> | a {cursor: not-allowed} | |
| <a href="#">018</a> | a {cursor: vertical-text} | |
| <a href="#">019</a> | a {cursor: url(URL)} |
| HTML | CSS | |
|---|---|---|
| <a href="#">001</a> | a {cursor: default} |
| <a href="#">002</a> | a {cursor: pointer} |
| <a href="#">003</a> | a {cursor: crosshair} |
 | <a href="#">004</a> | a {cursor: text} |
 | <a href="#">005</a> | a {cursor: vertical-text} |
 | <a href="#">006</a> | a {cursor: help} |
 | <a href="#">007</a> | a {cursor: n-resize} |
 | <a href="#">008</a> | a {cursor: e-resize} |
 | <a href="#">009</a> | a {cursor: s-resize} |
 | <a href="#">010</a> | a {cursor: w-resize} |
 | <a href="#">011</a> | a {cursor: ne-resize} |
 | <a href="#">012</a> | a {cursor: se-resize} |
 | <a href="#">013</a> | a {cursor: sw-resize} |
 | <a href="#">014</a> | a {cursor: nw-resize} |
 | <a href="#">015</a> | a {cursor: col-resize} |
 | <a href="#">016</a> | a {cursor: row-resize} |
 | <a href="#">017</a> | a {cursor: not-allowed} |
 | <a href="#">018</a> | a {cursor: vertical-text} |
 | <a href="#">019</a> | a {cursor: url(URL)} |
まとめ
- ほとんどのカーソルはIE 6以上、Firefox、Safari、Chromeで対応していますが使用する前には必ず確認が必要です
- 独自の画像をカーソルとして使用する際、ファイル形式は.curと.aniに変換する必要があります。(以下参考サイトです。)
- 何事もやりすぎには注意しましょう。
<strong>さらに詳しく学びたい方にオススメ！</strong>
