CSS
CSS・JavaScriptでサイトのテキストのドラッグを禁止する方法
2020年07月20日 8:00
おはようございます！社員Aです。
今回は、CSSでサイトの画像・テキストのドラッグを禁止する方法をご紹介します。
CSS「uses-select」を使用してドラッグを禁止する方法
CSS「user-select」を使うと、テキストの選択できなくなります。
基礎知識
CSSプロパティ「user-select」は、ユーザーが文章を範囲選択できるかどうかを制御します。
実践
body {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
}
body要素に指定することで、サイト全体のテキストコピーを防ぐことができます。
部分的に適用させたい場合は、pやdivなど要素ごとに指定します。
Javascriptを使ってドラッグを禁止する方法
要素に「onselectstart」と「onmousedown」にreturn false;を設定することで、防げます。
実践
<body onselectstart="return false;" onmousedown="return false;">
こちらも、部分的に適用させたい場合は、pやdivなど要素ごとに指定します。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
