WEBVTT

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

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

3
00:00:02.945 --> 00:00:05.522
今回のテーマは、ポインター・イベンツです。

4
00:00:05.522 --> 00:00:08.835
ボタンやリンクは、ふだんクリックやタップで反応します。

5
00:00:08.835 --> 00:00:12.824
ポインター・イベンツは、その要素がマウスや指といったポインター操作の対象になるかどうかを、

6
00:00:12.824 --> 00:00:16.812
シーエスエス側から決めるプロパティです。

7
00:00:16.812 --> 00:00:22.947
値をノーンにすると、要素は見えたままでもクリックを受け付けず、操作はその下にある要素へ通り抜けます。

8
00:00:22.947 --> 00:00:26.506
見た目を変えずに、当たり判定だけを消すようなイメージです。

9
00:00:26.506 --> 00:00:31.660
書き方から実例、一番間違えやすいキーボード操作との違いまで、順番に見ていきましょう。

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

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

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

13
00:00:41.147 --> 00:00:47.616
スライドの例では、クラス名デモを持つ要素に、ポインター・イベンツ、ノーンと指定しています。

14
00:00:47.616 --> 00:00:51.353
これで、その要素はマウスやタッチの対象から外れます。

15
00:00:51.353 --> 00:00:55.953
反対に、通常通り反応させたいときは、値をオートに変えるだけです。

16
00:00:55.953 --> 00:01:02.565
まずはこの一行を書いて、実際にボタンをクリックしてみる、という小さな実験から始めてください。

17
00:01:02.565 --> 00:01:09.752
セレクターで効かせる範囲を正確に選ぶことが、意図しない要素まで無反応にしないための第一歩になります。

18
00:01:09.752 --> 00:01:11.907
指定できる主な値を整理します。

19
00:01:11.907 --> 00:01:15.641
エイチティーエムエルの要素では、中心は二つだけです。

20
00:01:15.641 --> 00:01:20.238
オートは通常通り、クリックやタップ、ホバーの対象になる状態です。

21
00:01:20.238 --> 00:01:24.834
ノーンはその逆で、対象そのものから外れる指定で、今回の主役です。

22
00:01:24.834 --> 00:01:30.005
クリックだけでなく、ホバーなどのポインター由来の反応も起きなくなります。

23
00:01:30.005 --> 00:01:35.464
仕様には、ビジブル・ペインテッドなど、エスブイジーの図形の塗りや線の部分だけを対象にする値も並んでいますが、

24
00:01:35.464 --> 00:01:40.922
ふだんのページ作りではまず出番がありません。

25
00:01:40.922 --> 00:01:46.524
まずはオートとノーンの対比を確実に言い分けられることが、理解の土台になります。

26
00:01:46.524 --> 00:01:48.435
初期値と継承を確認します。

27
00:01:48.435 --> 00:01:51.081
初期値はオート、通常の継承はします。

28
00:01:51.081 --> 00:01:55.197
前回のユーザー・セレクトとは逆で、継承する点が特徴です。

29
00:01:55.197 --> 00:01:59.313
親にノーンと書けば、子要素にもその扱いが引き継がれます。

30
00:01:59.313 --> 00:02:05.340
ただし、子要素側で改めてオートと書き直せば、その子だけを再び操作の対象に戻せます。

31
00:02:05.340 --> 00:02:13.132
大きな面を無反応にしつつ、中のボタンひとつだけを押せるようにする、といった使い分けはこの性質のおかげです。

32
00:02:13.132 --> 00:02:14.455
汎用値も書けます。

33
00:02:14.455 --> 00:02:19.453
インヘリットは親の計算値を使う指定、イニシャルは初期値オートに戻す指定、

34
00:02:19.453 --> 00:02:24.451
アンセットは継承するプロパティなのでインヘリットと同じ扱いです。

35
00:02:24.451 --> 00:02:27.832
継承する、という一言を軸に覚えておきましょう。

