チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

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>

CSS

#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%;
}