ポートフォリオ備忘録 -画像のダウンロード禁止-

サイト内の画像保護

目的

一応販売してるしダウンロードさせたくないので。
pixtaの審査が終わるまで作品欄に直接貼ってる画像(ideogram利用)。
後学のためにも。

実際のコード/css

.works_img {
  /*PCの長押し禁止*/
  pointer-events: none;
  /* SPの長押し禁止 */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}

部分ごとの解説

• pointer-events: none;:

  • このプロパティは、要素がポインタイベント（クリック、タップ、ホバーなど）を受け取らないように設定します。これにより、要素がクリックやドラッグできなくなります。

• -webkit-touch-callout: none;:

  • このプロパティは、iOSのSafariで長押ししたときに表示されるデフォルトのメニューを無効にします。例えば、画像の保存やコピーのオプションが表示されなくなります。

• -webkit-user-select: none;:

  • このプロパティは、要素のテキスト選択を無効にします。WebKitベースのブラウザ（Chrome, Safariなど）で使用されます。

• -moz-touch-callout: none;:

  • このプロパティは、Firefoxブラウザでの長押し時の動作を無効にするためのものですが、実際には存在しません。WebKitベースの-webkit-touch-calloutのFirefox用に誤って記載された可能性があります。

• -moz-user-select: none;:

  • このプロパティは、要素のテキスト選択を無効にします。Mozillaベースのブラウザ（Firefoxなど）で使用されます。

• user-select: none;:

  • このプロパティは、標準のCSSプロパティで、要素のテキスト選択を無効にします。テキストを選択できないようにし、全てのモダンブラウザでサポートされています。