WEBVTT

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

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

3
00:00:03.206 --> 00:00:05.878
今回のテーマは、ユーザー・セレクトです。

4
00:00:05.878 --> 00:00:10.688
ウェブページの文章は、ふだんマウスでドラッグすると青く反転して選べます。

5
00:00:10.688 --> 00:00:14.027
コピーしたり、読み返したりするときの基本操作です。

6
00:00:14.027 --> 00:00:20.306
ユーザー・セレクトは、この文字を選択できるかどうかを、シーエスエス側から決めるプロパティです。

7
00:00:20.306 --> 00:00:27.120
ボタンやタブのような操作部品では選択を止めた方が使いやすくなりますが、本文にまで使うと不便になります。

8
00:00:27.120 --> 00:00:30.460
書き方から実例、注意点まで順番に見ていきましょう。

9
00:00:30.460 --> 00:00:37.540
見た目は変わらなくても、操作のしやすさが大きく変わる、縁の下の力持ちのようなプロパティだと考えてください。

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

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

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

13
00:00:46.792 --> 00:00:52.960
スライドの例では、クラス名デモを持つ要素に、ユーザー・セレクト、ノーンと指定しています。

14
00:00:52.960 --> 00:00:57.165
これで、その要素の中の文字はドラッグしても選べなくなります。

15
00:00:57.165 --> 00:01:01.791
反対に、選べる状態に戻したいときは、値をテキストに変えるだけです。

16
00:01:01.791 --> 00:01:08.099
まずはこの一行を書いて、ブラウザーでドラッグしてみる、という小さな実験から始めてください。

17
00:01:08.099 --> 00:01:11.604
なお、セレクターはクラスでも要素名でも構いません。

18
00:01:11.604 --> 00:01:17.912
効かせたい範囲を正確に選ぶことが、意図しない場所まで選べなくしないための第一歩になります。

19
00:01:17.912 --> 00:01:20.273
指定できる主な値を整理します。

20
00:01:20.273 --> 00:01:21.532
中心は四つです。

21
00:01:21.532 --> 00:01:25.624
オートは、ブラウザーや親要素の扱いに任せる指定です。

22
00:01:25.624 --> 00:01:29.716
テキストは通常通り、文字をドラッグで選べる状態です。

23
00:01:29.716 --> 00:01:33.808
ノーンは選択そのものを止める指定で、今回の主役です。

24
00:01:33.808 --> 00:01:39.316
そしてオールは、要素の中身をクリックひとつでまとめて全部選ぶ指定です。

25
00:01:39.316 --> 00:01:43.566
たとえば短いコードやコピー用の文字列で使うと便利です。

26
00:01:43.566 --> 00:01:47.973
どの値も、見た目の色や大きさを変えるものではありません。

27
00:01:47.973 --> 00:01:52.379
変わるのは、選ぶという操作の扱いだけだと覚えてください。

28
00:01:52.379 --> 00:01:57.180
コンテインという値が仕様にある場合もありますが、まずはこの四つを確実に言い分けられることが、

29
00:01:57.180 --> 00:02:01.980
実務での理解の土台になります。

30
00:02:01.980 --> 00:02:03.874
初期値と継承を確認します。

31
00:02:03.874 --> 00:02:06.643
初期値はオート、通常の継承はしません。

32
00:02:06.643 --> 00:02:08.537
ここは間違えやすい点です。

33
00:02:08.537 --> 00:02:14.949
継承しないので、親にノーンと書いても、子要素が自動で同じ値を受け継ぐわけではありません。

34
00:02:14.949 --> 00:02:20.632
ただし、値がオートの要素は、親の選択の扱いに従うように振る舞うことがあります。

35
00:02:20.632 --> 00:02:25.586
そのため見た目上は、親の影響を受けているように感じる場面もあります。

36
00:02:25.586 --> 00:02:26.897
汎用値も書けます。

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

