CSSだけで簡易的にimg要素の画像をダウンロード禁止にさせる方法。HTTPの通信の都合上、ダウンロードは完全には防げないのであくまで参考程度に。

• CSSだけで簡易的にimg要素の画像をダウンロード禁止にさせるサンプル

以下のHTMLがあったとします。

<div class="picture">
<img src="sample.jpg" width="600" height="400" alt="ねこです　よろしくお願いします" />
</div>

そのうえでCSSでimg要素に対しクリッカブルとマウスのドラッグを無効にさせ、さらに念のため疑似要素タグで画像要素の上に架空要素を配置してクリックを抑制させています。

.picture{
 display: block;
 position: relative;
 width: 100%;
 max-width: 400px;
}

.picture img{
 display: block;
 position: relative;
 z-index: 1;
 width: 100%;
 height: auto;

 /*マウスのクリック抑制*/
 pointer-events: none;

 /*スマホの長押し抑制*/
 -webkit-touch-callout:　none;
 -webkit-user-select:　none;
 -moz-user-select:　none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
}

/* 架空要素を画像の上に被せて右クリック無効化 */
.picture::before{
 display: block;
 position: absolute;
 content: "";
 top: 0;
 bottom: 0;
 z-index: 2;
 width: 100%;
 /* Chromeでは何かしら透明色以外の背景色を指定ないとだめ */
 background: white;
 /* 透明度を0 */
 opacity: 0;
}

なおHTMLコードで直に画像ソースを見られたり、Webデベロッパーツールでimg要素や画像ソースを取得されたり、スクリーンショットを取られたりする等は防げません。これらはJavaScriptを駆使したところでどうやっても防げないのであくまで一時対処のみ。

おしまい♥