iOS向け CSS Tips

公開日: 2019/08/15

カテゴリ: CSS

iOSでWebページを閲覧したとき、なるべく独自のスタイルにならないようにしたり、ストレスなく操作できるようにしたりするためのCSS Tipsを置いておきます。

リンクのハイライトを消す

初期状態では、動的なオブジェクト(リンクやフォームなど)をタップしたときにグレーでハイライトされます。このハイライトを消す(見えなくする)方法です。

下記のコードでは、<a> <input> <textarea> <button> [tabindex]に指定していますので、必要に応じてカスタマイズしてください。

a, input, textarea, button, [tabindex] {
    -webkit-tap-highlight-color: transparent;
}

スムーススクロールさせる

初期状態では、overflow: auto;もしくはoverflow: scroll;などでスクロール可能にした要素は、スムーズにスクロールされません。これをスムーズにスクロールさせる方法です。

(いつぞやのiOSのアップデートで、<body>要素は自動的にスムーススクロールされるようになりました。)

下記のコードでは、例として.scrollクラスに適用させています。

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

ダブルタップでのズームを無効化する

初期状態では、ダブルタップ時にダブルタップした要素のサイズにズームされます。これを無効化し、ズーム操作はピンチのみにする方法です。

余談ですが、この方法は元々はリンクなどをタップしたときに遅延が発生していたものを解消するために使われていました。最近のiOSではこのプロパティを指定しなくても遅延は発生しなくなった模様です(詳しく検証しているわけではないので、筆者の勘違いの可能性もありますが…)。

body {
    touch-action: manipulation;
}

テキスト入力エリアの影を消す

初期状態では、テキスト入力エリアにはブラウザ独自のスタイルが適用されており、システムOSに合わせてテキスト入力エリアに影が入っていたりします。これを無効化し、システムに依存しないスタイルを適用させる方法です。

副作用として、そのフォームに付随する機能も無効化されます。この副作用はiOSではあまり影響ありませんが、PCで閲覧すると顕著に現れます。例えば、type="search"に適用すると、テキストをすべて削除するxボタンが消えます。type="number"に適用すると入力欄右端にある上下の三角ボタンが消えます。本環境に適用する場合にはご注意ください。

input[type="text"], textarea {
    -webkit-appearance: none;
}

テキストを選択不可にする

Webページのテキストを長押ししていると、そのまま選択状態に移行します。しかし、サイトのタイトルロゴ、SNSボタン、アイコンなどユーザが選択する必要がまったく無い要素も選択できてしまいます。これを制御する方法です。

ただし、これを本文に適用するとコピーや単語検索ができなくなり著しくWebサイトが使いにくくなるためご注意ください。

ちなみに初期状態では、<button>要素は選択可能になっています(input要素ではボタンに表示されるテキストはvalue属性が使われるため関係ありません)。下記のコードでは<button>要素内の文字列を選択できないようにしています。

button {
    user-select: none;
}

2019/08/15