CSS基礎 練習問題 23:CSSのテキスト選択制御
要素をクリックしても選択されないよう、マウスでのテキスト選択(範囲選択)を禁止したい場合、正しいCSSの書き方はどれか。
- user-select: none;
- pointer-events: none;
- cursor: none;
- text-select: disabled;
- selection: none;
正解と解説を見る
正解:user-select: none;
マウスでのドラッグによるテキスト選択を制御するプロパティはuser-selectであり、値にnoneを指定すると選択操作自体ができなくなります。
【正解の理由】
user-select: none;を指定すると、その要素内のテキストをマウスでドラッグしても選択状態にならなくなります。
【不正解の理由】
• 「pointer-events: none;」:クリックやホバーなどマウスイベント全般を要素が受け取らないようにするプロパティで、テキスト選択専用の制御ではなく、クリックそのものも無効になってしまう
• 「cursor: none;」:マウスカーソルの表示自体を消すプロパティであり、テキスト選択の可否とは無関係
• 「text-select: disabled;」:CSSに存在しないプロパティ名であり、無効な指定となる
• 「selection: none;」:CSSに存在しないプロパティ名であり、テキスト選択されたときの見た目を変える場合は「::selection」という疑似要素を使う必要がある