CSSでテキストの選択を無効化する

ヘッダーやメニューで、ダブルクリックするとテキストが選択状態になるのを抑制したい。

簡単にできる方法はないかと調べると、CSSだけで選択を無効化できたのでメモ。

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

developer.mozilla.org

user-select: none で、指定した要素とその子孫要素のテキストを選択できなくなる。

JavaScriptSelection を用いた場合は、このCSSが設定されていても要素を選択できるため、コピー防止などにはならないが、テキスト選択の抑制としては十分。

Tailwind CSSのクラス

スタイリングにTailwind CSSを使っているが、そちらだと select-none として用意されている。

User Select - Tailwind CSS

振り返り

JavaScriptで何かやらないといけないかと思ったが、CSSだけで対応できてありがたい。

対応ブラウザを見ると、IEも10から対応していたので、かなり昔からあった模様。

しばらくCSSから遠ざかっていたので、ここら辺キャッチアップしないとなぁ...