【56】ユーザーのテキスト選択などを制御する user-selectプロパティ

user-selectプロパティは、ユーザーが要素内のテキストや画像をどのように選択できるか指定します。

user-selectは、W3C の Basic User Interface Module Level 4 で登場するプロパティで、2020年4月現在まだドラフトですが、たいていのブラウザがベンダープレフィックスを付ければ反応するようです。（参考：Can I use　2020年4月記）

本日のINDEX

1. user-selectプロパティの値
   1. user-selectプロパティのベンダープレフィクス
2. user-selectプロパティを使ってみる

参考：
・CSS Basic User Interface Module Level 4 | W3C Working Draft
・user-select - CSS | MDN

user-selectプロパティの値

user-selectプロパティの値は以下のものがあります。

user-selectプロパティの値
キーワード	auto がデフォルト値。 text、none、contain、all
グローバル値	resize: inherit; 親の値を継承 resize: initial; 継承した親の値を解消しデフォルト値に戻す resize: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	すべての要素 疑似要素「::before 」「::after」

user-selectプロパティのベンダープレフィクス

user-selectプロパティは、ベンダープレフィクスを付けて対応するブラウザがけっこうあります。 （参考：Can I Use | 2020年4月記）

・IE と Edge18 までは「-ms-」が必要です。
・Safari（iOS Safari 含む）は「-webkit-」が必要。
・古いFirefox と Firefox for Android は「-moz-」が必要。

ということで、3つのベンダープレフィックス付きと、標準仕様を書けば、今のところ間違いなさそう。

.sample {
  -ms-user-select: all;      /*IE / Edge*/
  -moz-user-select: all;     /*Firefox*/
  -webkit-user-select: all;  /*Safari*/
  user-select: all;          /*標準仕様*/
  }

user-selectプロパティを使ってみる

それぞれのキーワードを使ったサンプルです。

<div>要素（黄色のボックス）に user-selectプロパティを指定しました。
その中に「テキスト」と、子要素として <input>要素（チェックボックス）を入れています。

サンプルのテキスト（チェックボックスのテキストも）を選択してみてください。

auto

要素内のテキストはブラウザのデフォルトに従って選択されます。
疑似要素「::before 」「::after」に指定した場合は「none」と同じ扱いになります。

見本（テキストを選択してください）
チェックボックス

none

テキストの選択ができません。チェックボックスは選択できます。

見本（テキストを選択してください。できないかもだけど）
チェックボックス

W3C仕様書は「コピー防止機能ではない」と明記しています。ブラウザは ユーザーがテキストを選択する代替方法を提供する場合があります。

text

要素内のテキストが選択ができます。

見本（テキストを選択してください）
チェックボックス

all

1クリック（1タップ）で、要素内のすべてのテキストが一発で選択できます。

見本（テキストを選択してください）
チェックボックス

contain

その要素内で開始された選択を、その要素の外まで続かないようにします。
（その要素内で選択が終わる。外のテキストまで選択できない）

見本（テキストを選択してください）
チェックボックス

＊これは元々IEの独自仕様で、IE、Edgeのみサポートしています（2020年4月記）
＊element値は、IE独自のもので contain と同じです。

サンプルのHTMLはこちら。

<dl>
  <dt>auto</dt>
  <dd>
    <div>
      見本（テキストを選択してください）<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>none</dt>
  <dd>
    <div class="us-none">
      見本（テキストを選択してください。できないけど）<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>text</dt>
  <dd>
    <div class="us-text">
      見本（テキストを選択してください）<br>
     <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>all</dt>
  <dd>
    <div class="us-all">
      見本（テキストを選択してください）<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>contain</dt>
  <dd>
    <div class="us-contain">
      見本（テキストを選択してください）<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>
</dl>

サンプルのCSSはこちら。

.us-none {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;}
.us-text {
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;}
.us-all {
	-moz-user-select: all;
	-webkit-user-select: all;
	-ms-user-select: all;
	user-select: all;}
.us-contain {
	-moz-user-select: contain;
	-webkit-user-select: contain;
	-ms-user-select: element;
	-ms-user-select: contain;
	user-select: contain;}

次回予告

今回で UI（ユーザーインターフェイス）のためのプロパティは終わりです。

次回からは マルチカラム（段組み）レイアウトをやってみよう。
まずは、マルチカラムの「カラムの数」を決める column-countプロパティから使ってみましょう。