ユーザーインタラクションを無効化してDIVを非選択可能にする

2024-06-22

CSSでDIVを非選択可能にする方法

user-selectプロパティは、要素内のテキストを選択可能かどうかを制御します。このプロパティをnoneに設定することで、要素内のテキストを選択できなくなります。

div {
  user-select: none;
}

pointer-eventsプロパティは、要素とポインタイベント（マウスのクリックやドラッグなど）のやり取りを制御します。このプロパティをnoneに設定することで、要素をクリックしたりドラッグしたりできなくなります。テキストを選択することもできなくなります。

div {
  pointer-events: none;
}

補足

user-selectプロパティは、テキストを選択できなくするのみです。一方、pointer-eventsプロパティは、要素をクリックしたりドラッグしたりすることもできなくします。
一部のブラウザでは、user-select: noneで設定しても、子要素のテキストを選択できる場合があります。この場合は、子要素にもuser-select: noneを設定する必要があります。
JavaScriptを使用すれば、より詳細な制御が可能になります。例えば、特定の条件下でのみDIVを非選択可能にすることができます。

上記以外にも、擬似要素や背景画像を使用する方法など、様々な方法があります。具体的な方法は、目的や状況に合わせて選択してください。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSSでDIVを非選択可能にする</title>
  <style>
    /* user-select を使用してテキストを選択不可にする */
    .user-select-none {
      user-select: none;
    }

    /* pointer-events を使用して要素とのインタラクションを無効にする */
    .pointer-events-none {
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div class="user-select-none">このテキストは選択できません。</div>

  <div class="pointer-events-none">この要素をクリックしたりドラッグしたりできません。</div>
</body>
</html>

説明

このコードでは、2つのDIV要素を作成しています。

最初のDIV要素には、user-select-noneクラスが設定されています。このクラスには、user-select: noneプロパティが設定されているため、このDIV要素内のテキストを選択することはできません。

このコードを実行すると、以下のようになります。

最初のDIV要素内のテキストは、マウスでドラッグしても選択できません。
2番目のDIV要素は、マウスカーソルを合わせても反応しません。クリックしたりドラッグしたりすることもできません。

以下のコードは、擬似要素を使用してDIVを非選択可能にする方法を示しています。

<!DOCTYPE html>
<html>
<head>
  <title>CSSでDIVを非選択可能にする</title>
  <style>
    div::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div>この要素をクリックしたりドラッグしたりできません。</div>
</body>
</html>