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

公開日: 2011-10-12
タグ: CSS

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;"
/>

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

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

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

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

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