CSS・JavaScriptでサイトのテキストのドラッグを禁止する方法

CSS

CSS・JavaScriptでサイトのテキストのドラッグを禁止する方法

2020年07月20日 8:00　

CSS・JavaScriptでサイトのテキストのドラッグを禁止する方法

おはようございます！社員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 {

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;">

1	<body onselectstart="return false;" onmousedown="return false;">

こちらも、部分的に適用させたい場合は、pやdivなど要素ごとに指定します。

この記事を書いた人

社員A

入社6年目。フロントエンドエンジニア・デザイナーの社員Aです。多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。一人旅が好きで、主に東南アジアを周っています。旅行が好きな方、おすすめスポットがあればぜひ教えて下さい！

CSS・JavaScriptでサイトのテキストのドラッグを禁止する方法