【CSS】Webアプリ化するときに有効！テキストや画像を選択不可するCSS Tips

こんにちは。
本日はテキストや画像を選択不可にする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

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。