ボックス全体をリンクさせたいんだけど、h1やdivなどをaで囲むのはなんかいやだ。。というとき
<div class="box link-box">
<h2>タイトルや</h2>
<p>内容テキストがあるブロック全体をリンク</p>
<a href="https://qiita.com/">詳しくはこちら</a>
</div>
例えばこういう感じのボックスがあって、ボックス全体をクリック対象としたいとき。
divの代わりにaで囲むのが簡単ですが、それだと一部のCMSなどでは、aタグで、昔ブロック要素と言われていたタグを囲むのが、禁止されている場合とかもあり、うまくいかない場合もあります。（勝手に整形されてしまったりとか・・・）
で、jQueryを使って以下のような方法もあるかな。。と思って。
jQuery(function($) {
$('.link-box').css('cursor','pointer');
$('.link-box').on('click',function () {
window.location.href = $(this).find('a').attr('href');
});
});
これを一つ書いておけば、.link-boxをつけたボックスは、全体がリンク（っぽく）なり、その中にあるaタグで指定しているリンク先にジャンプします。
サンプル
こんな感じです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:30%;
padding:15px;
background-color:#f99;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="box link-box">
<h2>タイトルや</h2>
<p>内容テキストがあるブロック全体をリンク</p>
<a href="https://qiita.com/">詳しくはこちら</a>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
jQuery(function($) {
$('.link-box').css('cursor','pointer');
$('.link-box').on('click',function () {
window.location.href = $(this).find('a').attr('href');
});
});
</script>
CSSだけで実装する方法との比較
コメント欄にてCSSだけで実装する方法をご提案いただきましたので比較してみました。
CSSだけで実装する方法
（コメント欄参照）
こちらの方法の良いところは
- JSを使わなくてよい
- ボックスにマウスオーバーしたときにステータスバーにURLがちゃんと表示される
- aタグをクリックしてのリンクになるので、aのクリックをトリガーとしたJSなどとの相性も良い。
というあたりかと思います。
個人的にはステータスバーにリンク先がちゃんと表示されるのはメリット大きいと感じました。
JSを使って実装する方法
（上記で紹介させていただいた方法）
こちらの良いところは
- ボックスが複雑なレイアウトでも対応可能
- jQueryなのでプラグイン的に利用できる。
というところだと思います。
とくにレイアウト的な部分に関しては、CSSだけでの実装方法だと、.boxとaの間にpositionを設定した要素があるとボックス全体がリンク対象にならない場合もありそうです。
例えば、下記のような場合です。
.box {
width:30%;
height:150px;
padding:15px;
background-color:#f99;
border:1px solid #000;
position:relative;
}
a {
display:block;
position:absolute;
bottom:0px;
right:0px;
}
a::after {
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* 詳しくはこちら を常にボックスの右下に表示したいとき。。など。 */
こんな感じです。
というわけで、場合に応じて使い分けていただけたらと思います。