CSS | テキストの選択を無効にする

CSS,CSS 制御

css-テキストの選択を無効にする

CSSでページ全体または特定のHTML要素内で、マウスドラッグやモバイル端末の操作でのテキスト選択を無効・禁止にする方法の紹介です。

See the Pen CSS | Disable text selection by yochans (@yochans) on CodePen.

テキストの選択を無効にする

CSSでテキスト選択を無効にするにはuser-selectプロパティにて「none」を指定します。

ページ全体でテキストの選択を無効にするにはbodyに記述。

body {
	user-select: none;
}

ページ全体ではなくHTML要素に対して個別に指定していくには、それぞれの要素にて指定します。

#container {
	user-select: none;
}

テキスト選択の無効を解除する方法や、テキスト選択しなくてもコピーする方法などはいくらでも存在しますので文章の保護としてはおまけ程度の機能になりますが、HTMLゲームなどのコンテンツ内でクリックと同時にテキスト選択してしまう場合などに有効な手段となります。

CSS,CSS 制御

Posted by Yousuke.U