user-select：ユーザーがテキストを選択できるかどうかを指定する

初期値 auto
適用対象 全ての要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

user-selectプロパティの説明

CSSのuser-selectプロパティは、ユーザーがテキストを選択できるかどうかを指定します。例えば、ユーザーにコピーされたくない文字列に制限をかけたり、一度のクリックで指定された範囲を選択できるように設定できます。

user-selectに指定できる値

all
要素の内容が全て選択されます。選択範囲が要素の一部を含んだ場合、子孫要素を含む全ての内容が含まれなければなりません。ダブルクリックや右クリックを子孫要素の上で行うと、この値を持つ最上位の先祖要素が範囲選択されます。
auto
要素に応じて自動的に挙動を変えます。編集可能な要素の場合はcontain、擬似要素の場合はnone、それ以外で親要素にuser-selectのallが指定されている場合は、対象要素の使用値もallになります。同条件で親要素にuser-selectのnoneが指定されている場合は、対象要素の使用値もnoneになります。それ以外はtextと同様に振る舞います。
contain
指定された要素は境界の内側のみ範囲選択できるようにします。
none
要素の内容を範囲選択できないようにします。子要素に含まれる文章にも適用されます。ただし、Selectionオブジェクトは、これらの要素も取得することができます。
text
指定された要素はテキストを範囲選択できます。

user-selectの使い方とサンプルコード

user-selectプロパティの構文は以下の通りです。

/* キーワード値 */
user-select: all;
user-select: auto;
user-select: contain;
user-select: none;
user-select: text;

/* ベンダープレフィックス */
-moz-user-select: @value;
-webkit-user-select: @value;

/* グローバル値 */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: unset;

user-selectの実例

それでは実際にuser-selectプロパティの書き方を見ていきましょう。以下の例は、単純にテキストを配置した要素に、異なる値のuser-selectを加えた場合の比較です。

<div class="samp_box">
	<section id="us_1">
		<h1>user-select: all;</h1>
		<p>Text text text text text.</p>
	</section>
	<section id="us_2">
		<h1>user-select: auto;</h1>
		<p>Text text text text text.</p>
	</section>
	<section id="us_3">
		<h1>user-select: contain;</h1>
		<p>Text text text text text.</p>
	</section>
	<section id="us_4">
		<h1>user-select: none;</h1>
		<p>Text text text text text.</p>
	</section>
	<section id="us_5">
		<h1>user-select: text;</h1>
		<p>Text text text text text.</p>
	</section>
</div>
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
	padding: .3rem;
	border: 1px solid #999;
}
#us_1 > p {
	user-select: all;
	-moz-user-select: all;
	-webkit-user-select: all;
}
#us_2 > p {
	user-select: auto;
	-moz-user-select: auto;
	-webkit-user-select: auto;
}
#us_3 > p {
	user-select: contain;
	-moz-user-select: contain;
	-webkit-user-select: contain;
}
#us_4 > p {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
#us_5 > p {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
}

user-selectに関連するCSSプロパティ

要素の装飾や描画指定
accent-color 一部の要素の強調色を指定する
all 要素の全てのプロパティを初期化する
appearance ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする
caret-color テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
cursor マウスポインタのカーソルの種類を指定する
filter 画像やテキストにフィルタ効果を与える
isolation 要素のスタッキング・コンテキストを制御する
mix-blend-mode 重なり合った要素の内容と背景に対して描画モードを指定する
opacity 要素の不透明度を指定する
scroll-behavior スクロールが発生した場合の挙動を指定する
user-select ユーザーがテキストを選択できるかどうかを指定する
© weblan3.com