ゆうやの雑記ブログゆうやの雑記ブログホームHTML・CSS・JSWebサイトの画像保存を禁止する方法【完全に防ぐのは厳しい】ゆうや2020/01/02SHAREツイートシェアはてブGoogle+PocketLINEこんにちは。UVERworld布教クリエイターのゆうや(@yuyaphotograph)です!本記事では、Webサイトの画像保存を禁止する方法をご紹介します。言っても、「スクリーンショット」があるわけなので完全に画像保存を防止することは現実的ではないかなと今回調べてみて分かりました(汗)ただ、それでもクライアントに「右クリックでの画像保存をできなくして欲しいんだよね...!!」と言われてしまうと対応せざるを得ませんのでその時に活躍するTipを今回紹介します。それでは参りましょう!目次Webサイトの画像保存を禁止してみよう!右クリックを禁止する(PC対策)ドラッグ&ドロップを禁止する(PC対策)長押しを禁止する(スマホ対策)参考記事まとめWebサイトの画像保存を禁止してみよう!右クリックを禁止する(PC対策)imgタグにCSSでpointer-eventsプロパティのnoneを指定してあげます。}このプロパティは「いいねボタン」や「送信ボタン」を指定秒数押せなくする際にも使えますよね!(^o^)pointer-events:noneについてより深く理解したい方は、以下MDNの説明をご覧になって下さいまし。値をnoneに設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。(MDNより引用)個人的にはこの方法が最も楽ちんかなと思います笑なんたって1行コード追加するだけで対応できるんですからね〜以下、サンプルですので右クリックして確かめてみてくださいまし。CodePen.ドラッグ&ドロップを禁止する(PC対策)今回色々な方法を調べてみていく中で目から鱗だったTipsがこちらです。「ドラッグ&ドロップでデスクトップに画像保存することができたんだ!?」という発見がありました笑そんで本題に戻ると、ドラッグ&ドロップを禁止するにはimgタグもしくはbodyタグに以下コードを直接追加してあげます。false;">こちらもCodePenでサンプル作ったのでドラッグ&ドロップして保存できないか確認してみてくだされ。CodePen.長押しを禁止する(スマホ対策)最後はスマホの長押しで保存対策。imgタグにCSSでtouch-calloutやuser-selectプロパティのnoneを指定してあげます。user-select:none;}最後もサンプルで確認してみてくださいまし。Noteまとめ以上、Webサイトの画像保存を禁止する方法をご紹介しました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。