こんにちは、ナカムラです。
今回はCSSプロパティの中で、ユーザーの操作を制限するプロパティをご紹介します。
基本的にユーザーの操作をできなくする、というのは避けたいものですが、操作できることによって目的の動作の邪魔になってしまうケースもあります。
例えばカルーセルなど、ドラッグまたはスワイプすることで前後の表示を切り替える操作が発生するものです。
スマホのスワイプでは起こりづらいですが、PCのマウス操作でドラッグさせた時に、カルーセルの要素内のテキストなどを意図せずに選択してしまう場合があります。
特に選択する用事もあまりない部分なので、「前後にカルーセルを動かしたい」という目的の邪魔になってしまいます。
そこで設定しておきたいのがuser-selectです。
user-select
ユーザーがテキストを範囲選択できるかどうかを制御するCSSプロパティになります。
基本的に範囲選択できるのがデフォルトなので、使うとしたらnoneか、allあたりになると思います。
noneは選択できないようにし、allはワンクリックで要素内を全て選択するようにします。
先程挙げたカルーセルの例では、テキストを選択させたくないので、noneを使用することになります。
値による動作の違いは下記のページをご確認ください。
user-select - CSS: カスケーディングスタイルシート | MDN
pointer-events
user-selectはテキストの範囲選択を制御するものでしたが、こちらはグラフィック要素のポインターイベントを制御するCSSプロパティになります。
こちらもよく使うのはnoneになります。
装飾の画像など、要素の上に重ねるようなレイアウトの時など、そのままでは下にあるリンクボタンが押せなくなる、などの不具合が発生することがあります。
装飾の場合はそれ自体は選択する必要も、クリックする必要もないので、pointer-events:noneを使ってポインターイベントの対象から外しておきます。
svgではstroke（線）とfill（塗り）によって分けることも可能です。
値による動作の違いは下記のページをご確認ください。
pointer-events - CSS: カスケーディングスタイルシート | MDN
まとめ
そんなにたくさん使うものではありませんが、いざというときに覚えておくと便利なプロパティです。 ぜひ活用してみてください。
