img要素にpointer-events:none;を指定する

CSS TRICKにpointer-eventsのCSSプロパティを使って、ナビゲーションにあるカレントページのリンクをクリック不能にするデモがあった。

http://css-tricks.com/pointer-events-current-nav/

これを見て、このプロパティをimg要素に使ったらどうなるのと思って試してみた。

<img src="https://placekitten.com/g/250/250" alt="img tag with pointer-event:none;" style="pointer-events: none;">

pointer-events: none;つきのimg要素

どうやらPC版ブラウザでは画像上での右クリックや画像のD&Dが不可能になるようだ。コンテクストメニューから保存したりブラウザから別タブにD&Dがその画面上からはできない、ということになる。

もちろんソースを表示して画像のURLを直接参照したり、ブックマークレットなどを使えば画像を保存することはできる。そして当然ながら、CSS3のpointer-eventsプロパティに対応していないブラウザでは無意味。

さらにスマートフォン版のブラウザではほとんど制限をかけられないようで、たとえばiOSだと長タップで開くコンテクストメニューからの画像保存はできないものの、範囲選択で画像を含めてコピーすれば「メール」アプリなどのドキュメントに画像ごと貼り付けることができた。リッチテキストを扱えるアプリなら多くが可能かもしれない。また、Android 2.3.3の既存ブラウザではコンテクストメニューの内容に制限がかからなかった。このプロパティ自体が無効のようだ。

画像に直接指定せず、divでワンクッション置いたりするとまた違った挙動なのかもしれないが試していない。

版権のある写真やイラストを扱う場合、このルールを適用することで権利者の利益を少し守ることができそう。ルールをstyle属性で指定しても外部CSSで指定しても効果は同じなので、PC向けコンテンツで局所的に右クリックを禁止させたい場合にはお手軽な手法かもしれない。