VIDEO LESSON

CSSのcursorの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:13動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、カーソルです。
0:05リンクにマウスを乗せると矢印が指の形に変わったり、文章の上ではアイ型の形になったりするのを見たことがあるはずです。
0:14カーソルは、要素の上にポインターがあるとき、その見た目を決めるプロパティです。
0:19押せそう、書けそう、待ってほしい、といった操作の意味を、形でそっと伝える役割があります。
0:26ただし形を変えるだけでは、クリックの機能そのものは生まれません。
0:30その線引きも含めて、順番に見ていきましょう。
0:34身近な例で言えば、買い物サイトの購入ボタンで手の形になるからこそ、初めての人でも迷わず押せるわけです。
0:41まず基本の書き方です。
0:43書き方はほかのプロパティとまったく同じで、対象のセレクターに、プロパティ名、
0:47コロン、値、セミコロンを書きます。
0:51スライドの例では、クラス名デモを持つ要素に、カーソル、ポインターと指定しています。
0:57ポインターは、リンクなどでおなじみの、指さす手の形です。
1:01これで、その要素の上にポインターを移動すると、手の形に変わります。
1:06まずはこの一行を書いて、実際にマウスを乗せてみる、という小さな実験から始めてください。
1:12対象をセレクターで正確に選ぶことが第一歩です。
1:15指定できる主な値を、二回に分けて整理します。
1:19まず操作を伝える形です。
1:21ポインターは、押せる場所を示す手の形で、ボタンやリンクでよく見ます。
1:26ヘルプは、疑問符が付いた形で、説明や助けが用意されている合図です。
1:31テキストは、文章の上に出る縦棒に近い形で、文字を選んだり入力したりできることを示します。
1:38どの形も、使う人の次の行動を予想させるためのものです。
1:43値の名前と、出てくる形と、ふさわしい場面を、セットで言い分けられることが理解の土台になります。
1:50迷ったときは、その要素を初めて見た人が、形だけで何をすればよいか分かるかどうかを基準にしてください。
1:58続いて、状態を伝える形です。
2:00オートは初期の考え方で、要素や文脈に合わせてブラウザーがふさわしい形を選びます。
2:07デフォルトは通常の矢印のままにする指定です。
2:10ノットアラウドは禁止のマークで、今は操作できないことを示し、ウェイトは処理中なので待ってほしいことを示します。
2:19このほか、画像ファイルを指定して独自の形にし、読み込めないときのために代替のキーワードを後ろに書く方法もあります。
2:28見た目を飾るためではなく、状態を正直に伝えるために選ぶのが原則です。
2:34初期値と継承を確認します。
2:36仕様上の初期値はオート、通常の継承はします。
2:40ここは前のリサイズとは違う点で、親に指定すると子へも引き継がれるので、広い範囲に書くと予想外の場所まで形が変わることがあります。
2:52ただし、リンクやボタンなど、ブラウザーの既定スタイルを持つ要素では、既定の形が優先されて見えることもあります。
3:01汎用値も書けます。
3:03インヘリットは親の計算値、イニシャルは初期値オートに戻す指定、アンセットは継承するプロパティなのでインヘリットとして扱われます。
3:14範囲を絞りたいときは、親ではなく目的の要素そのものへ直接書く習慣を付けると、
3:19思わぬ広がりを防げます。
3:23実例を見ていきます。
3:25まずエイチティーエムエルの用意です。
3:27ステージという土台の箱の中に、操作の見本という文字のボタンをひとつ置きます。
3:32ボタンにはクラス、デモを付け、タイプはボタンにしています。
3:36頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
3:41ボタンという、もともと押すための要素を使うことが大切です。
3:45次のシーエスエスで土台の見た目を整えてから、最後にカーソルを指定し、ポインターを乗せたときの形がどう変わるかを比べます。
3:53次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
3:59ステージとデモには、余白や枠線、背景色といった土台の見た目を先に整えます。
4:05そして最後に、今回変更するプロパティとして、デモへカーソル、ポインターを追加します。
4:13これでブラウザーを開き、ボタンの上にポインターを移動すると、手の形に変わります。
4:20大切なのは、土台は比較のための下準備で、見た目の形を決めているのは最後の一行だ、
4:24という点です。
4:28同じデモが複数回登場する場合、通常は後の同じ詳細度の宣言が優先されます。
4:34値を変えて比べてみましょう。
4:36最後のカーソルの値だけを、ポインターからヘルプへ置き換えます。
4:40ファイルを保存してブラウザーを再読み込みし、もう一度ボタンの上にポインターを移動すると、
4:44今度は疑問符が付いた形に変わります。
4:48比較のコツは、変えるのはこの値ひとつだけにすることです。
4:52ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。
4:56余裕があれば、テキストやノットアラウドへも変えて、受ける印象がどう変わるかを確かめてみてください。
5:03実際の使いどころと配慮を整理します。
5:05一番大切なのは、ポインターを付けてもクリック処理やキーボード操作は追加されない、
5:09という点です。
5:12ただの箱に手の形だけを付けると、押せそうに見えて何も起きず、使う人を困らせます。
5:18操作には、もともとその意味を持つボタンやリンクを使い、カーソルはその合図を補うものと考えてください。
5:26また、スマートフォンのようなタッチ端末では、ポインターを乗せる動き自体がなく、
5:30同じ見え方とは限りません。
5:34形だけに頼らず、文字や見た目でも操作できることが伝わるようにしましょう。
5:39色や文字の大きさと合わせて、誰にとっても分かりやすい合図にすることが、結果として信頼につながります。
5:47効かないときの確認手順です。
5:49まず開発者ツールを開きます。
5:51ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認してください。
6:00スタイルズで宣言が無効扱いになっていたり、打ち消し線があったりすれば、別の宣言に負けています。
6:08コンピューテッドで最終的な値も確認しましょう。
6:11カーソル特有の注意として、確認はマウスで実際に乗せて行うこと、そしてタッチ端末では再現しない場合があることが挙げられます。
6:21三百二十ピクセル程度の画面幅やキーボード操作でも内容を利用できるかまで確かめてください。
6:28最後に互換性とまとめです。
6:30主要ブラウザーで古くから広く対応し、クロームは一以降、エッジは十二以降、
6:35ファイアフォックスは一以降で補足条件あり、サファリは一・二以降という記録です。
6:40アンドロイド版クロームは十八以降、アイオーエス版サファリは十三・四以降で補足条件があります。
6:46ポインターもヘルプも、同じ範囲で使えます。
6:49練習は、まずポインターとヘルプの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。
6:56まとめます。
6:57カーソルはポインターの形、初期値はオート、継承はします。
7:01そして形は機能ではない、という線引きを忘れないでください。
7:05値を一つずつ変えて比べる練習を重ねると、実務でも場面に合った形を迷わず選べるようになります。
7:11お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

cursorの役割と主な指定値を解説。対象上へポインターを移動すると形が変わります。タッチ端末では同じ見え方とは限りません。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのcursorの使い方：指定値・実例・効かない原因とブラウザー互換性 →