CSS・JavaScriptでコピー禁止・右クリック無効・長押し防止・拡大縮小制限

CSS・JavaScriptでコピー禁止・右クリック無効・長押し防止・拡大縮小制限｜選択不可の実装方法まとめ

Webページの内容を保護したい場合、コピー禁止・右クリック無効・テキスト選択不可・スマホの長押しメニュー防止・拡大縮小制限などの対策が有効です。
このページでは、CSSやJavaScriptを使ってこれらの操作を制限する方法を、具体的なコード例とともに紹介します。
`user-select:none` や `oncopy="return false;"`、`oncontextmenu="return false;"` などの属性・プロパティの使い方に加え、スマホ対応やアクセシビリティへの配慮も含めて解説しています。

コピー禁止

コピー禁止にするにはその要素タグに
oncopy="return false;"
属性を設定します。

このタグ内の文字だけを選択した場合はコピーできません。
このタグ内の文字を含む上下の文字も選択した場合はコピーできるので注意。

<p class="normal" style="border:1px solid #000;max-width:100%;width:600px;" oncopy="return false;">
  このタグ内の文字だけを選択した場合はコピーできません。<br>
  このタグ内の文字を含む上下の文字も選択した場合はコピーできるので注意。
</p>

<body oncopy="return false;">
  body全体がコピー禁止
</body>

コンテキストメニューを禁止

任意の要素で右クリックによるコンテキストメニューの表示を禁止にするにはその要素タグに
oncontextmenu="return false;"
属性を設定します。

ここで右クリックしてもコンテキストメニューは表示されません。

<body oncontextmenu="return false;">
  bodyタグ全体で右クリックによるコンテキストメニューが表示されなくなります
</body>

テキスト選択の禁止

テキストの選択を禁止するにはCSSで
user-select:none;
を設定します。

このテキストは選択できません。このテキストは選択できます。

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

<body class="no_select">
  bodyタグ全体でテキスト選択が出来なくなります
</body>

<style>
  .no_select{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
</style>

長押し(ロングタップ)メニュー表示の禁止

スマホ等でimgタグの画像をロングタップした時に表示されるメニュー表示を禁止するにはCSSで
-webkit-user-select:none; pointer-events:none; -webkit-touch-callout:none;
を設定します。

上記画像をロングタップしてもメニューは表示されません。

<img src="./imgs/0001s.jpg"
  style="width:100px; height:auto; -webkit-user-select:none; pointer-events:none; -webkit-touch-callout:none;"
  width="225" height="300"><br>
上記画像をロングタップしてもメニューは表示されません。

imgタグのドラッグ禁止

imgタグの画像をドラッグできないように禁止するには
draggable="false"
属性を設定します。

上記画像はドラッグできません。

<img src="./imgs/0001s.jpg" style="width:100px; height:auto;" draggable="false" width="225" height="300"><br>
上記画像はドラッグできません。

Pull-to-Refresh（プルトゥリフレッシュ）によるリロード禁止

Android ChomeやiOS Safariで一番上にスクロールしていて、上から下にスワイプすると更新(Pull-to-Refresh)されるのを止めるには
Androidの場合は bodyタグのCSSに body{overscroll-behavior-y: none;} を入れるだけで止まりますが
iOSも止めるには以下を入れる必要があるようです。

<style>
html {
    overscroll-behavior-y: none;
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}

（ご参考）overscroll-behavior について

overscroll-behavior:auto; /* 既定値 */: (※1)「スクロール領域末端」処理は行われる。
隣接するスクロール領域に対する(※2)「スクロール連鎖」処理も行われる。
overscroll-behavior:contain;: (※1)「スクロール領域末端」処理は行われる。
隣接するスクロール領域に対する(※2)「スクロール連鎖」処理は行われない。
overscroll-behavior:none;: (※1)「スクロール領域末端」処理は行われない。
隣接するスクロール領域に対する(※2)「スクロール連鎖」処理も行われない。

(※1)「スクロール領域末端」処理: スクロール領域最上部で更に下に引っ張るとリロードする「プルトゥリフレッシュ処理」や
スクロール領域末端でさらにスクロールさせると発生する「バウンド処理」などのこと。
(※2)「スクロール連鎖」: 例えば body要素がスクロール領域でその子要素の div要素がスクロール領域の場合、
div要素上で末端までスクロールして更にスクロールすると連動してbodyもスクロールされる機能のこと。

拡大縮小できなくする

完全に防ぐことはできませんが、以下のJavaScriptとmetaタグの組み合わせにより、ユーザーによる拡大縮小操作をある程度制限することが可能です。特にスマートフォンのピンチズームや、PCでのCtrlキーによるズーム操作を抑制できます。

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  <script>
    document.addEventListener("DOMContentLoaded",function(){
      document.addEventListener('gesturestart', function (e) {
        e.preventDefault();
      });
      document.addEventListener('gesturechange', function (e) {
        e.preventDefault();
      });
      document.addEventListener('gestureend', function (e) {
        e.preventDefault();
      });
      document.addEventListener('wheel', function (e) {
        if (e.ctrlKey) {
          e.preventDefault();
        }
      }, { passive: false });
      document.addEventListener('keydown', function (e) {
        if (e.ctrlKey && (e.key === ';' || e.key === '+' || e.key === '-' || e.key === '=')) {
          e.preventDefault();
        }
      }, { passive: false });
    });
  </script>
</head>