【cssのみで簡単】画像の右クリックとドラッグを禁止させる方法

サイト内の画像を右クリックさせたくない人や顧客からの要望をもらうことがあると思います。

右クリックをさせないようにする方法はいくつかあります。

Javascriptを使って右クリックを禁止させる方法もありますがJavascriptを設定によって外されてしまうと右クリックやドラッグができるようになってしまいます。

cssで簡単に右クリックを禁止させる方法であれば簡単に画像を保存できなくなるのでおすすめです。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

画像の右クリックとドラッグを禁止させる方法

ページ内のimgに対してかける場合と特定のimg画像に対してかける方法は下記になります。

ページ内のimgに対してかける場合

css

img{
	pointer-events: none;
}

特定のimg画像に対してかける場合

html

<div class="box">
	<a href="https://7-create.com/"><img src="https://placehold.jp/200x200.png" alt=""></a>
</div>

css

.box img{
	pointer-events: none;
}

サンプル

コメント

タイトルとURLをコピーしました