36
00:02:27.832 --> 00:02:29.461
ここが一番大事な注意点です。

37
00:02:29.461 --> 00:02:34.233
ポインター・イベンツのノーンは、あくまでポインター操作だけを対象から外す指定です。

38
00:02:34.233 --> 00:02:36.910
キーボード操作を無効にするものではありません。

39
00:02:36.910 --> 00:02:40.052
たとえばボタンにノーンを付けても、タブキーを押して回るフォーカスの移動先に、

40
00:02:40.052 --> 00:02:43.194
そのボタンが残る場合があります。

41
00:02:43.194 --> 00:02:47.850
クリックできないのにキーボードでは押せてしまう、という食い違いが起こるわけです。

42
00:02:47.850 --> 00:02:51.923
本当に操作できない部品にしたいフォームの要素には、エイチティーエムエルのディスエーブルド属性など、

43
00:02:51.923 --> 00:02:55.996
意味に合った無効化を併せて使ってください。

44
00:02:55.996 --> 00:02:59.604
見た目が押せなそうだから大丈夫、とポインター・イベンツだけで済ませないことが、

45
00:02:59.604 --> 00:03:03.212
誰にとっても正しく使えるページへの第一歩です。

46
00:03:03.212 --> 00:03:04.689
実例を見ていきます。

47
00:03:04.689 --> 00:03:07.348
まずエイチティーエムエルの用意です。

48
00:03:07.348 --> 00:03:13.110
ステージという土台の箱の中に、デモというクラスを付けたボタンをひとつ置きます。

49
00:03:13.110 --> 00:03:15.621
ボタンの文字は、操作の見本、です。

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

51
00:03:20.791 --> 00:03:24.928
今回は文章ではなく、あえてボタンを使うのがポイントです。

52
00:03:24.928 --> 00:03:29.359
ボタンなら、クリックに反応するかどうかがはっきり分かります。

53
00:03:29.359 --> 00:03:33.643
次のシーエスエスで、土台の見た目を整えてから、最後にポインター・イベンツを指定し、

54
00:03:33.643 --> 00:03:37.927
クリックできるかどうかを比べます。

55
00:03:37.927 --> 00:03:46.200
ファイルの置き場所がずれるとスタイルシート自体が読み込まれないので、読み込みの前提も一緒に確認しておきましょう。

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

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

58
00:03:56.212 --> 00:03:59.599
そして最後に、今回変更するプロパティとして、デモへポインター・イベンツ、

59
00:03:59.599 --> 00:04:02.985
ノーンを追加します。

60
00:04:02.985 --> 00:04:07.181
これでブラウザーを開くと、ボタンはふだんと変わらない見た目のまま表示されますが、

61
00:04:07.181 --> 00:04:11.377
クリックしても反応しなくなります。

62
00:04:11.377 --> 00:04:14.985
大切なのは、土台の指定は比較のための下準備で、結果を変えているのは最後の一行だけだ、

63
00:04:14.985 --> 00:04:18.592
という点です。

64
00:04:18.592 --> 00:04:21.684
保存と再読み込みを忘れずに行ってください。

65
00:04:21.684 --> 00:04:27.868
枠線と背景色があるおかげで、どの要素に指定が効いているのかが目で追いやすくなります。

66
00:04:27.868 --> 00:04:29.781
値を変えて比べてみましょう。

67
00:04:29.781 --> 00:04:34.563
最後のポインター・イベンツの値だけを、ノーンからオートへ置き換えます。

68
00:04:34.563 --> 00:04:38.456
ファイルを保存してブラウザーを再読み込みし、もう一度ボタンをクリックすると、

69
00:04:38.456 --> 00:04:42.350
今度は通常通り反応するようになります。

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

71
00:04:46.176 --> 00:04:53.826
あわせて、ノーンの状態でタブキーを押してボタンへ移動し、エンターキーで操作できるかどうかも確かめてみてください。

