【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を追加した場合は選択不可なものになりますので、逆に選択可にしたい場合などはご注意ください。

フォローして続編をチェック

@universionsをフォロー