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

CSS,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を隠すといった方法が考えられます。

CSS,CSS 制御

Posted by Yousuke.U