CSSでdiv全体をリンクにする方法
久々の投稿;;
CSSの覚え書きー!
リンクつけたいからaタグ使うけど、ブロック要素全体にリンクをつけたいときはどうするか??
div要素をaタグで囲むのはだめっ
aタグはインライン要素だから中にブロック要素は書けない…
そんなときは、CSSでできるというのを今更知った~
http://d.hatena.ne.jp/atu_web/20120412/1334250031
ここを参考にさせていただきましたー!
ググったらこのやり方は結構でてきましたね、常識でしたか……知らなかった…;;
- a要素をブロック要素にする
- a要素をdivと重ねるために、divを相対配置、a要素を絶対配置でdivが基準になるように位置を指定
- IE7とかIE8に対応させるなら、背景を指定しないとリンクにならないので適当にカラーを指定して透明にする
してやるんですね~へぇ~
やってみた
HTML
<div id ="linkArea"> <a href="http://chooringo.hatenablog.com/"></a> <div><img class="image" src="chocopai.png"></div> <div class="text">チョコパイ大好き!最近はパイの実も好き!</div> </div>
#linkArea{ position: relative; width: 200px; height: 230px; border-color: #999999; border-style: dotted; } #linkArea a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }