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ゲームなどのコンテンツ内でクリックと同時にテキスト選択してしまう場合などに有効な手段となります。