リンクをブロック要素にしてクリック・タップできる範囲をひろげて押しやすくする

aタグで記述するリンクの範囲は通常そのテキストのサイズや長さに依存します。
スマホに限らず短いテキストリンクだとクリック・タップしにくいですよね。リンクはぜひ押してもらいたいので改善したいところ。
今回はCSSでリンクの範囲をひろげる方法を紹介します。

aタグをブロック要素にする

See the Pen リンクの範囲を広げる by ManabuYasuda (@gaku) on CodePen.

上記のサンプルに2つリストがあります。上のリストは通常通りテキストリンクがクリック可能な範囲（グレー）になります。
下のリストはクリック可能な範囲（グレー）がひろがっているのが分かると思います。スマホの場合はタップ、パソコンの場合はホバーしてもらうと背景がホワイトに変わるので試してみてください。（クリックした場合は[RERUN]で元に戻ります）

上のサンプルではCSSに色々と指定していますが必要なのは、任意のclassを付けてそれにdisplay: block;を指定してあげるだけです。

aタグは通常インライン要素です。インライン要素は幅と高さが無効になっているためテキストの範囲だけがリンクの範囲になります。
これをブロック要素に指定すると幅と高さが有効になり範囲がひろがります。（詳しい理屈は分かりませんが…）ブロック要素になると改行されてしまうのでclassを使って範囲を絞って適応させましょう。

---

これに背景と幅と高さを指定してあげると簡易的ですがリンクをボタンにすることもできます。よくありますよね。
画像やアイコンフォントなどと続けて使うと改行されてうまくいかないんですが、テキストリンクには有効なCSSです。