user-select プロパティ

最終更新：2026-09-13

user-select user-select プロパティ

user-select プロパティは、ユーザーがマウスでテキストを選択できるかどうかを制御します。none に設定すると、要素内のテキストは選択できなくなります。これは、コピーが不要なボタン、ラベル、アイコンなどでよく使用され、関係のないコンテンツの誤選択を防ぎます。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

user-select: auto | none | text | all;

⚙️ 値

値	タイプ	説明
`auto \| none \| text \| all`	キーワード	ユーザーのテキスト選択の挙動

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
user-select	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： user-select は標準的な CSS プロパティではありませんが、ブラウザのサポートは広範です。互換性のために、-webkit-user-select プレフィックスも使用してください。

注意： ユーザーがコンテンツ（コードブロック、引用テキスト）をコピーする必要がある場所では、user-select: none を設定しないでください。使い勝手が損なわれます。

❓ よくある質問

Qコピー時に user-select: all の値は何に役立ちますか？

Aall を使用すると、単一のクリックまたは最初の選択で、ドラッグせずに要素内のすべてのテキストを選択できます。招待コード、API キー、注文番号、コードスニペットなど、ワンクリックで全選択してコピーしたいものに適しており、コピーを大幅に高速化します。なお、子要素の text/none を上書きし、ブロック全体が 1 つの選択単位として機能することに注意してください。

Quser-select: none でユーザーがページのコンテンツをコピーするのを防げますか？

Aいいえ。これは純粋に表示上の制限です。テキストはドラッグで選択できなくなりますが、コンテンツは DOM に依然存在し、ユーザーはソースの表示、デベロッパーツール、あるいは CSS を無効にするだけで取得できます。本当のコンテンツ保護はバックエンドの権限管理に頼る必要があります。user-select: none はインターフェースの体験を向上させるだけ（誤選択の防止）で、セキュリティ対策ではありません。

Quser-select と ::selection 疑似要素の違いは何ですか？

Auser-select はテキストを選択できるかどうかを制御します。::selection は選択されたテキストの見た目（背景色、文字色など）を制御します。両者は互いを補完します。user-select: text で選択を許可し、::selection で選択状態のスタイルを設定します。両者を組み合わせてブランドに合わせた選択効果を構築できます。

Quser-select に -webkit-user-select プレフィックスが必要なのはなぜですか？

Auser-select は長い間実験的なプロパティでした。モダンブラウザはプレフィックスなしの形式を受け入れますが、Safari や旧版の Chrome/Edge では -webkit-user-select が必要でした。古いエンジンとの互換性のために、-webkit-user-select、-moz-user-select、およびプレフィックスなしのプロパティの 3 行をすべて記述するのが一般的です。