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

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

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

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

リンクに .stretched-link を追加して、 ::after 擬似要素を介して包含ブロックをクリック可能にする。ほとんどの場合、これは position: relative;(相対位置)を持つ要素が .stretched-link クラスとのリンクを含めることで実現可能。

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

実例(Examples)

カードの場合

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

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

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

リンクボタン
設定例
<div class="card" style="width: 18rem;">
	<img class="card-img-top" src="..." 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 class="mr-3" src="..." 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 class="w-100" src="..." 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 をそれぞれ追加

テーブルの場合 ※裏技

テーブルはデフォルトでは position: relative; ではないので、table.table, <tr>, <td> のいずれかに .position-relative を追加する必要がある。

見本1
# 見出し 見出し 見出し
1 テーブル全体をリンク テーブルのセル テーブルのセル
テーブルのセル
2 1行目のリンクしか機能しない テーブルのセル テーブルのセル
テーブルのセル
3 1行目のリンクしか機能しない テーブルのセル テーブルのセル
テーブルのセル
設定例
<table class="table position-relative">
	<thead>
		<tr>
			<th>#</th>
			<th scope="col">見出し</th>
			<th scope="col">見出し</th>
			<th scope="col">見出し</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>テーブル全体をリンク</td>
			<td><a href="#" class="stretched-link">テーブルのセル</a></td>
			<td>テーブルのセル<br>テーブルのセル</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>1行目のリンクしか機能しない</td>
			<td><a href="#">テーブルのセル</a></td>
			<td>テーブルのセル<br>テーブルのセル</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>1行目のリンクしか機能しない</td>
			<td><a href="#">テーブルのセル</a></td>
			<td>テーブルのセル<br>テーブルのセル</td>
		</tr>
	</tbody>
</table>
見本2
# 見出し 見出し 見出し
1 行全体にリンク テーブルのセル テーブルのセル
テーブルのセル
2 セル全体にリンク テーブルのセル テーブルのセル
テーブルのセル
3 ※設定なし(参考) テーブルのセル テーブルのセル
テーブルのセル
設定例
<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th>#</th>
			<th scope="col">見出し</th>
			<th scope="col">見出し</th>
			<th scope="col">見出し</th>
		</tr>
	</thead>
	<tbody>
		<tr class="position-relative">
			<th scope="row">1</th>
			<td>行全体にリンク</td>
			<td><a href="#" class="stretched-link">テーブルのセル</a></td>
			<td>テーブルのセル<br>テーブルのセル</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>セル全体にリンク</td>
			<td class="position-relative"><a href="#" class="stretched-link">テーブルのセル</a></td>
			<td>テーブルのセル<br>テーブルのセル</td>
		</tr>
	</tbody>
</table>

【設定】

  • セル内のリンク(<a>)に .stretched-link を入れてテーブルのどこからでもクリック可能にしたい場合は、table.table.position-relative を追加する
  • セル内のリンク(<a>)に .stretched-link を入れてその行のどこからでもクリック可能にしたい場合は、<tr>.position-relative を入れる(ブラウザによっては別の行からでもクリック可能な場合あり)
  • セル内のリンク(<a>)に .stretched-link を入れてそのセルのどこからでもクリック可能にしたい場合は、<td>.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 class="card-img-top" src="..." 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 を追加しても機能しない