【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【CSS】ユーザーに画像の保存を禁止させる方法

本記事では、ウェブサイトで公開している画像を保存させない方法について解説しています。CSSだけで実装することが出来るので、ウェブ初学者の方でも簡単です!

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

ユーザーが画像を保存する時

先輩くん

皆さんがウェブサイトを閲覧している時に、欲しい画像があったらどのようにして保存していますか?

後輩ちゃん

スマホの場合だと欲しい画像を長押しして写真に追加をして、PCの場合だと右クリックして名前を付けて保存しています!

先輩くん

当たり前ですが、スマホとPCでは画像を保存するまでの手順が異なりますよね。しかし、保存したい画像をクリック・タッチするという動作は共通しています。ここがポイントで画像自体をクリック・タッチ出来ないように制御することが出来れば保存できないようにすることが出来ます!

画像のクリック・タッチを禁止する

画像のクリック・タッチを禁止する実装はとても簡単で、imgタグにpointer-events:noneを指定するだけです。

img{
    pointer-events: none;
}
先輩くん

一部の画像のみ保存を禁止させたい場合は、特定のidやclassなどを割り当てpointer-events:noneを指定します!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次