jiichan.com

PROGRAMMING

CSS
javascript
PHP
Java

ブロックレベル要素全体をリンクにする

ボックス全体をリンクにしたいと思い、DIV全体をaタグで囲んでみた。
特に機能上は問題が無かったのですが、これではブロックレベル要素をインライン要素で囲んでいることになります。
インライン要素はブロックレベル要素をその子孫要素として持つことができない（らしい）ので、ググッて見たところ、 なるほどと思ったサイトがいくつかあったのでメモッておく。

HTMLとCSSのポイント

ググッたよそ様のサイトのポイントは次とおり。 1. リンクを張りたいブロックレベル要素内のどこかにaタグを置く。 2. 親要素であるブロックレベル要素をposition:relativeで相対配置に。 3. 子要素であるaタグをdispley:blockでブロックレベル要素にし、 4. さらにposition:absoluteで絶対配置にして、親要素と同じ大きさに広げる。 そこで、このとおりにCSSを書き直してモヤモヤがスッキリしました。 

<div class="linkBox">
	<a href="http://linkSite/"></a>
	<div class="image"><img src="./image/hoge.png"></div>
	<p>ブロックレベル要素全体をリンクにする</p>
</div>


.linkBox {
	position: relative;
	width: 300px;
	height: 70px;
	margin: 15px auto;
}
.linkBox a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

どうして皆さんはすぐ気がつくのだろう。うらやましい。