CSS
HTML5

【HTML・CSS】親要素全体にリンクを広げる方法


リンクを親要素全体に拡げる場合

リンクを親要素に拡げる場合は、aタグをblock要素に変更します。


See the Pen
20190417 link_all
by masakazuishimoto (@masakazuishimoto)
on CodePen.

<div class="box_all">

<a href="#">全体リンク</a>
</div>

a {

display: block;
width: 100%;
height: 100%;
}


複数要素があるとリンクが全体にならない

同一の要素内に複数の要素がある場合、親要素全体がリンクになりません。

下の例はa要素以外にspan要素を入れています。


See the Pen
20190417 link_noall
by masakazuishimoto (@masakazuishimoto)
on CodePen.

<!-- HTML -->

<div class="box_all">
<span>子要素</span>
<span>子要素</span>
<a href="#">全体をリンクさせたい</a>
</div>

/* CSS */

.box_all{
height: 100px;
width: 200px;
border: 1px solid #000000;
padding: 5px;
text-align: center;
}

a {
display: block;
width: 100%;
height: 100%;
}


親要素全体にリンクさせる

子要素が複数あるときも、親要素全体をリンクさせます。


See the Pen
20190417 link_all2
by masakazuishimoto (@masakazuishimoto)
on CodePen.

HTMLは内容が同じです。

/* CSS */

.box_all{
height: 100px;
width: 200px;
border: 1px solid #000000;
padding: 5px;
text-align: center;
/* 以下を追加 */
position: relative;
z-index: 1;
}

a {
display: block;
width: 100%;
height: 100%;
/* 以下を追加 */
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

このようにすると、親要素全体にリンクがいくようになりました。