(Sample)

今回は、Webページ上で右クリックを禁止したり、テキストを選択できないようにする方法について解説します。

「自分のページのテキストをコピーされたくない！」
「Webアプリの操作画面で誤操作を防ぎたい！」
そんなときに使えるテクニックですが、使いすぎはユーザー体験を損ねる可能性もあるので、その点もあわせて解説します。

実現できること

このサンプルでは、次の2つの機能が実装されています。

機能説明
右クリック禁止コンテキストメニュー（「コピー」「検証」など）を表示させない
テキスト選択禁止テキストのドラッグ選択やコピーをできなくする

CSSでテキスト選択を禁止する

body {
  -webkit-user-select: none; /* Safari用 */
  -moz-user-select: none;    /* Firefox用 */
  -ms-user-select: none;     /* IE/Edge用 */
  user-select: none;         /* 標準仕様 */
}

user-select: none; の意味

このプロパティは「ユーザーがテキストを選択できるかどうか」を設定します。

値意味
noneテキスト選択不可（完全に無効）
textテキストは選択可能（標準動作）
allダブルクリックなどで全文選択される

補足：ベンダープレフィックスとは？

各ブラウザで仕様が異なる時期があったため、互換性のために以下のような接頭語（プレフィックス）が必要でした。

  • -webkit-：SafariやChrome系
  • -moz-：Firefox
  • -ms-：Internet Explorer / Edge（旧）

JavaScriptで選択と右クリックを完全ブロック！

選択の開始を防ぐ

document.addEventListener("selectstart", function (e) {
  e.preventDefault();
});

これは、テキストの選択が始まるタイミングのイベントを検知して、その動作をキャンセルします。

右クリックメニューを無効化

document.addEventListener("contextmenu", function (e) {
  e.preventDefault();
});

右クリックメニュー（＝context menu）が開こうとしたときに、e.preventDefault() でキャンセルしています。

これにより、「右クリック → 検証」「画像を保存」「テキストをコピー」などができなくなります。

ユースケース：いつ使うべき？

適している場面

  • 公開前の試作ページなどで不要な操作を防ぎたい
  • POSシステムなど業務用Webアプリの「固定操作」画面
  • PDFビューアやオンライン教材などで、コピー防止をしたい

適していない場面

  • 一般的なWebサイト（ブログ、ニュース記事など）
  • アクセシビリティが重要なサービス（教育・官公庁系など）

テキスト選択や右クリックができないと、ユーザーが不便に感じる可能性があるため、安易な使用は控えましょう。

回避されるリスクも知っておこう

たとえ選択や右クリックを禁止しても…

  • ソースコードはブラウザの「開発者ツール」で見られます
  • Ctrl+C などのキーボードショートカットでコピーされることもあります
  • JavaScriptを無効化すれば制限は回避可能

つまり、このような制限は「ちょっとした妨害」程度にしかなりません。

今後の学習の指針

この機能をきっかけに、次のようなステップアップを目指しましょう！

  1. JavaScriptイベントの基本をマスターする
    → preventDefault() や addEventListener() の使い方をしっかり理解！
  2. アクセシビリティについて学ぶ
    → 全ユーザーが快適に使えるWeb設計とは何かを考えるきっかけになります。
  3. コンテンツ保護のより効果的な方法を知る
    → サーバーサイドでの認証、透かし、PDFへの変換など、より堅牢な保護方法も検討しましょう！

「選択できない・右クリックできない」という一見シンプルな機能にも、多くのテクニックや注意点が詰まっているんです。
ぜひ、試しながら理解を深めていってくださいね！