カード型リンクでカード内に複数のリンクがあるときにリンクハイライトを綺麗に設定する

リンクをカード型デザインしているとカード内にリンクが複数あることが多々ある。
パソコンでは:hoverで適当に実装できるが、スマホだとリンクのハイライトが綺麗に実装されない。

ので、リンクハイライトが綺麗に実装できる方法を記載します🥳

カード型のレイアウトをつくる

<a href="記事に飛ぶ" class="card">
  <a href="記事に飛ぶ">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ">Name</a>
</a>

見た目はこんな感じで実装したい

リンクを機能させる

上記のコードだとユーザー情報へのリンクが機能しなくなるので、

<div class="card">
  <a href="記事に飛ぶ">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ">Name</a>
</div>

こんな感じのコードにする。
これで、記事情報とユーザー情報のどちらのリンクも機能する。
しかし、一番最初に記載した通り、ハイライトが綺麗に実装されない。

ハイライトはこんな感じでつく
くそブサイク

ハイライトを全体につける

全体につけるのであればカード全体をリンクとして扱う必要がある。

<div class="card">
<a href="記事に飛ぶ" class="card-link"></a>
  <a href="記事に飛ぶ">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ">Name</a>
</div>

a {
  -webkit-tap-highlight-color: transparent; /* ここで一旦ハイライトを全部なくす */
}
.card {
  position: relative;
}
.card-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  -webkit-tap-highlight-color: rgba(77, 200, 220, .24);
}

これでカード全体にリンクのハイライトがかかるようになった

z-indexでリンクのz位置を調整する

上記のままだと結局記事ページにしか飛ぶことができないので、z位置を調整してうまくリンクが配置されるようにする

わかりやすくクラス名をつけます

<div class="card">
<a href="記事に飛ぶ" class="card-link"></a>
  <a href="記事に飛ぶ" class="article-link">
    <img src="thumbnail.png" src="thumbnail">
    <h1>Title</h1>
    <p>Paragraph</p>
  </a>
  <a href="ユーザー情報に飛ぶ" class="user-link">Name</a>
</div>

a {
  -webkit-tap-highlight-color: transparent; /* ここで一旦ハイライトを全部なくす */
}
.card {
  position: relative;
}
.card-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(77, 200, 220, .24); /* ここだけハイライトをつける */
}
.article-link {
  pointer-events: none;
  z-index: 3;
}
.user-link {
  z-index: 4;
}

図にするとこんな感じ

article-linkをタップするとpointer-events: none;だから、下のレイヤーにあるcard-linkがタップされたことになり、記事に飛ぶ
user-linkをタップすると一番上のレイヤーにあるから、そのままユーザー情報へ飛ぶ

ハイライトはcard-linkだけにつけてるから、user-linkをタップしても変にハイライトされない。

article-linkはdivでええやんって思うかもですが、pointer-events: none;が正しく動作しない場合などの保険にaにしています。
今はそう思ってるだけで多分そのうち設計方法は変えると思うのでこれが正ではないです。

あくまで、レイヤー構造を変更して、スマホのリンクのハイライトがうまく活用できる方法のひとつとして捉えてください。