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;
}