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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

伸長リンク(Stretched link) v4.3.0新設

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

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

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

実例(Examples)

カードの場合

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

見本
プレースホルダカードの画像
伸長リンク付きカード

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

リンクボタン
設定例
<div class="card" style="width: 18rem;">
	<img src="..." class="card-img-top" alt="カード画像の説明">
	<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 を入れるとカードのどこからでもクリック可能になる

メディアオブジェクトの場合

メディアオブジェクトはデフォルトで position: relative; ではないので、リンクがメディアオブジェクトの外側に伸びないように .position-relative を追加する必要がある。

見本
プレースホルダ128x128
伸長リンク付きメディア

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

リンク
設定例
<div class="media position-relative">
	<img src="..." class="mr-3" alt="...">
	<div class="media-body">
		<h5 class="mt-0">伸長リンク付きメディア</h5>
		<p>これは、メディアオブジェクトのプレースホルダーコンテンツ。...</p>
		<a href="#" class="stretched-link">リンク</a>
	</div>
</div>

【設定】

  • .media 内のリンク(<a>)に .stretched-link を入れて .media.position-relative を追加すると、メディアのどこからでもクリック可能になる

グリッドの場合

グリッド列はデフォルトで position: relative; なので、クリック可能なグリッド列はリンク上に .stretched-link クラスのみを必要とするが、.row 全体にリンクを張るには、列に .position-static と行に .position-relative が必要。

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

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

リンク
設定例
<div class="row no-gutters bg-light position-relative">
	<div class="col-md-6 mb-md-0 p-md-4">
		<img src="..." class="w-100" alt="...">
	</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 内のどこからでもクリック可能にしたい場合は、.col-*.position-static を、.row.position-relative をそれぞれ追加

 

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

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

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

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

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

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

設定例
<div class="card" style="width: 18rem;">
	<img src="..." class="card-img-top" alt="カード画像の説明">
	<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 を追加しても機能しない