CSSでコピー禁止、コンテキストメニュー禁止、テキスト選択禁止、長押しメニュー禁止の方法

CSSを使用して「コピー禁止」「コンテキストメニューを禁止」「テキスト選択の禁止」「スマホ等でのロングタップによるメニュー表示の禁止」の方法です。

コピー禁止

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

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

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

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

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

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

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

テキスト選択の禁止

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

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

<span class="no_select">このテキストは選択できません。</span>このテキストは選択できます。
<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>
上記画像をロングタップしてもメニューは表示されません。<br>
<img src="./imgs/0002s.jpg" style="width:100px;height:auto;" width="225" height="300"><br>
上記画像をロングタップしたらメニューは表示されます。