WEBVTT

1
00:00:00.000 --> 00:00:00.877
こんにちは。

2
00:00:00.877 --> 00:00:03.507
シーエスエス、リファレンス解説です。

3
00:00:03.507 --> 00:00:05.699
今回のテーマは、カーソルです。

4
00:00:05.699 --> 00:00:14.028
リンクにマウスを乗せると矢印が指の形に変わったり、文章の上ではアイ型の形になったりするのを見たことがあるはずです。

5
00:00:14.028 --> 00:00:19.727
カーソルは、要素の上にポインターがあるとき、その見た目を決めるプロパティです。

6
00:00:19.727 --> 00:00:26.157
押せそう、書けそう、待ってほしい、といった操作の意味を、形でそっと伝える役割があります。

7
00:00:26.157 --> 00:00:30.833
ただし形を変えるだけでは、クリックの機能そのものは生まれません。

8
00:00:30.833 --> 00:00:34.048
その線引きも含めて、順番に見ていきましょう。

9
00:00:34.048 --> 00:00:41.500
身近な例で言えば、買い物サイトの購入ボタンで手の形になるからこそ、初めての人でも迷わず押せるわけです。

10
00:00:41.500 --> 00:00:43.109
まず基本の書き方です。

11
00:00:43.109 --> 00:00:47.132
書き方はほかのプロパティとまったく同じで、対象のセレクターに、プロパティ名、

12
00:00:47.132 --> 00:00:51.154
コロン、値、セミコロンを書きます。

13
00:00:51.154 --> 00:00:57.151
スライドの例では、クラス名デモを持つ要素に、カーソル、ポインターと指定しています。

14
00:00:57.151 --> 00:01:01.247
ポインターは、リンクなどでおなじみの、指さす手の形です。

15
00:01:01.247 --> 00:01:06.074
これで、その要素の上にポインターを移動すると、手の形に変わります。

16
00:01:06.074 --> 00:01:12.364
まずはこの一行を書いて、実際にマウスを乗せてみる、という小さな実験から始めてください。

17
00:01:12.364 --> 00:01:15.728
対象をセレクターで正確に選ぶことが第一歩です。

18
00:01:15.728 --> 00:01:19.240
指定できる主な値を、二回に分けて整理します。

19
00:01:19.240 --> 00:01:21.155
まず操作を伝える形です。

20
00:01:21.155 --> 00:01:26.583
ポインターは、押せる場所を示す手の形で、ボタンやリンクでよく見ます。

21
00:01:26.583 --> 00:01:31.850
ヘルプは、疑問符が付いた形で、説明や助けが用意されている合図です。

22
00:01:31.850 --> 00:01:38.874
テキストは、文章の上に出る縦棒に近い形で、文字を選んだり入力したりできることを示します。

23
00:01:38.874 --> 00:01:43.184
どの形も、使う人の次の行動を予想させるためのものです。

24
00:01:43.184 --> 00:01:50.687
値の名前と、出てくる形と、ふさわしい場面を、セットで言い分けられることが理解の土台になります。

25
00:01:50.687 --> 00:01:58.668
迷ったときは、その要素を初めて見た人が、形だけで何をすればよいか分かるかどうかを基準にしてください。

26
00:01:58.668 --> 00:02:00.925
続いて、状態を伝える形です。

27
00:02:00.925 --> 00:02:07.373
オートは初期の考え方で、要素や文脈に合わせてブラウザーがふさわしい形を選びます。

28
00:02:07.373 --> 00:02:10.920
デフォルトは通常の矢印のままにする指定です。

29
00:02:10.920 --> 00:02:19.786
ノットアラウドは禁止のマークで、今は操作できないことを示し、ウェイトは処理中なので待ってほしいことを示します。

30
00:02:19.786 --> 00:02:28.975
このほか、画像ファイルを指定して独自の形にし、読み込めないときのために代替のキーワードを後ろに書く方法もあります。

31
00:02:28.975 --> 00:02:34.456
見た目を飾るためではなく、状態を正直に伝えるために選ぶのが原則です。

32
00:02:34.456 --> 00:02:36.766
初期値と継承を確認します。

33
00:02:36.766 --> 00:02:40.676
仕様上の初期値はオート、通常の継承はします。

34
00:02:40.676 --> 00:02:52.050
ここは前のリサイズとは違う点で、親に指定すると子へも引き継がれるので、広い範囲に書くと予想外の場所まで形が変わることがあります。

35
00:02:52.050 --> 00:03:01.825
ただし、リンクやボタンなど、ブラウザーの既定スタイルを持つ要素では、既定の形が優先されて見えることもあります。

36
00:03:01.825 --> 00:03:03.424
汎用値も書けます。

37
00:03:03.424 --> 00:03:14.798
インヘリットは親の計算値、イニシャルは初期値オートに戻す指定、アンセットは継承するプロパティなのでインヘリットとして扱われます。

38
00:03:14.798 --> 00:03:19.241
範囲を絞りたいときは、親ではなく目的の要素そのものへ直接書く習慣を付けると、

39
00:03:19.241 --> 00:03:23.684
思わぬ広がりを防げます。

40
00:03:23.684 --> 00:03:25.066
実例を見ていきます。

41
00:03:25.066 --> 00:03:27.554
まずエイチティーエムエルの用意です。

42
00:03:27.554 --> 00:03:32.806
ステージという土台の箱の中に、操作の見本という文字のボタンをひとつ置きます。

