ボックス全体をリンクにしたい→HTML5ならaタグでdivを囲めます

親要素(div)全体をリンクにしたい

今日はボックス内のリンクを親要素(div)全体に広げる方法についてご紹介します。完成イメージはこんな感じ。

DEMO(完成イメージ)

ボックス内のどこでもクリックできます。
※Yahoo! JAPANにジャンプします

かつての実装方法

上記のようなボックスリンクを実装する時、かつては下記のようにCSSで指定するのが一般的でした。(要所以外は省いてます)

.box {
    width: 100%;
}

.box a {
    display: block;
    width: 100%;
    height: 100%;
}

ボックス内のリンクを全体に広げるわけですね。

でももっとシンプルに実装できますよ。そう、HTML5ならね。

HTML5ならaタグでdivを囲める

HTML5ではボックスそのものをaタグで囲めるんです。こんな感じ。

<a href="https://www.yahoo.co.jp/">
<div class="box">
<img src="https://olmarde.com/wp-content/uploads/2020/01/eyecatch_html.jpg" />
ボックス全体がリンクになるよ。余白の部分も含めて親要素内のどこでもクリックできます。※Yahoo! JAPANにジャンプします
</div>
</a>

これってHTML5以前からコーディングやってた人には違和感ありますよね。でも大丈夫。

HTML5ではブロックレベル要素という概念がなくなった

HTML5ではブロックレベル要素という概念がなくなり、DIVやP、ul liをリンクで囲むことが可能になっています。

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>～</a>で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。

<a> - HTML5タグリファレンス

なので以前のようにCSSでリンク範囲を広げるような指定は必要なくなったんですね。シンプルイズベスト。すばらしい。

リンク範囲が小さいとユーザビリティを損なうので、こういった実装をするケースは多いですよね。

引き続き、web制作に役立つ小ネタをご紹介していきたいと思います。