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

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

注意

以下に記すのは、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タグ打つの面倒くさい → 最後のもの

がいいかと思います。