# user-select

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

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/user-select/

## 構文

```css
user-select: auto | text | none | contain | all
```

## Tailwindでは

- `select-none` → user-select: none
- `select-text` → user-select: text
- `select-all` → user-select: all

## ブラウザ対応

- 対応が限定的
- Chrome 54+ / Firefox 69+ / Safari 未対応 / Edge 79+

## コード例

### 例1: テキスト選択を無効化

```css
user-select: none;
```

### 例2: クリックで全テキストを選択

```css
.code-block {
  user-select: all;
}
```

### 例3: ボタンのテキスト選択を防止

```css
.button {
  user-select: none;
  cursor: pointer;
}
```

## TIPS

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

## AIがよく間違えるポイント

AIはUI装飾の一環でuser-select: noneを広範囲に付けがちですが、本文まで選択不能にするのはユーザーの引用・コピー・翻訳を妨げる悪手です。ボタンラベルやドラッグUIなど限定的に使うもの。逆にuser-select: allは「クリックで全選択」でコード片やIDのコピーUXに便利です。

## AIへの依頼文例

- APIキー表示欄を「クリックで全選択」できるようにuser-select: allで実装して

## 関連プロパティ

- [cursor](https://www.css-dictionary.com/property/cursor.md)
- [pointer-events](https://www.css-dictionary.com/property/pointer-events.md)