38
00:02:31.852 --> 00:02:36.806
アンセットは継承しないプロパティなのでイニシャルと同じ扱いです。

39
00:02:36.806 --> 00:02:43.655
この違いを知らないと、親に書いたのに子で選べてしまう、といった場面で原因が分からなくなります。

40
00:02:43.655 --> 00:02:47.152
継承しない、という一言を軸に覚えておきましょう。

41
00:02:47.152 --> 00:02:50.556
使う場面と、使わない場面をはっきりさせます。

42
00:02:50.556 --> 00:02:53.186
有効なのは、操作のための部品です。

43
00:02:53.186 --> 00:02:58.137
何度もクリックするボタン、切り替えタブ、ドラッグで動かすスライダーやカードなどでは、

44
00:02:58.137 --> 00:03:03.088
操作のたびに文字が反転すると邪魔になります。

45
00:03:03.088 --> 00:03:07.111
こうした部品にノーンを使うと、操作がすっきりします。

46
00:03:07.111 --> 00:03:11.598
一方、記事の本文やサンプルコードに使うのは避けてください。

47
00:03:11.598 --> 00:03:18.406
読者が文章を選べなくなると、コピーして学習したり、引用したりする自由を奪ってしまいます。

48
00:03:18.406 --> 00:03:23.512
便利だからとページ全体に広げず、必要な範囲だけに絞るのが原則です。

49
00:03:23.512 --> 00:03:30.629
迷ったときは、その文字を読者がコピーしたくなるかどうかを基準に考えると判断しやすくなります。

50
00:03:30.629 --> 00:03:34.652
コピーしたくなる文章には、決して使わないでください。

51
00:03:34.652 --> 00:03:36.002
実例を見ていきます。

52
00:03:36.002 --> 00:03:38.432
まずエイチティーエムエルの用意です。

53
00:03:38.432 --> 00:03:44.506
ステージという土台の箱の中に、デモという箱をひとつ置き、その中に少し長めの文章を入れます。

54
00:03:44.506 --> 00:03:50.581
文章が長く、折り返しが見える方が、ドラッグしたときの選択範囲の違いが分かりやすくなります。

55
00:03:50.581 --> 00:03:54.766
頭の部分には、スタイルシートを読み込むリンクを置いてください。

56
00:03:54.766 --> 00:03:56.521
構造はとてもシンプルです。

57
00:03:56.521 --> 00:04:00.233
次のシーエスエスで、土台の見た目を整えてから、最後にユーザー・セレクトを指定し、

58
00:04:00.233 --> 00:04:03.946
選択できるかどうかを比べます。

59
00:04:03.946 --> 00:04:09.750
フォルダーの置き場所やファイル名がずれていると、スタイルシート自体が読み込まれません。

60
00:04:09.750 --> 00:04:13.800
構造だけでなく、読み込みの前提も一緒に確認しておきましょう。

61
00:04:13.800 --> 00:04:18.743
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

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

63
00:04:24.643 --> 00:04:31.819
そして最後に、今回変更するプロパティとして、デモへユーザー・セレクト、ノーンを追加します。

64
00:04:31.819 --> 00:04:38.516
これでブラウザーを開き、文章をドラッグしても、文字が反転せず選べない状態になります。

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

66
00:04:42.423 --> 00:04:46.330
という点です。

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

68
00:04:49.679 --> 00:04:56.376
背景色や枠線があるおかげで、どの範囲に指定が効いているのかが目で追いやすくなります。

69
00:04:56.376 --> 00:05:00.841
比較実験では、対象範囲が見える工夫がとても役に立ちます。

70
00:05:00.841 --> 00:05:02.735
値を変えて比べてみましょう。

71
00:05:02.735 --> 00:05:07.470
最後のユーザー・セレクトの値だけを、ノーンからテキストへ置き換えます。

72
00:05:07.470 --> 00:05:11.663
ファイルを保存してブラウザーを再読み込みし、もう一度文章をドラッグすると、

