【HTML・CSS】カード型UI上に複数のa要素（リンク先）を配置したレイアウト

2023年9月13日

URLをコピーしました！

タイトル通り遷移先が複数あるカード型UIのレイアウトについて勉強しました。

条件は以下の通りです。

カード全体・タイトルクリックで記事詳細へ遷移する
カテゴリクリックで各カテゴリへ遷移

サンプル

HTMLのポイント

重要なコードのみ抜粋して掲載します。

 <ul class="l-grid">
  <li class="c-card">
    <a class="c-card__detail" href="#detail" tabindex="-1">
      <span class="u-visuallyHidden">「さて、羊に戻るとしようか」の意味を知る</span>
    </a>
    <div class="c-card__body">
      <h3 class="c-card__title">
        <a href="#detail">さて、羊に戻るとしようか</a>
      </h3>
      <ul class="c-card__meta">
        <li class="c-card__metaItem">
          <a class="c-link" href="#proverb">
            <span class="u-visuallyHidden">カテゴリ：</span>
            ことわざ
          </a>
        </li>
        <li class="c-card__metaItem">
          <a class="c-link" href="#language">
            <span class="u-visuallyHidden">カテゴリ：</span>
            フランス
          </a>
        </li>
      </ul>
    </div>
    <figure class="c-card__thumbnail">
      <img src="images/sheep.jpg" alt="" />
    </figure>
  </li>
</ul>

a要素のマークアップについて

a要素の中にa要素は配置できないため、以下の3つに分けました↓

.c-cardの直下にカード全体クリック用のa要素
タイトル(h3.c-card__title)の子にa要素
カテゴリリスト（li.c-card__metaItem）の子にa要素

カード全体クリック用のa要素にtabindex=”-1″を指定する理由

今回、Qiitaを参考にしたときにtabindex=”-1″が指定されていました。その理由を自分の解釈で説明しています。正しくない可能性の方が高いです。

カテゴリーページに遷移したいユーザがいる仮定します。カード全体クリック用のa要素がフォーカス可能な状態のままだと、カテゴリーコンテンツに辿り着くまで以下のステップが必要です↓

カード全体クリック用のa要素をフォーカス
タイトルのa要素をフォーカス
カテゴリーのa要素をフォーカス

動画で確認↓

今回の場合、タイトルクリックとカード全体クリック用のa要素の遷移先はどちらも記事詳細へ遷移されます。つまり、どちらか一方がフォーカスできればいいためtabindex="-1"を指定してフォーカスをスキップして操作コストを下げています。

タイトルのa要素をフォーカス
カテゴリーのa要素をフォーカス

動画で確認↓

CSSのポイント

カード全体にa要素の範囲を広げる

カード全体クリック用のa要素をカード全体に広げます↓

.c-card {
  position: relative;
}
.c-card__detail {
  position: absolute;
  inset: 0;
}

z-indexを追加する

カード全体クリック用のa要素が重なり順で一番上になっているため、タイトル用とカテゴリー用のa要素に対してz-indexを追加します↓

.c-card__title {
  z-index: 1;//ルートスタッキングコンテキストで包まれている
}
.c-card__metaItem {
  z-index: 1;//ルートスタッキングコンテキストで包まれている
}

スタッキングコンテキストを確認できる拡張機能↓

参考

Qiita

エンジニアに関する知識を記録・共有するためのサービス – Qiita Qiitaは、エンジニアに関する知識を記録・共有するためのサービスです。プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。