ユーザーがテキストを選択できるかどうかを制御するプロパティです。none、text、all、autoなどの値があり、UI要素のテキストが誤って選択されるのを防ぐために使用されます。
user-select: auto | text | none | contain | all| select-none | user-select: none |
| select-text | user-select: text |
| select-all | user-select: all |
user-select: none;テキスト選択を無効化
.code-block {
user-select: all;
}クリックで全テキストを選択
.button {
user-select: none;
cursor: pointer;
}ボタンのテキスト選択を防止
UIコンポーネントでは通常none、コードブロックではallが便利。
AIはUI装飾の一環でuser-select: noneを広範囲に付けがちですが、本文まで選択不能にするのはユーザーの引用・コピー・翻訳を妨げる悪手です。ボタンラベルやドラッグUIなど限定的に使うもの。逆にuser-select: allは「クリックで全選択」でコード片やIDのコピーUXに便利です。
APIキー表示欄を「クリックで全選択」できるようにuser-select: allで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。