こんにちは。
本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。
最近ではネイティブアプリ(それぞれの言語でストアでダウンロードするアプリです)ではなく、Webベースでアプリ化するサービスも増えてきていますので、WebっぽくならないTipsです。
さっそくコード
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
ベンダープレフィックスがついてますが、ベースはuser-select: none;
及び-webkit-touch-callout: none;
です。
user-select
none
に設定することで、テキストを選択させないようにできます
-webkit-touch-callout
iOSで文章等を長押しした際に表示されるポップアップメニューを無効化します
さっそく触ってみる
See the Pen GJgGYG by Tsukasa Nagata (@nt-uni) on CodePen.0
いかがでしょう?
「 ⌘(Windwosの場合Ctrl)+ a 」で全て選択しようとするとわかりやすいですね。
スマートフォンの場合もおそらく選択できないはずです。
対応ブラウザ状況
上のサンプルで選択できたよ?という人は、是非ブラウザのアップデートを!
Browser | Version |
---|---|
Chrome | 6 |
Firefox | 2 |
IE | 10 |
Safari | 3.1 |
Opera | 15 |
Android | 2.1 |
iOS | 3.2 |
まとめ
いかがでしたか?
テキストを選択できたほうがユーザーにやさしい場合もありますが、モバイルではよく使われている手法のようです。
ちなみに、::before
や::after
でcontentを追加した場合は選択不可なものになりますので、逆に選択可にしたい場合などはご注意ください。
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事