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

スマートフォンからホームページを見た時、タップターゲットの高さや幅が狭いと間違ってタップされる可能性があります。

本項では、間違ってタップされないようタップターゲットのサイズを調整する方法について説明します。

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

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

 Androidのデザインガイドでは、ターゲットを48px×48px以上にする事を推奨しています。以下は、タップターゲットの高さを48pxにする例です。

【タップターゲットの高さをCSSで定義】
.test {
display:block;
line-height:48px;
}

 これはスマートフォン用のCSSファイルで定義します。

 上記のクラスを<a>タグで使います。

【タップターゲット高さのHTML反映】
<a href="ファイル名" class="test" >ターゲット</a>

 上記で以下のように表示されます。尚、分かり易いように周囲に枠を付けています。

試験

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

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

【ボックスで高さ指定】
.test {
height: 48px;
}
【divへクラス反映】
<div class="test"><a href="ファイル名" >ターゲット</a></div>

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

試験

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

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

横に並べる時

 タップターゲットを横に並べたい時はwidth:30%;等パーセントで指定し、48px未満にならないようにします。又、dislay:block;を指定している場合は、floatを使って回り込ませる必要があります。

 以下はCSSの例です。

【タップターゲットを横に並べるCSS】
.test {
display:block;
line-height:48px;
width:30%;
float:left;
}

 上記のクラスをHTMLに適用します。

【横に並べるクラスを適用したHTML】
<a href="ファイル名1" class="test" >ターゲット1</a>
<a href="ファイル名2" class="test" >ターゲット2</a>
<a href="ファイル名3" class="test" >ターゲット3</a>

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

ターゲット1 ターゲット2 ターゲット3

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

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「スマホとパソコンで表示を変える
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加