サイトの画像を簡単に保存させたくない場合

cssで透明のカバーをかぶせましょう｜web creators 2008年10月

web creators 10月号には「使えるCSS デザインの技152」という特集が組まれています。結構使えるモノや定番のテクニックが載っていますので、手元に置いておくと便利かも知れません。

そんな中で今回紹介するのは、サイト上の画像を簡単に保存させないようにする小技です。
以前、建築デザイン事務所のサイトをコーディングした時に、施工実績である建築物の画像をダウンロードできなくするか、印刷できないようにして欲しいと言われたコトがありました。
画像をダウンロードできなくするには、背景にすればある程度は対応できますが、何百とある画像を背景にするのは到底現実的とは思えません。仕方なく、cssで印刷時には該当する画像を消すようにしました。

このような特殊な事情の時に使えるのが、今回の小技です。
実際、ソースから画像のURLを辿るコトもできますし、もっと簡単にスクリーンショットを撮ってしまえば、画像は手に入れられる訳ですが…。

まあ、とりあえずサンプルです。

↑このデータはこちらからダウンロードできます。

仕組みはとても簡単です。
適当なclass名を付けた<div>を用意し、その中に透明なgifを背景画像とする<span>要素を絶対配置で該当する画像に被さるように配置します。その後に画像を記述すればＯＫです。

…気休め程度の小技かもしれませんが、とりあえずクライアントに対しては「対応しました」と、言えるかも知れません。