43
00:03:32.806 --> 00:03:36.814
ボタンにはクラス、デモを付け、タイプはボタンにしています。

44
00:03:36.814 --> 00:03:41.651
頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。

45
00:03:41.651 --> 00:03:45.659
ボタンという、もともと押すための要素を使うことが大切です。

46
00:03:45.659 --> 00:03:53.952
次のシーエスエスで土台の見た目を整えてから、最後にカーソルを指定し、ポインターを乗せたときの形がどう変わるかを比べます。

47
00:03:53.952 --> 00:03:59.355
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

48
00:03:59.355 --> 00:04:05.804
ステージとデモには、余白や枠線、背景色といった土台の見た目を先に整えます。

49
00:04:05.804 --> 00:04:13.125
そして最後に、今回変更するプロパティとして、デモへカーソル、ポインターを追加します。

50
00:04:13.125 --> 00:04:20.097
これでブラウザーを開き、ボタンの上にポインターを移動すると、手の形に変わります。

51
00:04:20.097 --> 00:04:24.193
大切なのは、土台は比較のための下準備で、見た目の形を決めているのは最後の一行だ、

52
00:04:24.193 --> 00:04:28.289
という点です。

53
00:04:28.289 --> 00:04:34.564
同じデモが複数回登場する場合、通常は後の同じ詳細度の宣言が優先されます。

54
00:04:34.564 --> 00:04:36.405
値を変えて比べてみましょう。

55
00:04:36.405 --> 00:04:40.482
最後のカーソルの値だけを、ポインターからヘルプへ置き換えます。

56
00:04:40.482 --> 00:04:44.560
ファイルを保存してブラウザーを再読み込みし、もう一度ボタンの上にポインターを移動すると、

57
00:04:44.560 --> 00:04:48.637
今度は疑問符が付いた形に変わります。

58
00:04:48.637 --> 00:04:52.319
比較のコツは、変えるのはこの値ひとつだけにすることです。

59
00:04:52.319 --> 00:04:56.659
ほかの指定まで同時に書き換えると、違いの原因が分からなくなります。

60
00:04:56.659 --> 00:05:03.104
余裕があれば、テキストやノットアラウドへも変えて、受ける印象がどう変わるかを確かめてみてください。

61
00:05:03.104 --> 00:05:05.802
実際の使いどころと配慮を整理します。

62
00:05:05.802 --> 00:05:09.325
一番大切なのは、ポインターを付けてもクリック処理やキーボード操作は追加されない、

63
00:05:09.325 --> 00:05:12.848
という点です。

64
00:05:12.848 --> 00:05:18.845
ただの箱に手の形だけを付けると、押せそうに見えて何も起きず、使う人を困らせます。

65
00:05:18.845 --> 00:05:26.340
操作には、もともとその意味を持つボタンやリンクを使い、カーソルはその合図を補うものと考えてください。

66
00:05:26.340 --> 00:05:30.238
また、スマートフォンのようなタッチ端末では、ポインターを乗せる動き自体がなく、

67
00:05:30.238 --> 00:05:34.136
同じ見え方とは限りません。

68
00:05:34.136 --> 00:05:39.532
形だけに頼らず、文字や見た目でも操作できることが伝わるようにしましょう。

69
00:05:39.532 --> 00:05:47.028
色や文字の大きさと合わせて、誰にとっても分かりやすい合図にすることが、結果として信頼につながります。

70
00:05:47.028 --> 00:05:49.235
効かないときの確認手順です。

71
00:05:49.235 --> 00:05:51.441
まず開発者ツールを開きます。

72
00:05:51.441 --> 00:06:00.898
ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認してください。

73
00:06:00.898 --> 00:06:08.306
スタイルズで宣言が無効扱いになっていたり、打ち消し線があったりすれば、別の宣言に負けています。

74
00:06:08.306 --> 00:06:11.931
コンピューテッドで最終的な値も確認しましょう。

75
00:06:11.931 --> 00:06:21.545
カーソル特有の注意として、確認はマウスで実際に乗せて行うこと、そしてタッチ端末では再現しない場合があることが挙げられます。

76
00:06:21.545 --> 00:06:28.480
三百二十ピクセル程度の画面幅やキーボード操作でも内容を利用できるかまで確かめてください。

77
00:06:28.480 --> 00:06:30.269
最後に互換性とまとめです。

78
00:06:30.269 --> 00:06:35.429
主要ブラウザーで古くから広く対応し、クロームは一以降、エッジは十二以降、

79
00:06:35.429 --> 00:06:40.589
ファイアフォックスは一以降で補足条件あり、サファリは一・二以降という記録です。

80
00:06:40.589 --> 00:06:46.919
アンドロイド版クロームは十八以降、アイオーエス版サファリは十三・四以降で補足条件があります。

81
00:06:46.919 --> 00:06:49.808
ポインターもヘルプも、同じ範囲で使えます。

82
00:06:49.808 --> 00:06:56.551
練習は、まずポインターとヘルプの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。

83
00:06:56.551 --> 00:06:57.377
まとめます。

84
00:06:57.377 --> 00:07:01.229
カーソルはポインターの形、初期値はオート、継承はします。

85
00:07:01.229 --> 00:07:05.220
そして形は機能ではない、という線引きを忘れないでください。

86
00:07:05.220 --> 00:07:11.550
値を一つずつ変えて比べる練習を重ねると、実務でも場面に合った形を迷わず選べるようになります。

87
00:07:11.550 --> 00:07:12.788
お疲れさまでした。