CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのcursorプロパティ完全ガイド｜基本構文からカスタムカーソルまで

マウスカーソルの歴史は、1960年代後半にダグラス・エンゲルバート（Douglas Englebart）が世界初となるマウスとグラフィカルユーザーインターフェースを披露した、伝説のプレゼンテーション「すべてのデモの母（The Mother of All Demos）」にまで遡ります。マウスカーソルは、コンピュータ画面上のどこを指しているのかを視覚的に示してくれる重要な存在です。UXツールとして見ると、画面上の任意の場所で「何ができるのか」、あるいは「コンピュータが今何をしているのか」をユーザーに伝える役割において非常に優れています。

本記事では、Webページ上でマウスカーソルを活用し、サイトのユーザーエクスペリエンス（UX）を向上させるためのさまざまな方法を解説します。

cursorプロパティの構文

CSSセレクタでは、次の構文を使うことで、デフォルトの矢印以外のカーソルへ変更できます。

cursor: [ url(1.png), url(2.png) ], etc.,
        <mandatory keyword value>

最初の角括弧内には、カンマ区切りのURLリストを指定します。これは省略可能な値で、独自のカスタムカーソルを使えるようにするためのものです。インターネット上にはオリジナルカーソルを作成できるツールが多数公開されているので、あなただけのユニークなカーソルを簡単に用意できます。

カンマ区切りのリストを指定した場合、ブラウザはまず先頭のURLを読み込もうとします。ファイルが見つからない、またはURLが正しくない場合は、リストを順に下へたどり、動作するものを探します。最終的にどれも読み込めなければ、末尾に必須として指定したキーワードへフォールバックされます。

つまり、最初のパラメータ（URL群）は任意ですが、2番目のパラメータ（キーワード）は必須です。どの種類のカーソルを表示するかをブラウザに指示するキーワードを、必ず指定しなければなりません。主な利用可能な値は以下のコード例の通りです。

主要なカーソルタイプの一覧とサンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>      
    table {
     width:100%;
     text-align: center;
     border-collapse: collapse;
     font-family: 'Roboto', sans-serif;
   }
   thead {
     width: 100%;
     background: lightblue;
   }
 
   tr:nth-child(even) {
     background-color: lightgrey;
   }
 
   td {
     width: 32%;
     height: 50px;
     padding: 10px;
   }
 
   td.test {
     color: red;
     font-weight: bold;
   }
 
   td#auto {
     cursor: auto;
   }
 
   td#cell {
     cursor: cell;
   }
 
   td#crosshair {
     cursor: crosshair;
   }
 
   td#default {
     cursor: default;
   }
 
   td#none {
     cursor: none;
   }
 
   td#pointer {
     cursor: pointer;
   }
 
   td#help {
     cursor: help;
   }
 
   td#progress {
     cursor: progress;
   }
 
   td#wait {
     cursor: wait;
   }
 
   td#text {
     cursor: text;
   }
 
   td#vertical-text {
     cursor: vertical-text;
   }
 
   td#zoom-in {
     cursor: zoom-in;
   }
   td#zoom-out {
     cursor: zoom-out;
   }
</style>
</head>
<body>
  <table>
   <thead>
     <td>Cursor Type:</td>
     <td>Description:</td>
     <td>Test it Out: </td>
   </thead>
   <tr>
     <td>auto</td>
     <td>文脈に応じて適切なカーソルを自動的に選択する。</td>
     <td class="test" id="auto"> TEST </td>
   </tr>
   <tr>
     <td>default</td>
     <td>一般的には矢印。使用しているプラットフォームにより異なる。</td>
     <td class="test" id="default"> TEST </td>
   </tr>
   <tr>
     <td>help</td>
     <td>ヘルプが利用可能であることを示す。</td>
     <td class="test" id="help"> TEST </td>
   </tr>
   <tr>
     <td>none</td>
     <td>カーソルを非表示にする。</td>
     <td class="test" id="none"> TEST </td>
   </tr>
   <tr>
     <td>pointer</td>
     <td>リンクやボタンにホバーした際によく使われ、クリックできることを示す。</td>
     <td class="test" id="pointer"> TEST </td>
   </tr>
   <tr>
     <td>progress</td>
     <td>pointerとwaitを組み合わせたもので、処理中でもUIとの操作が可能であることを示す。</td>
     <td class="test" id="progress"> TEST </td>
   </tr>
   <tr>
     <td>text</td>
     <td>テキストを選択・ハイライトできることをユーザーに伝える。</td>
     <td class="test" id="text"> TEST </td>
   </tr>
   <tr>
     <td>wait</td>
     <td>コンピュータが処理中であり、ユーザーはUIを操作できないことを示す。</td>
     <td class="test" id="wait"> TEST </td>
   </tr>
   <tr>
     <td>zoom-in</td>
     <td>拡大できることをユーザーに示す。</td>
     <td class="test" id="zoom-in"> TEST </td>
   </tr>
   <tr>
     <td>zoom-out</td>
     <td>縮小できることをユーザーに示す。</td>
     <td class="test" id="zoom-out"> TEST </td>
   </tr>
 </table>
</body>
</html>

上記のコードは、サイトで利用できるカーソルのごく一部を紹介したものです。このほかにcell（セル選択）、crosshair（十字）、vertical-text（縦書きテキスト選択）などの種類もあります。すべての値を確認したい場合は、MDN Web Docsの公式ドキュメントを参照してください。

まとめ

今回は、ユーザーエクスペリエンスの向上につながる、Webサイトへのカーソル設定のさまざまな方法をご紹介しました。ページ上の各場所で「何ができるのか」をカーソルで明示することで、ユーザーはサイト操作時に何を期待すればよいのかを直感的に理解できます。ここで取り上げた以外にも、便利なカーソルタイプは数多く存在します。

ぜひ、自分のサイトのニーズに合わせてカーソルをカスタマイズする方法をいろいろ試してみてください。そして忘れてはならないのは、カーソルはUXの半分にすぎないという点です。もう半分は、ユーザーがカーソルの見た目から期待する動作を実際に実装することです。その部分については、また別の機会に詳しく解説します。ハッピーハッキング！

  1. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &