HTML
CSS
JavaScript
jQuery

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


注意

以下に記すのは、liタグを使用した例です。

liだけではなく基本何でも行けるかと思います。


ふと思った疑問

<ul>

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

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

でもこれって...

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タグ打つの面倒くさい → 最後のもの

がいいかと思います。