Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@shin1kt

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

More than 3 years have 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%;
}
/* 詳しくはこちら を常にボックスの右下に表示したいとき。。など。 */

こんな感じです。

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

12
Help us understand the problem. What is going on with this article?
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
shin1kt
webまわり php,html,css,javascript laravel,vue.js.jquery,wordpress,cakephp,yii,ec-cube他

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?