伸長リンク（Stretched link）

リンクに .stretched-link を追加して、::after 擬似要素を経由して包含ブロックをクリック可能にする。ほとんどの場合、これは position: relative（相対位置）を持つ要素が .stretched-link クラスとのリンクを含めることで実現できる。CSSの位置がどのように機能するかを考えると、.stretched-link はほとんどのテーブル要素と混在させることはできないので注意（※裏技として掲載していたテーブルの場合の解説はv5.0.0-beta2で削除）。

同一要素内の複数のリンクとタップのターゲットは、伸長リンクでは推奨しない。もし、これが必要な場合は、数個の position と z-index のスタイルを付ける必要がある。

実例（Examples）

カードの場合

Bootstrapのカードはデフォルトで position: relative なので、.stretched-link クラスは他のHTMLを変更せずに安全にカードのリンクに追加できる。

見本

設定例

<div class="card" style="width: 18rem;">
  <img src="..." alt="カード画像の説明" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">伸長リンク付きカード</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
    <a href="#" class="btn btn-primary stretched-link">リンクボタン</a>
  </div>
</div>

カスタムコンポーネントの場合 v5.0.0-beta1設定変更

ほとんどのカスタムコンポーネントはデフォルトで position: relative ではないので、リンクが親要素の外側に伸びないように .position-relative を追加する必要がある。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="d-flex position-relative">
  <img src="..." alt="..." class="flex-shrink-0 me-3">
  <div>
    <h5 class="mt-0">伸長リンク付きカスタムコンポーネント</h5>
    <p>これは、カスタムコンポーネントのプレースホルダコンテンツ。...</p>
    <a href="#" class="stretched-link">リンク</a>
  </div>
</div>

グリッドの場合 v5.3.0設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="row g-0 bg-body-secondary position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." alt="..." class="w-100">
  </div>
  <div class="col-md-6 p-4 ps-md-0">
    <h5 class="mt-0">伸長リンク付きのグリッド列</h5>
    <p>もう一つのカスタムコンポーネントのプレースホルダコンテンツの別の実例。...</p>
    <a href="#" class="stretched-link">リンク</a>
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." alt="..." class="w-100">
  </div>
  <div class="col-md-6 position-static p-4 pl-md-0">
    <h5 class="mt-0">伸長リンク付きのグリッド列</h5>
    <p>もう一つのカスタムコンポーネントのプレースホルダコンテンツの別の実例。...</p>
    <a href="#" class="stretched-link">リンク</a>
  </div>
</div>

包含ブロックの識別（Identifying the containing block）

伸長リンクが機能していないように見える場合、包含ブロックが原因である可能性がある。以下のcssプロパティは要素を包含ブロックにする：

• position の値が static 以外（relative, absolute, fixed, sticky）の場合
• transform や perspective の値が none 以外の場合
• will-change の値が transform か perspective の場合
• filter の値が none 以外、または will-change の値が filter の場合（Firefoxのみで動作）

見本

設定例

<div class="card" style="width: 18rem;">
  <img src="..." alt="カード画像の説明" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">伸長リンク付きカード</h5>
    <p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
    <p class="card-text">
      <a href="#card-link-1" class="stretched-link text-danger" style="position: relative;">リンクに <code>position: relative</code> が追加されているため、ここでは伸長リンクは機能しない</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      この<a href="#card-unclickable-link" class="text-warning stretched-link">伸長リンク</a>は、<code>transform</code> が適用されているため、<code>p</code> タグ内でのみ機能する。</p>
  </div>
</div>

CSS v5.1.0追加、v5.2.0Sassから名称変更

Sass変数（Sass variables）

デフォルトの設定

scss/_variables.scss 内 の設定$stretched-link-pseudo-element:           after;
$stretched-link-z-index:                  1;