こんにちは。
本日はテキストや画像を選択不可にする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オーナー深沢さんの仕事
