CSS テキストや画像を選択できないようにする方法

CSS を使って、文字列や画像の選択を無効にする方法を書いていきます。

1. 無効にする方法

以下のプロパティを設定すると、マウスドラッグ等での選択が無効になります。

user-select: none;

初期値は auto のようです。

以下は、p と img の選択を無効にした例です。

コードは以下の通りです。

<p>この文字列と下の画像は選択できません。</p>
<img src="https://web-dev.hatenablog.com/icon/favicon">

p,img {
  user-select: none;
}

下のように、親要素に指定すると子要素も無効になります。

See the Pen Untitled by mamorum (@mamorum) on CodePen.

コードは以下の通りです。

<div>
  <p>この文字列と下の画像は選択できません。</p>
  <img src="https://web-dev.hatenablog.com/icon/favicon">
</div>

div {
  user-select: none;
}