スマホ向け Web アプリを作る時に使える CSS : user-select と -webkit-touch-callout
以前、overflow-scrolling という CSS プロパティを紹介した。スマホで慣性スクロールを有効にするためのプロパティだ。
今回はその他にスマホ向け Web アプリを構築する際に使えそうな CSS を2つ紹介する。
user-select: none
user-select: none というプロパティは、テキストの選択を禁止することができる。テキストを長押ししても、文字列を選択状態にできなくなる。
これはスマホに限らないので、PC サイトでも「特定の文字列だけ選択させたい (それ以外の文字列を選択・コピーさせたくない)」といった時に気軽に使うことができる。ベンダプレフィックスもあるので以下のサイトを確認してみてほしい。
- 参考 : 【CSS】Webアプリ化するときに有効！テキストや画像を選択不可するCSS Tips | unitopi - ユニトピ -
- 参考 : CSSのuser-select:noneの挙動はブラウザによって異なる | iwb.jp
- 参考 : user-selectで要素のテキスト選択を「させる」 - Qiita
-webkit-touch-callout: none
-webkit-touch-callout: none は、リンクや画像を長押しした時に、「新規タブで開く」だとか「画像を保存する」とかいったメニューを表示させないようにするもの。
この辺の操作ができてしまうと普通の Web ページ感が拭えないので、Web アプリ感を出すために入れておきたい。
この2つのプロパティを適用すると、テキストや画像を操作できなくするので、スマホアプリっぽい Web ページを作れるようになるだろう。