aタグの範囲を拡大させてスマホでもタップしやすいようにする方法

aタグでリンクを設置すると通常はテキストのみがリンクとして機能します。しかし、スマートフォンが主流になったいま、テキストにしかリンク機能がないとタップできる範囲が小さすぎてタップしづらいなんてことが起こります。
UIはユーザー満足度にも大きく寄与しますので、こういった些細な問題点はきちんと対応していく必要があります。

この記事では、サイドバーなどでよくつかわれるリスト形式のメニューなどで文字以外の場所をタップしてもリンクとして反応させるための方法を書いています。

なぜ、aタグは文字しかリンクとして機能しないのか

要素には、おおきくわけてブロック要素とインライン要素があります。リンクをつくるためのaタグは、インライン要素です。
このインライン要素はmozilla のドキュメントにはこうあります。

HTMLにおいて、インライン要素はコンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有します。

簡単にいうと、テキスト部分のみが有効範囲ですよということです。

<ul>
	<li><a href="/">メニュー</a></li>
	<li><a href="/">メニュー</a></li>
	<li><a href="/">メニュー</a></li>
	<li><a href="/">メニュー</a></li>
	<li><a href="/">メニュー</a></li>
</ul>

このような場合、aタグで有効範囲は「リスト」という文字だけですので、当然ながら、リンクが効くタップは文字部分しかありません。
このタップ可能な範囲をliの範囲に広げることで、タップしやすくなりUIが向上します。

書き方

こんな感じで書いてあげます。

<style>
	li {
		position: relative;
		width: 300px;
		height: 50px;
	}
	a {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>
<ul>
	<li><a href="#">メニュー</a></li>
	<li><a href="#">メニュー</a></li>
	<li><a href="#">メニュー</a></li>
	<li><a href="#">メニュー</a></li>
	<li><a href="#">メニュー</a></li>
</ul>

では、ひとつずつ解説していきます。

a タグの親要素にあたるli タグにposition: relative; をつけてあげます。width: 300px; とheight: 50px; のサイズは任意です。
今度は、a タグにdisplay: block; で、まず、インライン要素をブロック要素にします。それにposition: absolute; をつけてあげます。すると、position: relative; のある親要素のなかで相対的に位置を決定できるようになりますので、top: 0; とleft:0; で左上に開始位置をあわせています。
最後に、width: 100%; とheight: 100%; で親要素の300pxと50pxにサイズを揃えてあげるだけです。