HTMLで画像のドラッグを無効にする方法


  1. HTMLのdrag属性を使用する方法: HTMLのimg要素には、drag属性を使用して画像のドラッグを無効化することができます。以下に例を示します。

    <img src="image.jpg" alt="画像" drag="false">

    上記の例では、drag属性をfalseに設定することで、画像のドラッグを無効化しています。

  2. CSSのuser-dragプロパティを使用する方法: CSSのuser-dragプロパティを使用して、画像のドラッグを無効化することもできます。以下に例を示します。

    <style>
     img {
       user-drag: none;
     }
    </style>

    上記の例では、img要素に対してuser-dragプロパティをnoneに設定することで、画像のドラッグを無効化しています。

  3. JavaScriptを使用する方法: JavaScriptを使用して、画像のドラッグを無効化することも可能です。以下に例を示します。

    <script>
     document.addEventListener('dragstart', function(event) {
       event.preventDefault();
     });
    </script>

    上記の例では、dragstartイベントをキャプチャしてpreventDefault()メソッドを呼び出すことで、画像のドラッグを無効化しています。

これらの方法を使用することで、HTMLで画像のドラッグを無効化することができます。ご参考ください。