メインコンテンツへスキップ

伸長リンク(Stretched link)

CSSを使用して入れ子になったリンクを「伸長する」ことによって、HTML要素またはBootstrapコンポーネントをクリック可能にする。

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

同一要素内の複数のリンクとタップのターゲットは、伸長リンクでは推奨しない。もし、これが必要な場合は、数個の positionz-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>
【設定】
  • .card 内のリンク(<a>)に .stretched-link を入れるとカードのどこからでもクリック可能になる

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

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

見本
プレースホルダ128x128
伸長リンク付きカスタムコンポーネント

これは、カスタムコンポーネントのプレースホルダコンテンツ。これは、実際のコンテンツがどのように見えるかを模倣することを目的としており、ここでは、コンポーネントに少しボディとサイズを与えるために使用している。

リンク
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>
【設定】
  • .d-flex などのコンポーネント内のリンク(<a>)に .stretched-link を入れて .d-flex.position-relative を追加すると、.d-flex 内のどこからでもクリック可能になる
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .mr-3.me-3

グリッドの場合 v5.0.0-beta1設定変更

見本
プレースホルダ256x256
伸長リンク付きのグリッド列

もう一つのカスタムコンポーネントのプレースホルダコンテンツの別の実例。これは、実際のコンテンツがどのように見えるかを模倣することを目的としており、ここでは、コンポーネントに少しボディとサイズを与えるために使用している。

リンク
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row g-0 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 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>
【設定】
  • .col-* 内のリンク(<a>)に .stretched-link を入れて .row 内のどこからでもクリック可能にしたい場合は、.row.position-relative を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • .row.no-gutters.row.g-0ガタークラスの名称変更)
    • .col-*.position-static は不要に
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .pl(-{breakpoint})-*.ps(-{breakpoint})-*

 

包含ブロックの識別(Identifying the containing block)

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

  • position の値が static 以外(relative, absolute, fixed, sticky)の場合
  • transformperspective の値が none 以外の場合
  • will-change の値が transformperspective の場合
  • filter の値が none 以外、または will-change の値が filter の場合(Firefoxのみで動作)
見本
プレースホルダカードの画像
伸長リンク付きカード

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

リンクに position: relative が追加されているため、ここでは伸長リンクは機能しない

この伸長リンクは、transform が適用されているため、p タグ内でのみ機能する。

設定例
<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>
【注意】
  • 包含ブロックの要素内のリンクに .stretched-link を追加しても機能しない

 

Sass v5.1.0追加

デフォルトの設定
scss/_variables.scss 内 の設定$stretched-link-pseudo-element:           after;
$stretched-link-z-index:                  1;
scss/helpers/_stretched-link.scss の設定.stretched-link {
  &::#{$stretched-link-pseudo-element} {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $stretched-link-z-index;
    content: "";
  }
}