- Webページを選択しようと思うとできたりできなかったりすることがありますよね。なんでだろうということで調べてみました。
user-select
- user-selectという指定を使うようです。developer.mozilla.org - user-select
Syntax
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* does not work in Safari, use only "none" or "text", or else it will allow to type in the html container*/
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
どれが効くのか？
- 実際に試したところ効くのと効かないのがあるようです。
- 確実なのはnoneくらい？allはMacでは便利かも。
- auto : デフォルトなので特になし。
- none : 選択できなくなります、Mac(Safari/Chrome)でもiOSでも効きました。
- text : ダブルクリックすると単語が選択されました。ただこれって普通の動作？
- all : クリックすると全文が選択されます、コピペして欲しいブロックが指定できて便利かも？ただ、iOSでは効きませんでした。
- contain : IEだけっぽいので無視
サンプル
See the Pen user-select by q∂~∂p (@qoAop) on CodePen.
まとめ
- WebAppではときどきコントローラ部がごっそり選択されちゃって微妙なことになります。
- なので、全般的にnoneでコンテンツ部をtextにして、コンテンツの電話番号とかをallにするとかだといいのかも？
実際にためしてみました。
- Bootstrapの勉強でつくったみたWebアプリToday's Lunchにuser-selectを指定してみました。
- 基本的にはuser-select:noneで、店名と住所はワンクリックで指定できるuser-select:allを指定しました。
- 使い勝手は良くなるかな？