ウェブページでの右クリックの無効化について

2024-02-14 08:50 ウェブ開発JavaScript右クリック無効化
  1. CSSを使用する方法: CSSを使って右クリックメニューを非表示にすることで、一般的なユーザーに対して右クリックを無効化することができます。以下のコードをHTMLファイルのセクション内に追加してください。
<style>
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>

この方法では、右クリックによるメニューが表示されなくなりますが、高度なユーザーはまだ他の方法でコンテンツをコピーできる可能性があります。

  1. JavaScriptを使用する方法: JavaScriptを使って右クリックを検知し、イベントを無効化することで、より確実に右クリックを無効化することができます。以下のコードをHTMLファイルのセクション内に追加してください。
<script>
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});
</script>

この方法では、右クリックによるメニューが表示されなくなりますし、高度なユーザーも一般的な方法ではコンテンツをコピーできなくなります。

ただし、上記の方法は一般的なユーザーに対して有効ですが、高度なユーザーやスクリプトを無効化することはできません。また、この方法はユーザーエクスペリエンスにも影響を与える可能性があるため、慎重に使用する必要があります。

以上がウェブページでの右クリックの無効化についてのシンプルで簡単な方法とコード例です。適切な方法を選択し、ウェブページの要件に合わせて実装してください。