Written by Kasumi

CSSでテキスト選択を不可・禁止にする方法

CSSでテキスト選択を不可・禁止にしたい。

マウスでテキストをドラッグ選択出来ないようにしたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
CSSでテキスト選択を不可
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

マウスでテキスト部分にカーソルを合わせてドラッグしても、テキスト選択出来ません。

実装手順は以下の通りです。

CSSでテキスト選択を不可・禁止にする

p {
  user-select: none;
}

CSSでテキスト選択を不可・禁止にするコード例です。

user-selectプロパティを選択不可にしたい要素に付与します。

user-selectの値にnoneを指定。

テキスト選択不可になります。

まとめ

CSSでテキスト選択を不可・禁止にする方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
6845
HTMLCSS プログラミング

スクロールバーをiphone、ipadでも常に表示しとく方法

更新日:2022.11.01
8968
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
5834
HTMLCSS WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
769