user-select

インタラクション・UX

ユーザーがテキストを選択できるかどうかを制御するプロパティです。none、text、all、autoなどの値があり、UI要素のテキストが誤って選択されるのを防ぐために使用されます。

構文

Syntax
user-select: auto | text | none | contain | all

コード例

例 1

user-select: none;
実行結果
このテキストは選択できません

テキスト選択を無効化

例 2

.code-block { user-select: all; }
実行結果
クリックで全選択: console.log('hello');

クリックで全テキストを選択

例 3

.button { user-select: none; cursor: pointer; }
実行結果

ボタンのテキスト選択を防止

💡 TIPS

UIコンポーネントでは通常none、コードブロックではallが便利。

関連プロパティ

ブラウザサポート

Chrome 54+, Firefox 69+, Safari 3.1+