[css]右クリックから画像を保存できなくする方法

というか、画像を選択できなくする方法

結論

画像もしくは画像の入ってる要素にpointer-events: none;を記述する。

img{
    pointer-events: none;
}

用途

画像をDLされたくない、という目的はCSSじゃ太刀打ち出来ないので論外。

これの良いところは、画像を選択できなくなる点。選択すると画像に色がついてしんどい。記事内に挿入した画像ならいいんだけど。特にしんどいのは、キービジュアルとかスライドショーとかで設置した画像とか、背景用途で設置した画像が選択できるとどうも格好がつかない。backgroundで指定した画像は選択できないので同じ感じでやりたいって場合に活躍する。

シンプルな組み方だったら選択できてもまあそんなもんかで済ませられるんだけど、入り組んでると、ひょんなことから選択してしまって解除したいのになかなか解除できないとか、そういう目に遭うのを回避できる。精神衛生にとてもいい。変な操作するなよってことだけど、偶発的なものはどうしようもないし、構築側で防げるなら防ぎたい。

画像がDL可能であることについて思うこと

WEB上のものは基本的に何でもかんでもDLできる。そういうもんだと思ってる。そもそもパスワードもなしにアクセスできる状態でDL禁止、右クリック禁止とか、何を考えてんだろうねって。厳密には会員制にしたところで意味ないんだけど。本気を出したらガッチガチにできるけど、簡単に解除できるじゃんねって組み方が多いので、意識が高いのか低いのかよくわからない。

意識高い系的な程度で禁止にしてる人の、何がそうさせるのかがわからない。使い勝手にかかわるから禁止するみたいな、そういう理屈なら分かる。今回がそれ。

DLはしていいと思う。問題なのは、勝手にそれを使うこと。

応用みたいなもの

視覚的には存在するけどアクション的には無視するってことで、だからposition:absolute;とかで手前に重ねたものに適用すれば、奥の要素を操作させることができる。

そういう場面は地味にあって、例えば<select>を独自デザインしたい場合。矢印アイコンを付ける際、疑似要素を重ねることになる。疑似要素を重ねるとそっちに当たり判定が発生して、アイコンをクリックしてもドロップダウンは発火しない。このときに適用するとか。