コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
例
ホームページ ウェブフロントエンド htmlチュートリアル HTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法

HTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法

Sep 03, 2023 am 08:09 AM
html画像 jsブロック ドラッグ可能/選択可能

HTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法

次のコード スニペットを画像のプロパティに追加し、画像がドラッグされて選択されないようにします。

1

2

3

4

5

6

7

8

img { 

   user-drag: none; 

   user-select: none;

   -moz-user-select: none;

   -webkit-user-drag: none;

   -webkit-user-select: none;

   -ms-user-select: none;

}

ログイン後にコピー

テキストまたは画像をダブルクリックすると、強調表示（選択）されます。ユーザー選択属性を使用すると、これを防ぐことができます。このプロパティを none に設定すると、画像が選択 (強調表示) されないようにすることができます。

例

次のコードを実行して、画像が選択されないようにすることができます -

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

   <head>

      <style>

         img {

            -drag: none;

            user-select: none;

            -moz-user-select: none;

            -webkit-user-drag: none;

            -webkit-user-select: none;

            -ms-user-select: none;

         }

      </style>

   </head>

   <body>

      <img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">

   </body>

</html>

ログイン後にコピー

以上がHTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前 By 尊渡假赌尊渡假赌尊渡假赌
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
もっと見る

ホットツール Tags

コード&IT
オーディオ
仕事
マーケティング
AI検出器
チャットボット
デザイン&アート

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1週間前 By 尊渡假赌尊渡假赌尊渡假赌
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
もっと見る

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7308
9
Java チュートリアル
1623
14
CakePHP チュートリアル
1344
46
Laravel チュートリアル
1259
25
PHP チュートリアル
1207
29
もっと見る
Related knowledge
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ 公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？

WebページのPNG画像にストローク効果を効率的に追加する方法は？ WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は？

＆lt; meter＆gt;の目的は何ですか 要素？ ＆lt; meter＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:35 PM

＆lt; meter＆gt;の目的は何ですか 要素？

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？

＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ ＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？

＆lt; datalist＆gt;の目的は何ですか 要素？ ＆lt; datalist＆gt;の目的は何ですか 要素？ Mar 21, 2025 pm 12:33 PM

＆lt; datalist＆gt;の目的は何ですか 要素？

IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？ IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？ Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？

See all articles