CSSでテキスト選択を自由自在に操る！「user-select」プロパティの解説と詳細なサンプルコード

CSSの「user-select」プロパティは、ユーザーがWebページ上の要素を選択できるかどうかを制御します。テキストの選択、コピー、貼り付けなどの操作に影響を与えるため、Webデザインや開発において重要な役割を果たします。

値

「user-select」プロパティには、以下の5つの値を設定できます。

contain
ユーザーが要素内のテキストを選択できますが、選択範囲は要素内に収まるように制限されます。要素の子要素や要素自体を選択することはできません。
all
ユーザーが要素内のテキストと要素自体を選択できます。
text
ユーザーが要素内のテキストのみを選択できます。要素の子要素や要素自体を選択することはできません。
none
ユーザーが要素内のテキストを選択できません。
auto (デフォルト)
ユーザーが要素内のテキストを選択できます。

例

以下の例は、「#myElement」というIDを持つ要素内のテキストを選択できないように設定する方法を示します。

#myElement {
  user-select: none;
}

「user-select」プロパティは、アクセシビリティに影響を与える可能性があります。ユーザーが重要な情報を選択できないようにすることは避けてください。
「user-select」プロパティは、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、意図したとおりに動作しない場合があります。
「user-select」プロパティは、テキストボックスや入力フィールドなどのフォーム要素には影響を与えません。これらの要素では、デフォルトでテキストを選択できます。

応用例

「user-select」プロパティは、様々な場面で使用できます。以下はその例です。

デザイン上の理由でテキストの選択を無効化したい場合
特定の要素をコピーできないようにしたい場合
ユーザーが誤ってテキストを選択してしまうのを防ぎたい場合

/* 全ての要素に対して、テキスト選択を無効化する */
* {
  user-select: none;
}

/* IDが「my-element」の要素に対してのみ、テキスト選択を許可する */
#my-element {
  user-select: text;
}

/* クラスが「no-select」の要素に対して、テキスト選択を無効化する */
.no-select {
  user-select: none;
}

詳細な例

以下のコードは、より詳細な制御を行う例です。

/* 要素内のテキストのみを選択できるようにする */
.text-select-only {
  user-select: text;
}

/* 要素内のテキストと要素自体を選択できるようにする */
.select-all {
  user-select: all;
}

/* 要素内のテキストを選択できるようにするが、選択範囲は要素内に収まるように制限する */
.contain-selection {
  user-select: contain;
}

ベンダープレフィックス

古いブラウザでは、「user-select」プロパティがサポートされていない場合があります。このような場合、ベンダープレフィックスを使用して、特定のブラウザに対して個別にスタイルを指定する必要があります。

/* Chrome、Safari、EdgeなどのWebKitベースのブラウザ */
-webkit-user-select: none;

/* Firefox */
-moz-user-select: none;

/* Internet ExplorerおよびEdge (古いバージョン) */
-ms-user-select: none;

「user-select」プロパティは、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、意図したとおりに動作しない場合があります。
「user-select」プロパティは、アクセシビリティに影響を与える可能性があります。ユーザーが重要な情報を選択できないようにすることは避けてください。

「pointer-events」プロパティ

「pointer-events」プロパティは、要素に対するポインターイベント（マウスイベントやタッチイベントなど）を制御します。「none」を設定することで、要素に対するすべてのポインターイベントを無効化し、結果的にテキスト選択も無効化することができます。

#my-element {
  pointer-events: none;
}

利点

古いブラウザも含めて幅広いブラウザでサポートされている
シンプルで分かりやすい

欠点

要素とのインタラクションを完全に遮断してしまうため、使いどころが限られる
クリックやドラッグなどの操作も無効化してしまう

JavaScriptによるイベントリスナー

JavaScriptを使用して、要素に対するマウスイベントやタッチイベントを捕捉し、テキスト選択を無効化することができます。

const element = document.getElementById('my-element');

element.addEventListener('mousedown', function(event) {
  event.preventDefault();
});

element.addEventListener('touchstart', function(event) {
  event.preventDefault();
});

利点

クリックやドラッグなどの操作は許可したまま、テキスト選択のみを無効化できる
よりきめ細かな制御が可能

欠点

コードが煩雑になる
JavaScriptが必要

透明なオーバーレイ要素

透明なオーバーレイ要素を配置し、その要素に対して「pointer-events: none」を設定することで、テキスト選択を無効化することができます。

#my-element {
  position: relative;
}

#my-element::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: transparent;
}

利点

比較的シンプルな実装
視覚的に目立たない

欠点

多少なりともHTMLとCSSの記述量が増える
要素の形状が複雑な場合、うまく適用できない可能性がある

属性による無効化

一部の要素（例えば、<input>要素や<textarea>要素）は、属性を使用してテキスト選択を無効化することができます。

<input type="text" readonly>
<textarea readonly>

利点

最もシンプルで簡単な方法

スタイル設定の自由度が低い
適用できる要素が限られている