Carpe Diem

備忘録。https://github.com/jun06t

ブロックレベル要素にリンクをつける

HTML5からはdiv要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいようになりました。 それによって、より使いやすいWebページが作成できるようになります。 イメージとしてはこんなサイトです。ここは今回使用するJavaScriptで実装をしていますが。 Demo ◆実装方法 実装の仕方としては、単純にaタグの中にブロックレベル要素を入れます。 <a href="http://www.yahoo.co.jp/">     <div>     <p> foo </p>     <p> bar </p>     </div> <a> ◆問題点 しかしこの手法は、ブロックの中に別のリンクがある場合は使用できないです。 <a href="http://www.yahoo.co.jp/">     <div>     <p> foo </p>     <a href="https://www.google.co.jp/">Google</a>     <p> bar </p>     </div> <a> だと構文エラーになり、最初のリンクしか使えません。マウスを乗せると他のリンクもリンク先を確認できますが、クリック先は最初のリンクのみになります。 ◆解決方法 ブロックにもリンクをつけ、中のリンクも生きたままに出来る方法がありましたのでご紹介を。 jQuery plugin Biggerlink を用います。 まずはそれぞれのJavaScriptファイルをダウンロードしてHTMLソースに書き込みます。 jQuery Biggerlink 書き方はこんな感じです。適宜自分のサイトに合わせてパスを変更してください。 <script type="text/javascript"src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.biggerlink.js"></script> ◆使用方法 各.jsファイルをロードできるようにしたら、関数を定義します。以下の様にします。 <script type="text/javascript">     $('.links li').biggerlink(); </script> これによって <ul class="links">     <li><a href="http://www.fusion.com.au/">Fusion</a></li>     <li><a href="http://jquery.com/">jQuery</a></li>     <li><a href="http://www.google.com.au/">Google</a></li> </ul> のブロック要素が、文字の部分だけでなくブロックでリンク付けできるようになります。divなら <script type="text/javascript">     $('.links div').biggerlink(); </script> <div class="links">     <div><a href="http://www.fusion.com.au/">Fusion</a></div>     <div><a href="http://jquery.com/">jQuery</a></div>     <div><a href="http://www.google.com.au/">Google</a></div> </div> という感じですね。 複数リンクのブロックに 関数にはオプションを付けることが可能で、その1つが今回の「ブロックの中に複数リンクがあっても使える」手法です。 <script type="text/javascript">     $('.links li').biggerlink({otherstriggermaster:false}); </script> とすると <ul class="links">     <li>         <h3><a href="http://www.fusion.com.au/">Fusion</a></h3>         <p>Where Ollie works in Adelaide <a href="http://www.google.com/search?q=fusion">Google search</a></p>     </li>     <li>         <h3><a href="http://jquery.com/">jQuery</a></h3>         <p>The write less, do more, JavaScript library <a href="http://www.google.com/search?q=jquery">Google search</a></p>     </li>     <li>         <h3><a href="http://www.google.com.au/">Google</a></h3>         <p>Find out more about everything <a href="http://www.google.com/search?q=everything">Google search</a></p>     </li> </ul> のように複数リンクがある場合でも、最初のリンクだけブロック全体にし、残りのリンクはそのまま生きたまま使えるようになります。 ソース: HTML5では、div要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいんです。 Biggerlink – jQuery plugin div要素もリンクにするjavascript「jquery.biggerlink」