SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:57動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ユーザー・セレクトです。
  4. 0:05ウェブページの文章は、ふだんマウスでドラッグすると青く反転して選べます。
  5. 0:10コピーしたり、読み返したりするときの基本操作です。
  6. 0:14ユーザー・セレクトは、この文字を選択できるかどうかを、シーエスエス側から決めるプロパティです。
  7. 0:20ボタンやタブのような操作部品では選択を止めた方が使いやすくなりますが、本文にまで使うと不便になります。
  8. 0:27書き方から実例、注意点まで順番に見ていきましょう。
  9. 0:30見た目は変わらなくても、操作のしやすさが大きく変わる、縁の下の力持ちのようなプロパティだと考えてください。
  10. 0:37まず基本の書き方です。
  11. 0:39書き方はほかのプロパティとまったく同じで、対象のセレクターに、プロパティ名、
  12. 0:42コロン、値、セミコロンを書きます。
  13. 0:46スライドの例では、クラス名デモを持つ要素に、ユーザー・セレクト、ノーンと指定しています。
  14. 0:52これで、その要素の中の文字はドラッグしても選べなくなります。
  15. 0:57反対に、選べる状態に戻したいときは、値をテキストに変えるだけです。
  16. 1:01まずはこの一行を書いて、ブラウザーでドラッグしてみる、という小さな実験から始めてください。
  17. 1:08なお、セレクターはクラスでも要素名でも構いません。
  18. 1:11効かせたい範囲を正確に選ぶことが、意図しない場所まで選べなくしないための第一歩になります。
  19. 1:17指定できる主な値を整理します。
  20. 1:20中心は四つです。
  21. 1:21オートは、ブラウザーや親要素の扱いに任せる指定です。
  22. 1:25テキストは通常通り、文字をドラッグで選べる状態です。
  23. 1:29ノーンは選択そのものを止める指定で、今回の主役です。
  24. 1:33そしてオールは、要素の中身をクリックひとつでまとめて全部選ぶ指定です。
  25. 1:39たとえば短いコードやコピー用の文字列で使うと便利です。
  26. 1:43どの値も、見た目の色や大きさを変えるものではありません。
  27. 1:47変わるのは、選ぶという操作の扱いだけだと覚えてください。
  28. 1:52コンテインという値が仕様にある場合もありますが、まずはこの四つを確実に言い分けられることが、
  29. 1:57実務での理解の土台になります。
  30. 2:01初期値と継承を確認します。
  31. 2:03初期値はオート、通常の継承はしません。
  32. 2:06ここは間違えやすい点です。
  33. 2:08継承しないので、親にノーンと書いても、子要素が自動で同じ値を受け継ぐわけではありません。
  34. 2:14ただし、値がオートの要素は、親の選択の扱いに従うように振る舞うことがあります。
  35. 2:20そのため見た目上は、親の影響を受けているように感じる場面もあります。
  36. 2:25汎用値も書けます。
  37. 2:26インヘリットは親の計算値を使う指定、イニシャルは初期値オートに戻す指定、
  38. 2:31アンセットは継承しないプロパティなのでイニシャルと同じ扱いです。
  39. 2:36この違いを知らないと、親に書いたのに子で選べてしまう、といった場面で原因が分からなくなります。
  40. 2:43継承しない、という一言を軸に覚えておきましょう。
  41. 2:47使う場面と、使わない場面をはっきりさせます。
  42. 2:50有効なのは、操作のための部品です。
  43. 2:53何度もクリックするボタン、切り替えタブ、ドラッグで動かすスライダーやカードなどでは、
  44. 2:58操作のたびに文字が反転すると邪魔になります。
  45. 3:03こうした部品にノーンを使うと、操作がすっきりします。
  46. 3:07一方、記事の本文やサンプルコードに使うのは避けてください。
  47. 3:11読者が文章を選べなくなると、コピーして学習したり、引用したりする自由を奪ってしまいます。
  48. 3:18便利だからとページ全体に広げず、必要な範囲だけに絞るのが原則です。
  49. 3:23迷ったときは、その文字を読者がコピーしたくなるかどうかを基準に考えると判断しやすくなります。
  50. 3:30コピーしたくなる文章には、決して使わないでください。
  51. 3:34実例を見ていきます。
  52. 3:36まずエイチティーエムエルの用意です。
  53. 3:38ステージという土台の箱の中に、デモという箱をひとつ置き、その中に少し長めの文章を入れます。
  54. 3:44文章が長く、折り返しが見える方が、ドラッグしたときの選択範囲の違いが分かりやすくなります。
  55. 3:50頭の部分には、スタイルシートを読み込むリンクを置いてください。
  56. 3:54構造はとてもシンプルです。
  57. 3:56次のシーエスエスで、土台の見た目を整えてから、最後にユーザー・セレクトを指定し、
  58. 4:00選択できるかどうかを比べます。
  59. 4:03フォルダーの置き場所やファイル名がずれていると、スタイルシート自体が読み込まれません。
  60. 4:09構造だけでなく、読み込みの前提も一緒に確認しておきましょう。
  61. 4:13次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  62. 4:18ステージとデモには、余白や枠線、背景色といった土台の見た目を先に整えます。
  63. 4:24そして最後に、今回変更するプロパティとして、デモへユーザー・セレクト、ノーンを追加します。
  64. 4:31これでブラウザーを開き、文章をドラッグしても、文字が反転せず選べない状態になります。
  65. 4:38大切なのは、土台の指定は比較のための下準備で、結果を変えているのは最後の一行だけだ、
  66. 4:42という点です。
  67. 4:46保存と再読み込みを忘れずに行ってください。
  68. 4:49背景色や枠線があるおかげで、どの範囲に指定が効いているのかが目で追いやすくなります。
  69. 4:56比較実験では、対象範囲が見える工夫がとても役に立ちます。
  70. 5:00値を変えて比べてみましょう。
  71. 5:02最後のユーザー・セレクトの値だけを、ノーンからテキストへ置き換えます。
  72. 5:07ファイルを保存してブラウザーを再読み込みし、もう一度文章をドラッグすると、
  73. 5:11今度は通常通り文字が反転して選べるようになります。
  74. 5:15比較のコツは、変えるのはこの値ひとつだけにすることです。
  75. 5:19ついでにオールへ変えて、クリックひとつで文章全体が選ばれる様子も試してみてください。
  76. 5:25操作して初めて、値ごとの違いが体感として分かります。
  77. 5:28ドラッグの始点と終点を変えて、部分選択の感覚も比べてみてください。
  78. 5:33テキストでは途中から途中までを自由に選べることも、改めて確認できます。
  79. 5:38オールについて、もう少し掘り下げます。
  80. 5:41オールは、クリックで中身をまとめて選ぶ指定です。
  81. 5:44短いコード、コマンド、コピーして使ってほしい文字列などに付けると、読者が範囲を正確に選ぶ手間が省けて便利です。
  82. 5:53ただし、長い本文全体に付けると、少しクリックしただけで全部が反転し、読者を驚かせてしまいます。
  83. 6:00また、選択できない、あるいは一気に選ばれる状態が、キーボード操作や読み上げの邪魔にならないかも確認してください。
  84. 6:09便利な値ほど、付ける場所を絞る意識が大切です。
  85. 6:13逆に、選んでほしい文字列が短いほどオールの効果ははっきりします。
  86. 6:18長さと目的が合っているか、付ける前に一度立ち止まって考えてみてください。
  87. 6:23効かないときの確認手順です。
  88. 6:25まず開発者ツールを開きます。
  89. 6:27ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認してください。
  90. 6:35スタイルズで宣言に打ち消し線があれば、別の宣言に負けています。
  91. 6:39特に、子要素側にテキストなどが書かれていると、親のノーンが効いていないように見えることがあります。
  92. 6:46コンピューテッドで最終的な値も確認しましょう。
  93. 6:49またサファリ系、とくにアイオーエスでは、接頭辞付きの書き方が必要な場合がある点も覚えておいてください。
  94. 6:56小さい画面幅や文字を拡大した状態でも、内容が読めて操作できるかまで確かめると、
  95. 6:59確認漏れがぐっと減ります。
  96. 7:03最後に互換性とまとめです。
  97. 7:05接頭辞なしの対応は、クロームが五十四以降、エッジが七十九以降、ファイアフォックスが六十九以降です。
  98. 7:13サファリは条件付きの部分があり、アイオーエス版では接頭辞などが必要な記録になっています。
  99. 7:20使うときは対象ブラウザーを確認してください。
  100. 7:24練習は、まずノーンとテキストの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。
  101. 7:32まとめます。
  102. 7:33ユーザー・セレクトは文字を選べるかを決める指定です。
  103. 7:37初期値はオート、継承はしません。
  104. 7:40本文には使わず、操作部品に限定するのが上手な使い方です。
  105. 7:44関連するポインター・イベンツやカーソルと混同しないように、ユーザー・セレクトは選択だけを扱う、
  106. 7:49と切り分けて覚えておきましょう。
  107. 7:55お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

user-selectの役割と主な指定値を解説。文章をドラッグして選択できるかを確認します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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