CSSでテキスト選択を無効にする方法

user-selectを使用してテキスト選択を無効にする方法を学ぶ CSSプロパティ。

デフォルトでは、ウェブブラウザでは、本物の限り、任意のウェブサイトでテキストを選択できます。 テキスト要素であり、テキストが含まれる画像ではありません。

マウスまたはキーボードを使用してテキストを選択できます。 cmd + a （Mac）、または Ctrl + a （Windows）。

しかし、（何らかの理由で）テキストの選択を許可したくない場合はどうなりますか？

CSSプロパティuser-selectを使用します noneの値を指定します ：

selector {
  user-select: "none";
}

したがって、.select-noneというクラスを持つすべての要素でテキスト選択を無効にしたいとします。 ：

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

次に、そのクラスを、テキスト選択を無効にする要素に追加します。

<p class="select-none">This text cannot be selected.</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;