タップターゲットのサイズ調整

タップターゲットのサイズ

パソコンは、マウスを使ってリンクをクリックしますが、スマートフォンでは指でタップします。小さい画面を指でタップするため、間違ったターゲットをタップしないよう配慮が必要です。

Androidのデベロッパーガイドでは、ターゲットを48px × 48px以上にすることを推奨しています。以下は、タップターゲットの高さを48pxにするCSSの例です。

.test {
  display: block;
  line-height: 48px;
  border: black solid;
  padding: 0 1em;
}

HTMLは、以下です。

<a href="ファイル名A" class="test">移動先タイトル</a>

上記は、以下のように表示されます。

枠の中でどこをマウスクリック、もしくはタップしてもリンクが有効である事がわかると思います。

ちなみに、divで囲って高さを指定した場合です。

.test {
  height: 48px;
  border: solid;
  padding: 0 1em;
}

HTMLは、以下です。

<div class="test">
<a href="ファイル名">移動先タイトル</a>
</div>

上記は、以下のように表示されます。

枠で囲った高さは48pxになりますが、枠全体が選択範囲ではなく、文字の部分をタップする必要があり、選択しにくくなります。

なお、横幅は指定しなければ画面一杯に表示されます。

横に並べる時

タップターゲットを横に並べたい時は、width:30%;などパーセントで指定し、48px未満にならないようにします。以下は、CSSの例です。

.test {
  display: flex;
  list-style: none;
}

.test li {
  width: 30%;
}

.test a{
  display: block;
  line-height: 48px;
  border: black solid;
  padding: 0 1em;
}

HTMLは、以下です。

<ul class="test">
<li><a href="ファイル名">移動先1</a></li>
<li><a href="ファイル名">移動先2</a></li>
<li><a href="ファイル名">移動先3</a></li>
</ul>

上記は、以下のように表示されます。

• 移動先1
• 移動先2
• 移動先3

1行に3つのリンクが表示され、それぞれの枠の範囲ではどこをタップしても選択範囲になっているのがわかると思います。

補足

タップターゲットのサイズは、W3C(World Wide Web Consortium)では44px × 44px以上が推奨されています。

参考：Understanding Success Criterion 2.5.5: Target Size

Googleでは、48px × 48px以上が推奨されています。

参考：Accessible tap targets

Androidのデベロッパーガイドでは、48dp × 48dp以上が推奨されています。

参考：アプリのユーザー補助機能を強化する

dp(Device-independent Pixel)は、Androidのアプリ開発などで、ディスプレイの解像度によって表示の大きさが変わらないように、1dpであればどの機種でも見た目が同じ大きさになるように考えられた単位です。ブラウザで表示する時に使う、CSSピクセルと考え方は同じです。