CSS | 画像のドラッグを無効にする方法

2021-02-052021-11-23CSS 制御,CSS

CSSで画像のドラッグ移動を無効・禁止にする方法の紹介とそのサンプルコードの紹介です。

See the Pen CSS | Disable image drag by yochans (@yochans) on CodePen.

画像のドラッグを無効にする

CSSで画像のドラッグを無効にするにはuser-dragプロパティにて「none」を指定します。

img {
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}

user-drag: noneが効かない場合

この機能は、親のHTML要素ではなくimgタグへのCSSセレクタで機能します。
idやclassでの指定は可能です。

また、「user-drag」は2021年現在、Chrome系、FireFoxなど各ブラウザにてベンダープレフィックスでの指定が必要となっています。

画像のダウンロードを抑制するのが目的の場合

基本的にゲームなどのWEBアプリでユーザーが画像の上を操作する際に、画像をドラッグしてしまわないようにする程度の機能です。

画像のドラッグを無効にする目的が、画像のダウンロードを抑制あるいは禁止することの場合は、最低でも右クリック禁止などの機能を追加していく必要があります。

WEBサイトに公開している以上、完全にダウンロードされる事を防ぐという考えは少ないと思いますが、スクリプトを利用してできる限り画像のURLを隠すといった方法が考えられます。