ボックス全体にリンクを効かす

以前､簡単に触れた記事を書きましたが､そのおさらいです｡以前の記事はこちら｡

• 浪人のサムライ
  ボックス全体にリンクを張る

完成は下になります｡

• 2025/12/28
• テスト
• link

青色のボックスの上に持って行くと､クリック出来るようになります｡

PCで確認してみてください｡

HTML

<ul class="box">
<li><a href="#"></a></li>
<li>2025/12/28</li>
<li>テスト</li>
<li class="btn">link</li>
</ul>

boxという名前を付けています｡名前は分かりやすいもので問題ありません｡あとはリスト表示しています｡これも絶対ではありません｡必要に応じた､タグを使いましょう｡

SCSS

.box{
background: aqua;
position: relative;
li a{
position: absolute;
inset: 0;
}
.btn{
background: #0067bb;
color: #fff;
display: inline-block;
margin-top: 10px;
padding: 10px;
}
}

boxにposition: relative;を書きます｡起点ですね｡あとは､aに対して､position: absolute;とinset: 0;を書きます｡これでボックスの全体がリンクされるようになります｡

CSS

.box {
  background: aqua;
  position: relative;
}
.box li a {
  position: absolute;
  inset: 0;
}
.box .btn {
  background: #0067bb;
  color: #fff;
  display: inline-block;
  margin-top: 10px;
  padding: 10px;
}

CSSの方が､ややこしい･･･････｡

おまけで

一切触れていない､青色のボタン(btn)｡これはdisplay: inline-blockにしています｡通常､boxの幅に伸びるので､display: inline-blockを使っています｡

似たようなもので､inlineがありますが､マージンやパディングが効かないですね｡経験上ですが｡

そこで､display: inline-blockを使っています｡おまけですので､深い説明は避けます｡とりあえずdisplay: inline-blockをしておけば､要素のみにスタイルをあてることができます｡

さいごに

実はかなり悩みました｡癖がありますね｡ボックス全体にリンクを張る場合は､参考にしてみてください｡