Help us understand the problem. What is going on with this article?

【CSS+JS】ボックス全体をリンクさせたいけれどaで囲むのはなんか嫌な場合の対処方法

More than 1 year has passed since last update.

ボックス全体をリンクさせたいんだけど、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%;
}
/* 詳しくはこちら を常にボックスの右下に表示したいとき。。など。 */

こんな感じです。

というわけで、場合に応じて使い分けていただけたらと思います。

shin1kt
webまわり php,html,css,javascript laravel,vue.js.jquery,wordpress,cakephp,yii,ec-cube他
http://www.katacom.jp/a/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした