HTML&CSS クリックエリア

【HTML&CSS】Box全体にaリンクを効かせる方法

2019.10.04 / 2020.11.19

CONTENTS

  1. 1. HTML
  2. 2.CSS

PCサイトなら、「詳しくを見る」部分だけがリンク領域でも問題なさそうですがスマホサイトの場合はBOX全体がリンク領域である必要があります。
そうした場合の対処方法の備忘録。

HTML

<ul>
    <li>
      <h2>タイトル</h2>
      <p>説明文がは入ります。<br>説明文がは入ります。<br>説明文がは入ります。</p>
      <a href="URL"></a>
    </li>
</ul>

CSS

ul li{ position: relative; }
ul li a{ position: absolute; width: 100%; height: 100%; top:0; left: 0; text-indent: 100%;white-space: nowrap;overflow: hidden;}
ul li a:hover{ opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; background: #fff;}
ポイント
  • 親要素にrelativeを指定し、子要素にabsoluteをしてする。

  • widthとheightに100%。topとleftに0

ポイント