本記事では、ウェブサイトで公開している画像を保存させない方法について解説しています。CSSだけで実装することが出来るので、ウェブ初学者の方でも簡単です！
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著: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を指定します！
