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

         

CSS

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

2020年07月20日 8:00 

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

おはようございます!社員Aです。

今回は、CSSでサイトの画像・テキストのドラッグを禁止する方法をご紹介します。

 



 

CSS「uses-select」を使用してドラッグを禁止する方法

CSS「user-select」を使うと、テキストの選択できなくなります。

基礎知識

CSSプロパティ「user-select」は、ユーザーが文章を範囲選択できるかどうかを制御します。

 

実践
body要素に指定することで、サイト全体のテキストコピーを防ぐことができます。

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

 

 



Javascriptを使ってドラッグを禁止する方法

要素に「onselectstart」と「onmousedown」にreturn false;を設定することで、防げます。

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

 

 

関連記事

この記事を書いた人

社員A

社員A

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