--- title: 【CSS+JS】ボックス全体をリンクさせたいけれどaで囲むのはなんか嫌な場合の対処方法 tags: CSS jQuery HTML author: shin1kt slide: false --- # ボックス全体をリンクさせたいんだけど、h1やdivなどをaで囲むのはなんかいやだ。。というとき ```html ``` 例えばこういう感じのボックスがあって、ボックス全体をクリック対象としたいとき。 divの代わりにaで囲むのが簡単ですが、それだと一部のCMSなどでは、aタグで、昔ブロック要素と言われていたタグを囲むのが、禁止されている場合とかもあり、うまくいかない場合もあります。(勝手に整形されてしまったりとか・・・) で、jQueryを使って以下のような方法もあるかな。。と思って。 ```js jQuery(function($) { $('.link-box').css('cursor','pointer'); $('.link-box').on('click',function () { window.location.href = $(this).find('a').attr('href'); }); }); ``` これを一つ書いておけば、`.link-box`をつけたボックスは、全体がリンク(っぽく)なり、その中にあるaタグで指定しているリンク先にジャンプします。 ## サンプル こんな感じです。 ```html:index.html Document ``` ## CSSだけで実装する方法との比較 コメント欄にてCSSだけで実装する方法をご提案いただきましたので比較してみました。 ### CSSだけで実装する方法 (コメント欄参照) こちらの方法の良いところは - JSを使わなくてよい - ボックスにマウスオーバーしたときにステータスバーにURLがちゃんと表示される - aタグをクリックしてのリンクになるので、aのクリックをトリガーとしたJSなどとの相性も良い。 というあたりかと思います。 個人的にはステータスバーにリンク先がちゃんと表示されるのはメリット大きいと感じました。 ### JSを使って実装する方法 (上記で紹介させていただいた方法) こちらの良いところは - ボックスが複雑なレイアウトでも対応可能 - jQueryなのでプラグイン的に利用できる。 というところだと思います。 とくにレイアウト的な部分に関しては、CSSだけでの実装方法だと、.boxとaの間にpositionを設定した要素があるとボックス全体がリンク対象にならない場合もありそうです。 例えば、下記のような場合です。 ```css .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%; } /* 詳しくはこちら を常にボックスの右下に表示したいとき。。など。 */ ``` こんな感じです。 というわけで、場合に応じて使い分けていただけたらと思います。