テキスト選択禁止の方法

2024-10-27

HTML ページ上のテキストを選択できないようにするには、主に CSS と JavaScript の 2 つの方法があります。

CSS を使った方法

CSS の user-select プロパティを使用して、要素内のテキストの選択を禁止することができます。

.unselectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

この CSS クラスを適用したい要素に指定することで、その要素内のテキストを選択できなくなります。

JavaScript を使った方法

JavaScript を使うと、より細かい制御が可能になります。以下は、要素の onselectstart イベントを無効にする方法です。

function disableSelection(element) {
  if (typeof element.onselectstart != 'undefined') {
    element.onselectstart = function() {
      return false;
    };
  } else if (typeof element.style.MozUserSelect != 'undefined') {
    element.style.MozUserSelect = 'none';
  } else {
    element.onmousedown = function() {
      return f   alse;
    };
  }
}

// 使用例
var element = document.getElementById('myElement');
disableSelection(element);

この方法では、特定の要素に対してのみテキストの選択を禁止することができます。

どちらの方法を選ぶべきか

複雑な場合
JavaScript を使うことで、より細かい制御が可能になります。例えば、特定の条件下でのみテキストの選択を禁止するといったことができます。
シンプルな場合
CSS の user-select プロパティだけで十分な場合が多いです。

HTML ページでテキストを選択不可にする方法のコード解説

.unselectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

ベンダープレフィックス
-webkit-, -moz-, -ms- は、それぞれ Safari, Firefox, Internet Explorer 10+ でのベンダープレフィックスです。ブラウザ間の互換性を確保するために、これらのプレフィックスを付与する必要があります。
user-select プロパティ
このプロパティは、要素内のテキストの選択を制御します。none を指定すると、テキストを選択できなくなります。

HTML での利用例

<div class="unselectable">
  このテキストは選択できません。
</div>

上記の HTML コードでは、div 要素に unselectable クラスを適用することで、その中のテキストを選択できなくなります。

function disableSelection(element) {
  if (typeof element.onselectstart != 'undefined') {
    element.onselectstart = function() {
      return false;
    };
  } else if (typeof element.style.MozUserSelect != 'undefined') {
    element.style.MozUserSelect = 'none';
  } else {
    element.onmousedown = function() {
      return f   alse;
    };
  }
}

// 使用例
var element = document.getElementById('myElement');
disableSelection(element);

onmousedown イベント
要素がクリックされたときに発生するイベントです。このイベントハンドラで false を返すことで、デフォルトの動作（テキストの選択）をキャンセルできます。
MozUserSelect スタイル
Firefox でのテキスト選択を禁止する方法です。
onselectstart イベント
テキストの選択が開始されたときに発生するイベントです。このイベントハンドラで false を返すことで、選択をキャンセルできます。
ブラウザごとの対応
各ブラウザでテキストの選択を禁止する方法は異なるため、条件分岐を用いてブラウザごとに適切な処理を行っています。
disableSelection 関数
この関数は、引数で渡された要素に対してテキストの選択を禁止します。

<div id="myElement">
  このテキストも選択できません。
</div>

上記の HTML コードでは、div 要素に myElement という ID を付けています。JavaScript のコードでこの ID を使って要素を取得し、disableSelection 関数を呼び出すことで、テキストの選択を禁止します。

JavaScript
より細かい制御が必要な場合や、動的にテキストの選択を禁止したい場合に適しています。
CSS の user-select プロパティ
シンプルで、複数の要素に対して一括で適用したい場合に便利です。

どちらの方法を選ぶかは、どのような状況でテキストの選択を禁止したいかによって異なります。

アクセシビリティにも注意が必要です。スクリーンリーダーを使用しているユーザーにとっては、テキストを選択できないことは不便な場合があります。

コピー＆ペーストの禁止
clipboard API を使用することで、コピー＆ペーストを禁止することもできますが、ブラウザの機能によって制限される場合があります。
右クリックの禁止
oncontextmenu イベントを使って、右クリックを禁止することも可能です。

pointer-events: none;
要素に対してポインターイベントを無効にすることで、選択やクリックなどを禁止できます。ただし、要素全体が操作できなくなるため、注意が必要です。
-webkit-touch-callout プロパティ
主にモバイルデバイスで、長押しによるメニュー表示を禁止します。

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none   ;
  pointer-events: none   ;
}

カスタムイベント
カスタムイベントを発生させ、そのイベントリスナーで選択動作をキャンセルすることもできます。
イベントリスナー
mousedown, mouseup, selectstart などのイベントリスナーを登録し、イベントが発生した際に preventDefault() メソッドを呼び出すことで、デフォルトの動作をキャンセルできます。
contenteditable 属性
要素に contenteditable="false" 属性を追加することで、要素内のテキストを編集できなくします。

const element = document.getElementById('myElement');

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

サーバーサイドでの処理
サーバーサイドで HTML を生成する際に、JavaScript を利用して動的にテキストを選択不可にする処理を行うことも可能です。
画像への埋め込み
テキストを画像として表示することで、選択を完全に防ぐことができます。ただし、検索エンジンにテキストが認識されなくなるというデメリットがあります。

選択不可にする際の注意点

ブラウザの互換性
各ブラウザで動作が異なる場合があります。テストをしっかりと行う必要があります。
ユーザーエクスペリエンス
全てのテキストを選択不可にするのではなく、必要な部分のみ選択不可にするなど、ユーザーエクスペリエンスを考慮した設計が必要です。
アクセシビリティ
スクリーンリーダーを使用しているユーザーにとっては、テキストを選択できないことは不便です。代替手段として、ARIA 属性などを利用して情報を提供する必要があります。

テキストを選択不可にする方法は、CSS や JavaScript を利用した様々な手法があります。どの方法を選ぶかは、実現したい機能や、対象とするブラウザ、アクセシビリティの考慮など、様々な要素を考慮して決定する必要があります。