KumaTechLab
2020-11-08/2023-05-23

リンク上にリンクを重ねたいときの対処法

リンク上にリンクを重ねたいときの対処法

htmlでリンク上にリンクを置きたい場合、コード的には「aタグ」内に「aタグ」を配置したい場合の対処方法を紹介します。

対処のアプローチとしては「htmlの構造を変更する方法」と「jsで解決する方法」の二通り紹介します。

以下をデフォルトの形とします。

「エリア」や「特徴」にリンクにしてアーカイブページに移動させる想定です。

しかし、カード全体にリンクがかかっているため、ブラウザで表示した場合にはうまく表示されません。(HTMLエラーのため自動で補正されます。)

これを、修正していきます。

htmlの構造を変更する方法

htmlの構造を変更する方法を紹介します。

現在全体を覆っている「aタグ」を除去します。

そして、「エリア」「特徴」の「spanタグ」をリンクにします。

<div class="card">
    ...
  <div class="card__meta">
    <div class="area">
      <span class="area__title">エリア：</span>
      <a href="#" class="area__info">中東</a>
    </div>
    <div class="feature">
      <span class="feature__title">特長：</span>
      <a href="#" class="feature__info">酸味</a>
    </div>
  </div>
    ...
  </div>

このようになり、「エリア」「特徴」をリンクとすることができます。

しかし、このままではカード全体のリンクがない状態です。

それを以下のようにして解決します。これが完成形です。

変更点としては以下です。

<div class="card__body">
      <h3 class="card__title"><a href="#"  class="card__title-link">エチオピア</a></h3>
 </div>
.card {
  position: relative;
  
  a {
    position: relative;
    z-index: 1;
  }
}


.card__title-link {
  position: static !important;
  
  &::before {
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 0;
  }
}

まずカード全体、カード内リンクを「position:relative」とし、カード内リンクの「z-index」を指定しています。

これは、後述でリンクを全体にかけるために「position:absolute」を指定するために、使用します。

また、全体リンクと「エリア」「特徴」のリンクに重なり順序を指定しています。

次にHTML側でタイトル部分にリンクを付与しています。

さらにこのタイトル部分のリンクに対して疑似要素を指定することで、全体リンクとしています。

リンク自体には「position: static」としています。これは先ほどリンクを「position:relateive」にしているため疑似要素にabsoluteを指定しても、タイトル部分にしか適応されなくなってしまいます。そのためわざわざ「static」を指定しています。

疑似要素では「position: absolute」を指定し、「top」「right」「bottom」「left」をすべて0にすることでカード全体の範囲とすることができます。

また、重なり順は「エリア」「特徴」の下になるように小さい数字としています。

今回はタイトルにリンクを入れて疑似要素を作成しました。

ただ、実際はタイトルにアイコンや下線などの疑似要素を入れている場合もあると思います。

その場合は抜粋など他の要素で行っても問題ありません。

JSで解決する方法

次にJSで解決する方法を紹介します。

まず、デフォルトの状態から少しだけHTMLを編集します。

<div class="card__meta">
    <div class="area">
      <span class="area__title">エリア：</span>
      <span class="area__info" data-href="https://example.com">中東</span>
    </div>
    <div class="feature">
      <span class="feature__title">特長：</span>
      <span class="feature__info" data-href="#feature">酸味</span>
    </div>
  </div>

独自プロパティとして「data-href」というものを付与しています。わかりやすように「data-href」にしましたが、名前は好きなようにしてください。

そのプロパティに「移動先のURL」を指定しています。

JS部分では「data-href」内のURLにアクセスさせるよう記述します。

$('a span[data-href]').click(function(e) {
        e.preventDefault();
        e.stopPropagation(); 
        location.href = $(this).attr('data-href');
  });

こちらが完成形です。

今回一番簡単なクリック時の挙動で操作しました。

その他にもホバー時にカードのURLを「data-href」の中身に変更するなど方法もあります。こちらの場合遷移先URLが明示的なのでユーザーに優しいです。

まとめ

JSの方が簡単なので、JSを嫌わないのであればJSで良いと思います。

HTML内で済ませたい場合は疑似要素、全体要素に対してのCSSが必要になるため実装可能化あらかじめ検討しましょう。

2020 KumaTechLab.