CSS
CSS・JavaScriptでサイトのテキストのドラッグを禁止する方法
2020年07月20日 8:00
おはようございます!社員Aです。
今回は、CSSでサイトの画像・テキストのドラッグを禁止する方法をご紹介します。
CSS「uses-select」を使用してドラッグを禁止する方法
CSS「user-select」を使うと、テキストの選択できなくなります。
基礎知識
CSSプロパティ「user-select」は、ユーザーが文章を範囲選択できるかどうかを制御します。
実践
1 2 3 4 5 6 7 8 |
body { user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; } |
部分的に適用させたい場合は、pやdivなど要素ごとに指定します。
Javascriptを使ってドラッグを禁止する方法
要素に「onselectstart」と「onmousedown」にreturn false;を設定することで、防げます。
実践
1 |
<body onselectstart="return false;" onmousedown="return false;"> |
関連記事
この記事を書いた人
社員A
入社7年目。フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。 一人旅が好きで、主に東南アジアを周っています。旅行が好きな方、おすすめスポットがあればぜひ教えて下さい!