概要
CSSプロパティ｢user-select｣は、テキストや画像などの要素の選択操作を制御する際に利用します。具体的には、コピー操作などをできないようにすることなどが可能です。
<p class="select-none">このテキストは選択することができません</p>
<p>このテキストは選択することができます</p>
<style>
.select-none {
user-select: none;
}
</style>取りうる値
キーワードを指定します。
{ user-select: キーワード; }指定できる値とその効果の一覧です。
| 値 | 説明 |
|---|---|
| none | 指定された要素内でのテキストの選択をできなくします |
| auto | 初期値です。ブラウザの仕様に準拠します |
| text | 指定された要素内でのテキストの選択ができます |
| all | 指定された要素内の全てを選択できます。 |
| element | 指定された要素内でのテキストの選択ができます。 |
指定した表示例
主要ないくつかの値の表示を確認してみましょう。
noneを指定する
この指定をするとクリックなど行った際に選択することができなくなっていることがわかります。
<p class="select-none">このテキストは選択することができません</p>
<p>このテキストは選択することができます</p>
<style>
.select-none {
user-select: none;
}
</style>textを指定する
この指定をするとクリックなど行った際に選択することができます。例えば要素全体を選択できない指定を行った場合でも、子要素に「text」を指定した部分については選択可能になっていることがわかります。
<p class="select-none">このテキストは<span class="select-text">選択</span>することができます</p>
<style>
.select-none {
user-select: none;
}
.select-text {
user-select: text;
}
</style>allを指定する
この指定をすると、クリックなど行った際に、指定している要素内すべてを選択することができます。例のように、親要素に指定した場合、その中の子要素が全てが選択できることが確認できます。
<div class="select-all">
<p>このテキストは選択することができます</p>
<p>このテキストは選択することができます</p>
<p>このテキストは選択することができます</p>
</div>
<style>
.select-all {
user-select: all;
}
</style>使用例
最近では、Webベースでアプリを作成した場合に、ネイティブアプリっぽい表現を実現したい場合などに用いるケースがあります。下記で追加しているプロパティ「touch-callout」はIOS端末などでテキストを長押しした際のサブメニューの表示を制御することができます。
<div class="select-none">
<p>テキストを選択することができません</p>
<img src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="200px">
</div>
<style>
.select-none {
user-select: none;
touch-callout: none;
}
</style>仕様書
CSS Basic User Interface Module Level 4