HTML/CSS

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

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

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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

先輩くん

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

後輩ちゃん

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

先輩くん

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

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

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

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

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

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