盗んで増やそう！CSSデザインの引き出し: 第4回 マウスカーソルの形状を変更する
盗むデザインアイデア
今回は参考サイト「UT ALORS!」から、「マウスカーソルの形状を変更する」というアイデアを盗みます。
UT ALORS!にアクセスして、ブラウザウィンドウの上下左右端にマウスカーソルを移動させてみてください。
画面内でマウスカーソルを動かすと、マウスカーソルの位置に応じて、その形状が上下左右の方向へ向いた三角形へと変更されますね。
参考サイトでは各コンテンツを画面いっぱいに広げ、コンテンツ間の遷移をユーザクリックをトリガーとしたスクロールに委ねています。
スクロール用のボタンを配置するのではなく、（ボタンを見えなくして）代わりにマウスカーソルの形状を変更することによって、クリックした際の挙動をユーザに伝えています。
グラフィックデザインを専門とする会社のサイトらしく、ビジュアルを推したデザインになっていますね。
鍵となるcursorプロパティ
「マウスカーソルの形状を変更する」を実現するための鍵となる技術はcursorプロパティです。
cursorは、ある要素上にマウスカーソルが重なった際のカーソル表示を指定するプロパティです。以下は、指定できる主な値です。
- auto
- default
- none
- context-menu
- help
- pointer
- progress
- cell
- text
- move
- col-resize
- url
cursorプロパティは次のように指定します。
/* pointerを指定する例 */ #foo { cursor: pointer; }
値によって色々な形状になりますが、参考サイトのような形状は用意されていません。独自の形状にしたい場合は「url」を使用します。
/* 独自の形状にする場合 */ #foo { cursor: url(ここに画像パスを指定) X座標 Y座標, フォールバック; }
url内にカーソルとして使用したい画像へのパスを記述し、X座標・Y座標ではポイント位置を指定します。ポイント位置とは、マウスカーソルの正確な位置を示すもので、マウスカーソルの形が矢印であればその先端部分に該当します。
フォールバックは、何かしらの理由でurl（＝先立って指定されたプロパティ）が使用できない場合の代替として使用されます。
例えば、30px四方の画像を使用する場合は以下のように指定します。
/* 30×30(px)の画像をカーソルとして使用する場合 */ #foo { cursor: url(‘pathtocursor.png’) 15 15, auto; }
X座標とY座標ともに15が指定されているため、画像の左上を基準としてX軸に15px、Y軸に15pxの箇所がポイント位置となります。座標を指定しなかった場合は、X座標Y座標ともに0pxとして計算されます。
また、フォールバックとしてautoが指定されているので、urlが使用できない際には、次のように指定したのと同じ挙動になります。
#foo { cursor: auto; }
autoを指定すると、ブラウザが自動でマウスカーソルの形状を決定します。
それでは、cursorプロパティを使用して参考サイトに近いデモを作成してみましょう。
サンプルでアイデアを試す
デモ完成形は以下のように、黒枠内の上下左右にマウスカーソルを動かすと、マウスカーソルの形状が変わるようになっています。
<!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>demo</title> <style> /* リセット */ html, body, header, footer, div { margin: 0; padding: 0; } /* 外枠 */ #frame { position: relative; width: 300px; height: 300px; margin: 10px auto 0; border: solid 5px #333; } /* top */ #top { position: absolute; top: 0; left: 30px; width: 240px; height: 30px; background-color: #ccc; } /* right */ #right { position: absolute; top: 30px; right: 0; width: 30px; height: 240px; background-color: #ccc; } /* bottom */ #bottom { position: absolute; bottom: 0; left: 30px; width: 240px; height: 30px; background-color: #ccc; } /* left */ #left { position: absolute; top: 30px; left: 0; width: 30px; height: 240px; background-color: #ccc; } </style> </head> <body> <div id=”frame”> <div id=”top”></div> <div id=”right”></div> <div id=”bottom”></div> <div id=”left”></div> </div> </body> </html>
親要素としてid名がframeの黒枠要素を用意し、その子要素として、次のid名が付いた要素を配置しています。
- top
- right
- bottom
- left
子要素は親要素を基準に絶対配置されているので、ひな形の構造は以下のようになります。
次に、各子要素上にマウスカーソルが重なったときに形状が変わるように、キーとなるcursorプロパティを適用します。
/* 追加箇所のみ記載 */ /* top */ #top { cursor: url(‘./images/top.png’), auto; } /* right */ #right { cursor: url(‘./images/right.png’), auto; } /* bottom */ #bottom { cursor: url(‘./images/bottom.png’), auto; } /* left */ #left { cursor: url(‘./images/left.png’), auto; }
この状態でブラウザで確認すると、各子要素にマウスカーソルが重なったときに形状が変わることが確認できます。
最後に各子要素の背景色を消すとデモの完成です。
/* 追加箇所のみ記載 */ /* top */ #top { background-color: none; } /* right */ #right { background-color: none; } /* bottom */ #bottom { background-color: none; } /* left */ #left { background-color: none; }
最後に
cursorプロパティを利用するとマウスカーソルの形状を自由に変更することができますが、できるだけデフォルトに近い形状や役割がはっきりとする画像を使用しましょう。ユーザはデフォルトのマウスカーソルでの挙動に慣れているため、見慣れない画像が使われると予期せぬ誤解や混乱を招く可能性があるからです。