div全体をクリックできるようにする

HTML5からはブロック要素・インライン要素の分類はなくなったので、a要素で div や p など、複数の要素を囲むことができます。クリック範囲が広く作れるので、スマートフォン用Webサイトには特におすすめ。注意点として、 その div がクリックできるということをわかりやすくデザインすることが大切です。

●HTML

<a href=”#”>
<div>
<h1>The Latest News</h1>
<p>In dignissim a lacus ac sodales. Vestibulum metus dui, fermentum lobortis leo nec, maximus molestie ligula. Pellentesque porta dui nunc. Morbi venenatis turpis vitae velit laoreet blandit.</p>
<p class=”more”>Learn More &raquo;</p>
</div>
</a>

●CSS

div {
margin: 10px;
border-radius: 5px;
background: #F5F0CF;
padding: 15px;
}
a:hover div {
background: #FFFDDC;
}
a {
text-decoration: none;
}
h1 {
color: #E6AC27;
font-size: 1.5rem;
}
p {
margin-top: 10px;
color: #666;
}
.more {
background: #0bd;
padding: 6px 15px;
color: #fff;
border-radius: 5px;
display: inline-block;
}