72
00:04:53.826 --> 00:04:57.857
マウスでは無反応でも、キーボードでは別の結果になることを、自分の手で体験しておくと、

73
00:04:57.857 --> 00:05:01.887
注意点の意味がはっきり分かります。

74
00:05:01.887 --> 00:05:05.576
操作して初めて、値ごとの違いが体感として身に付きます。

75
00:05:05.576 --> 00:05:07.750
実際の活用パターンを紹介します。

76
00:05:07.750 --> 00:05:11.420
定番は、重ねて表示した装飾を通り抜けさせる使い方です。

77
00:05:11.420 --> 00:05:18.079
画像の上に半透明のラベルや模様を重ねると、その部分のクリックが装飾に遮られてしまうことがあります。

78
00:05:18.079 --> 00:05:24.058
装飾側にノーンを付ければ、見た目はそのままに、クリックだけが下の画像やリンクへ届きます。

79
00:05:24.058 --> 00:05:29.494
もうひとつは、親全体をノーンにし、操作させたい子だけをオートに戻すパターンです。

80
00:05:29.494 --> 00:05:32.484
地図や図の上に浮かぶパネルなどで使われます。

81
00:05:32.484 --> 00:05:36.561
逆に、ボタンを押せなくする目的だけで使うのは避けてください。

82
00:05:36.561 --> 00:05:43.356
その場合は、前のセクションで話した通り、ディスエーブルドなど本来の無効化と組み合わせるのが鉄則です。

83
00:05:43.356 --> 00:05:45.308
効かないときの確認手順です。

84
00:05:45.308 --> 00:05:47.261
まず開発者ツールを開きます。

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

86
00:05:55.628 --> 00:05:59.952
スタイルズで宣言に打ち消し線があれば、別の宣言に負けています。

87
00:05:59.952 --> 00:06:03.159
コンピューテッドで最終的な値も確認しましょう。

88
00:06:03.159 --> 00:06:06.646
ポインター・イベンツ特有の落とし穴は二つあります。

89
00:06:06.646 --> 00:06:12.643
ひとつは、子要素側にオートが書かれていて、親のノーンが部分的に戻されているケースです。

90
00:06:12.643 --> 00:06:18.918
もうひとつは、キーボード操作で反応したのを見て、ノーンが効いていないと誤解するケースです。

91
00:06:18.918 --> 00:06:22.823
三百二十ピクセル程度の画面幅や文字の拡大でも、内容が読めて操作できるかまで確かめると、

92
00:06:22.823 --> 00:06:26.728
確認漏れがぐっと減ります。

93
00:06:26.728 --> 00:06:28.905
最後に互換性とまとめです。

94
00:06:28.905 --> 00:06:33.762
対応はとても古くから広く、クロームは一以降、エッジは十二以降、ファイアフォックスは一・五以降、

95
00:06:33.762 --> 00:06:38.618
サファリは四以降です。

96
00:06:38.618 --> 00:06:43.559
アンドロイド版クロームは十八以降、アイオーエス版サファリは三・二以降という記録で、

97
00:06:43.559 --> 00:06:48.499
オートもノーンも同じ範囲で使えます。

98
00:06:48.499 --> 00:06:56.370
練習は、まずノーンとオートの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。

99
00:06:56.370 --> 00:06:57.375
まとめます。

100
00:06:57.375 --> 00:07:03.236
ポインター・イベンツは、ポインター操作の対象になるかを決める指定です。

101
00:07:03.236 --> 00:07:05.748
初期値はオート、継承はします。

102
00:07:05.748 --> 00:07:11.275
そして、キーボード操作は止めない、という注意を忘れないでください。

103
00:07:11.275 --> 00:07:16.969
関連するユーザー・セレクトやカーソルと切り分けて覚えておきましょう。

104
00:07:16.969 --> 00:07:18.476
お疲れさまでした。