73
00:05:11.663 --> 00:05:15.857
今度は通常通り文字が反転して選べるようになります。

74
00:05:15.857 --> 00:05:19.645
比較のコツは、変えるのはこの値ひとつだけにすることです。

75
00:05:19.645 --> 00:05:25.327
ついでにオールへ変えて、クリックひとつで文章全体が選ばれる様子も試してみてください。

76
00:05:25.327 --> 00:05:28.844
操作して初めて、値ごとの違いが体感として分かります。

77
00:05:28.844 --> 00:05:33.308
ドラッグの始点と終点を変えて、部分選択の感覚も比べてみてください。

78
00:05:33.308 --> 00:05:38.043
テキストでは途中から途中までを自由に選べることも、改めて確認できます。

79
00:05:38.043 --> 00:05:41.032
オールについて、もう少し掘り下げます。

80
00:05:41.032 --> 00:05:44.808
オールは、クリックで中身をまとめて選ぶ指定です。

81
00:05:44.808 --> 00:05:53.461
短いコード、コマンド、コピーして使ってほしい文字列などに付けると、読者が範囲を正確に選ぶ手間が省けて便利です。

82
00:05:53.461 --> 00:06:00.856
ただし、長い本文全体に付けると、少しクリックしただけで全部が反転し、読者を驚かせてしまいます。

83
00:06:00.856 --> 00:06:09.666
また、選択できない、あるいは一気に選ばれる状態が、キーボード操作や読み上げの邪魔にならないかも確認してください。

84
00:06:09.666 --> 00:06:13.285
便利な値ほど、付ける場所を絞る意識が大切です。

85
00:06:13.285 --> 00:06:18.319
逆に、選んでほしい文字列が短いほどオールの効果ははっきりします。

86
00:06:18.319 --> 00:06:23.983
長さと目的が合っているか、付ける前に一度立ち止まって考えてみてください。

87
00:06:23.983 --> 00:06:25.857
効かないときの確認手順です。

88
00:06:25.857 --> 00:06:27.732
まず開発者ツールを開きます。

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

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

91
00:06:39.915 --> 00:06:46.476
特に、子要素側にテキストなどが書かれていると、親のノーンが効いていないように見えることがあります。

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

93
00:06:49.555 --> 00:06:56.383
またサファリ系、とくにアイオーエスでは、接頭辞付きの書き方が必要な場合がある点も覚えておいてください。

94
00:06:56.383 --> 00:06:59.864
小さい画面幅や文字を拡大した状態でも、内容が読めて操作できるかまで確かめると、

95
00:06:59.864 --> 00:07:03.345
確認漏れがぐっと減ります。

96
00:07:03.345 --> 00:07:05.477
最後に互換性とまとめです。

97
00:07:05.477 --> 00:07:13.514
接頭辞なしの対応は、クロームが五十四以降、エッジが七十九以降、ファイアフォックスが六十九以降です。

98
00:07:13.514 --> 00:07:20.730
サファリは条件付きの部分があり、アイオーエス版では接頭辞などが必要な記録になっています。

99
00:07:20.730 --> 00:07:24.339
使うときは対象ブラウザーを確認してください。

100
00:07:24.339 --> 00:07:32.211
練習は、まずノーンとテキストの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。

101
00:07:32.211 --> 00:07:33.195
まとめます。

102
00:07:33.195 --> 00:07:37.460
ユーザー・セレクトは文字を選べるかを決める指定です。

103
00:07:37.460 --> 00:07:40.084
初期値はオート、継承はしません。

104
00:07:40.084 --> 00:07:44.676
本文には使わず、操作部品に限定するのが上手な使い方です。

105
00:07:44.676 --> 00:07:49.843
関連するポインター・イベンツやカーソルと混同しないように、ユーザー・セレクトは選択だけを扱う、

106
00:07:49.843 --> 00:07:55.009
と切り分けて覚えておきましょう。

107
00:07:55.009 --> 00:07:56.485
お疲れさまでした。