要素全体をリンクにする方法

注意

以下に記すのは、liタグを使用した例です。
liだけではなく基本何でも行けるかと思います。

ふと思った疑問

<ul>
    <li><a href="#">Link</a></li>
</ul>

HTMLでこう打ったら、以下のような実行結果になることはお察しの通り。

• aaa

でもこれって...
Aタグの部分だけしか反応しないのでは？

いつ役立つ？

例えば、CSSを以下のように指定している場合。

ul{
    width: 100%;
}

このとき、リスト(li)は画面の横幅いっぱいに表示されるが、リンク(a)はその幅のみになる。
そのため、リストをクリック(orタップ)したときにページ移動しない！

HTML Onlyでリンクにする

HTMLだけの場合は

<a href="#"><li>Link</li></a>

といった具合にaタグとliタグを逆にすればliタグ全体がリンクになる。

追記：ul配下に許可されるのはliだけのようなので、
li a{display:block;} とCSSで記述すればいいそうです。
@T_sa さん、ありがとうございます。

JavaScriptも使う

JavaScriptを使う場合、aタグがなくても可能になるので、
まずaタグを使用する場合を説明しますね。

// 全li取得
let lists = document.querySelectorAll('li');
for(let i=0;i<lists.length;i++){
    // 全liそれぞれに対する「クリックされたとき」の処理
    lists[i].addEventListener('click',function(){
        // クリックされたliの子要素 aタグのリンク先を取得
        let href = this.querySelector('a').getAttribute('href');
        // 現在のタブで開く
        location.href = href;
        // 新しいタブで開く
        // window.open(href);
    });

jQueryを使うと

$('li').click(function(){
    let href = $(this).children('a').attr('href');
    location.href = href;
    // window.open(href);
});

となります

aタグ不使用の例

HTML

<li href="#">aaa</li>

JS

// liのうち、href属性が指定されているものを取得
$('li[href]').click(function(){
    let href = $(this).attr('href');
    location.href = href;
    // window.open(href);
});

ちなみに属性が指定されていないとundefinedになりますのでそれで判別してもいいかも...
ただ行が長くなるのか...

追記：あと、この方法だとGoogleなどのクローラーがリンクを踏んでくれません
@mikkame さん、指摘ありがとうございます。

使い分け

私は一番最後の、aタグを使わないものを使用しているのですが

• JS使いたくない → 最初のもの
• <li><a href="#">Link</a></li>を変えたくない → 真ん中のもの
• aタグ打つの面倒くさい → 最後のもの

がいいかと思います。