盗んで増やそう!CSSデザインの引き出し: 第4回 マウスカーソルの形状を変更する

BY 公開

盗んで上達 CSSテクニック

サンプルファイルをダウンロード

盗むデザインアイデア

今回は参考サイト「UT ALORS!」から、「マウスカーソルの形状を変更する」というアイデアを盗みます。

UT ALORS!にアクセスして、ブラウザウィンドウの上下左右端にマウスカーソルを移動させてみてください。

 図1 参考サイト「UT ALORS!」  図2 マウスカーソルが変更されている様子

画面内でマウスカーソルを動かすと、マウスカーソルの位置に応じて、その形状が上下左右の方向へ向いた三角形へと変更されますね。

参考サイトでは各コンテンツを画面いっぱいに広げ、コンテンツ間の遷移をユーザクリックをトリガーとしたスクロールに委ねています。

スクロール用のボタンを配置するのではなく、(ボタンを見えなくして)代わりにマウスカーソルの形状を変更することによって、クリックした際の挙動をユーザに伝えています。

グラフィックデザインを専門とする会社のサイトらしく、ビジュアルを推したデザインになっていますね。

鍵となるcursorプロパティ

「マウスカーソルの形状を変更する」を実現するための鍵となる技術はcursorプロパティです。

cursorは、ある要素上にマウスカーソルが重なった際のカーソル表示を指定するプロパティです。以下は、指定できる主な値です。

  • auto
  • default
  • none
  • context-menu
  • help
  • pointer
  • progress
  • cell
  • text
  • move
  • col-resize
  • url

cursorプロパティは次のように指定します。

/* pointerを指定する例 */ #foo { cursor: pointer; }  図3 cursorプロパティの各値での挙動

値によって色々な形状になりますが、参考サイトのような形状は用意されていません。独自の形状にしたい場合は「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>  図5 上記コードの表示結果

親要素としてid名がframeの黒枠要素を用意し、その子要素として、次のid名が付いた要素を配置しています。

  • top
  • right
  • bottom
  • left

子要素は親要素を基準に絶対配置されているので、ひな形の構造は以下のようになります。

 図6 ひな形の構造

次に、各子要素上にマウスカーソルが重なったときに形状が変わるように、キーとなるcursorプロパティを適用します。

 図7 各idで使用する画像。実際には、個別の画像で用意する

/* 追加箇所のみ記載 */ /* 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プロパティを利用するとマウスカーソルの形状を自由に変更することができますが、できるだけデフォルトに近い形状や役割がはっきりとする画像を使用しましょう。ユーザはデフォルトのマウスカーソルでの挙動に慣れているため、見慣れない画像が使われると予期せぬ誤解や混乱を招く可能性があるからです。

  AUTHOR

大谷 剛

株式会社サイバーエージェント / フロントエンドエンジニア / 1986年岐阜県生まれ。多摩美術大学美術学部卒。 2010年よりフロントエンドエンジニアとして株式会社サイバーエージェントに入社し、主にHTML/CSS/JavaScript等を扱う。 現在はSPA制作を行っている。 著書に「Adobe Edge Animate 標準ガイドブック」