CSSでテキスト選択を無効にする方法【user-selectプロパティの使い方】

CSSのuser-selectプロパティを使えば、Webページ上のテキスト選択を簡単に無効化できます。この記事では基本的な使い方からブラウザ対応まで、コード例とデモ付きでわかりやすく解説します。

デフォルトではテキストは自由に選択できる

通常、Webブラウザではどのサイトでもテキストを選択できます。ただし、これは本物のテキスト要素に限られます。画像の中に文字が焼き込まれているような場合は選択できません。

テキストの選択はマウスでもキーボードでも行えます。たとえばCmd + A(Mac)やCtrl + A(Windows)でページ全体を選択できますね。

user-selectプロパティでテキスト選択を無効にする

しかし、何らかの理由でテキスト選択を許可したくない場合はどうすればよいのでしょうか?

その場合は、CSSプロパティのuser-selectにnoneという値を指定します。

selector {
  user-select: none;
}

たとえば、.select-noneというクラスを持つすべての要素でテキスト選択を無効にしたい場合は、次のように記述します。

.select-none {
  user-select: none;
}

あとは、テキスト選択を無効にしたい任意の要素にこのクラスを追加するだけです。

<p class="select-none">このテキストは選択できません。</p>

デモ:

このテキスト要素は選択できません。実際にドラッグして試してみてください!

すべてのブラウザに対応させるためのベンダープレフィックス

user-selectプロパティをすべてのブラウザで確実に動作させるには、以下のようなベンダープレフィックスを併せて指定する必要があります。

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

なお、近年の主要ブラウザ(Chrome、Firefox、Edge、Safariなど)では、プレフィックスなしのuser-selectが標準でサポートされています。ただし、古いバージョンのSafariやiOS端末への対応が必要な場合は、-webkit-user-selectなどのプレフィックス版も忘れずに指定しておくと安心です。