「Bootstrap 5フロントエンド開発の教科書」を読んだ

「Bootstrap 5フロントエンド開発の教科書」を 2,023 年 12 月 11 日に読んだ。

目次

• メモ
  • 1.2.2 グリッドシステムによるレイアウト p9
  • 1.3.1 Bootstrap の誕生と歩み p11
  • 廃止された HTML5 p19
  • p69
  • 3.1.11 リスト p73
  • 3.1.12 インラインリスト p74
  • 3.1.13 定義リスト p74
  • 3.2.3 変数の表記 var p78
  • 3.2.4 ユーザーインプットの表記 p78
  • 3.2.5 サンプル出力 p79
  • 3.4.1 テーブルの基本スタイリング p85
  • 3.4.6 罫線なしのテーブル p92
  • 3.4.11 レスポンシブ対応のテーブル p99
  • Bootstrap 4 のカードデッキとカードカラム p152
  • 5.3.2 ディバイダーを変更する p193
  • 5.5.2 ページネーションにアイコンを使用する p204
  • 5.5.3 リンクに無効状態や現在位置であることを示す p205
  • tabindex 属性でリンクを無効状態にする p205
  • グリッドレイアウトを組み込む p221
  • 6.1.6 ヘルプテキストを表示する p226
  • Bootstrapのフォームの入力検証機能を使用する p231
  • サーバー側で入力検証を行う p234
  • 8.3.3 印刷時の表示/非表示を設定するクラス p361
  • 8.8.3 配置位置に要素の中心がくるようにする p394
  • 8.10.2 テーブルセルの垂直方向の整列 p407
  • 8.11.1 Visually hidden ヘルパー p408
  • 8.11.5 Interactions ユーティリティ p411
  • 8.11.7 Stretched link ヘルパー p413

メモ

1.2.2 グリッドシステムによるレイアウト p9

グリッドシステム (Grid System) とは、スイスのグラフィックデザイナー、ヨゼフ・ミューラー・ブロックマン (Josef Müller-Brockmann) 氏が提唱したレイアウトの手法です。
グリッドとは、縦横線の格子です。
このグリッド状のガイドラインを下地に、画像やテキストといったコンテンツをブロックごとに配置する手法を指します。
統一感や一貫性といったレイアウトのクオリティを維持するために使用されてきました。

近年は Web ページのレイアウト手法としても用いられる機会が増え、
Bootstrap をはじめとする多くの CSS フレームワークのレイアウト手法として採用されています。

1.3.1 Bootstrap の誕生と歩み p11

元々 Twitter Blueprint という名称だった Bootstrap は、
2010 年半ばにアメリカのTwitter社のマーク・オットー (Mark Otto) 氏とヤコブ・ソーントン (Jacob Thornton) 氏によって作られました。
かつての Twitter 社のインターフェイス開発には、さまざまなライブラリが使用されていたため一貫性がなく、メンテナンスにかかる負担は大きなものでした。
そこで、内部ツール間の統一を図るフレームワークとして Twitter Blueprint が誕生したのです。

少数グループによる数か月の開発期間を経て、 Twitter 開発チームは、ハッカソンスタイルの Hack Week と呼ばれる開発イベントを開催。
Twitter 社の多くの開発者がこれに参加し、プロジェクトは急激に大きくなりました。
オープンソースとして公開される前から、社内ツール開発のスタイルガイドとして広く使われるようになります (図 1-10) 。

その後、「Twitter Blueprint」から「Twitter Bootstrap」に改名され、2011年8月19日にオープンソースのプロジェクトとしてリリースされます。
現在は、マーク・オットー氏とヤコブ・ソーントン氏、コア開発者の少数グループだけでなく、多くの貢献者が集まった大きなコミュニティによって維持されています。

オープンソースとなった当初は、 Twitter 社から提供されていて、 Twitter Bootstrap と呼ばれていましたが、
プロジェクトのメイン開発者であるマーク・オットー氏とヤコブ・ソーントン氏が Twitter 社を退社した後は、 Twitter 社から独立したプロジェクトとなり、
名称も「Twitter Bootstrap」から「Bootstrap」に変更されました。

ハッカソン (hackathon): hack (ハック) + marathon (マラソン) からの造語。
エンジニア、デザイナー、プロジェクトマネージャーなどの技術者が集まってチームを作り、
与えられたテーマに対して、それぞれの技術やアイデアを持ち寄り、会場にこもって集中的に開発を行うイベントのことです。

廃止された HTML5 p19

2021年1月に、 W3C は HTML5 の廃止を発表しました。
そして、 WHATWG (Apple, Mozilla, Opera が2004年に設立した団体) の HTML Review Draft を推奨勧告したことで、以降は同グループの HTML Living Standard が HTML の標準規格となりました。
これにより、 2 つの標準があったような時代は終わり、開発者はただ 1 つの標準に沿えば良いということになりました。
ただし、 HTML5 と HTML Living Standard の仕様には現時点で大きな差異はなく、 HTML4と区別するためもあり、本書では引き続き馴染みのある HTML5 という呼称を用いています。

p69

abbr 要素には、マウスポインターを合わせると説明文が展開表示されます。
略語には、デフォルト設定として下線が付いており、マウスポインターを合わせると、
追加の文脈表示や、アシスティブテクノロジー (障害を持つ人々を支援するための技術) のユーザーのためのヘルプカーソルが得られます (リスト 3-20 、図 3-14)。

また、 initialism クラスを追加して、少し小さいフォントサイズの略語を表現できます。

<p><abbr title="HyperText Markup Language">HTML</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

3.1.11 リスト p73

リスト要素 (ul, ol) に list-unstyled クラスを追加して、 li 要素にデフォルトで設定されているリストマーカーと左マージンを削除することができます。
ネストされた li 要素のリストマーカーを削除するには、ネストされたリスト要素にも list-unstyled クラスも追加する必要があります (リスト3-30、図 3-19) 。

<ul class="list-unstyled">
	<li>リストマーカーのないリスト項目</li>
	<li>
		リストマーカーのないリスト項目
		<ul>
			<li>ネストされたリスト項目</li>
			<li>ネストされたリスト項目</li>
			<li>ネストされたリスト項目</li>
		</ul>
	</li>
	<li>リストマーカーのないリスト項目</li>
	<li>リストマーカーのないリスト項目</li>
</ul>

3.1.12 インラインリスト p74

リスト要素に list-inline クラス、 li 要素に list-inline-item クラスを組み合わせることで、リスト項目を横並びにして間にマージンを適用することができます (リスト 3-32、図 3-20) 。

<ul class="list-inline">
	<li class="list-inline-item">インラインリスト項目</li>
	<li class="list-inline-item">インラインリスト項目</li>
	<li class="list-inline-item">インラインリスト項目</li>
</ul>

3.1.13 定義リスト p74

定義リスト (dl、dt、dd) にグリッドシステム用の row クラスおよび col-* クラス (P.32、P.33 参照)を追加して、用語 (dt 要素) と説明 (dd 要素) を水平に揃えることができます。
長い用語を途中で省略する場合には text-truncate クラスを追加して、テキストを省略記号で切り捨てることができます (リスト3-34、 図 3-21) 。

<dl class="row">
	<dt class="col-sm-3">用語1</dt>
	<dd class="col-sm-9">用語1の説明。</dd>
	<dt class="col-sm-3 text-truncate">用語2の長いテキストは切り捨てて省略</dt>
	<dd class="col-sm-9">用語2の説明</dd>
	<dt class="col-sm-3">用語3</dt>
	<dd class="col-sm-9">
		<dl class="row">
			<dt class="col-sm-4">ネストされた用語4</dt>
			<dd class="col-sm-8">ネストされた用語4の説明</dd>
		</dl>
	</dd>
</dl>

3.2.3 変数の表記 var p78

要素のデフォルトスタイルを使って、変数をイタリック体で表記します (リスト 3-40、 図 3-24) 。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

3.2.4 ユーザーインプットの表記 p78

kbd 要素を使用して、通常キーボードから入力される入力テキストを表記します (リスト3-41、図3-25) 。

ディレクトリを切り替えるには、 <kbd>cd</kbd> と続けてディレクトリ名を入力します。
設定を編集するには、 <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> を押します。

3.2.5 サンプル出力 p79

samp 要素を使用して、プログラムからのサンプル出力を表示します (リスト 3-43、図 3-26) 。

<samp>This text is meant to be treated as sample output from a computer program.</samp>

3.4.1 テーブルの基本スタイリング p85

table 要素に table クラスを追加して、 Bootstrap での基本的なテーブルをスタイリングします。 (リスト 3-55 、図 3-32)。
ネストされたテーブルでも、個々のテーブルに独立したスタイルが適用されます。

<table class="table">
	<thead>
		<tr>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">見出しセル</th>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<th scope="row">見出しセル</th>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<th scope="row">見出しセル</th>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
</table>

3.4.6 罫線なしのテーブル p92

table クラスが設定された table 要素に table-borderless クラスを追加すると、罫線なしのテーブルになります (リスト 3-66 、図 3-37)。

<table class="table table-borderless">
...
</table>

3.4.11 レスポンシブ対応のテーブル p99

Bootstrap では、テーブルを水平方向にスクロール可能にすることでレスポンシブ対応させます。
table 要素の親要素に table-responsive クラスを追加して、すべてのビューポートに対応するテーブルを作成します (リスト 3-77) 。

<!-- レスポンシブ対応テーブル -->
<div class="table-responsive">
	<table class="table">
		<caption>レスポンシブ対応テーブル (table-responsive)</caption>
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>

<!-- 標準テーブル -->
<table class="table">
	<caption>標準テーブル (table)</caption>
	<thead>
		...
	</thead>
	<tbody>
		...
	</tbody>
</table>

Bootstrap 4 のカードデッキとカードカラム p152

Bootstrap 5 では、Bootstrap 4 にあったカードデッキとカードカラムがサポートされなくなりました。
カードデッキは、一連のカードを連結せずに均一サイズでグループ化するコンポーネントであり、これは前述のグリッドレイアウトによって再現可能です。
グリッドレイアウトを使う分、余白の制御の自由度が高くなります。
カードカラムは、カードをタイル状の列にレイアウトするコンポーネントであり、
これは Masonry というグリッドレイアウトのための外部ライブラリを使用することが推奨されています。
このライブラリは JavaScript で記述されており、 Bootstrap 同様に HTML ページに組み込むことで利用できます。

Masonry
https://masonry.desandro.com/ 

5.3.2 ディバイダーを変更する p193

ディバイダーは、パンくずリストの各項目間を区切る文字です。
デフォルトではスラッシュ (/) が使用されますが、 CSS 変数 --bs-breadcrumb-divider を上書きすることで、別の文字や SVG イメージに変更できます (リスト 5-44、図 5-41)。

<nav style="--bs-breadcrumb-divider: '●'" aria-label="breadcrumb" role="navigation">
	<ol class="breadcrumb p-3 bg-light rounded-2">
		<li class="breadcrumb-item"><a href="#">ホーム</a></li>
		<li class="breadcrumb-item"><a href="#">ライブラリ</a></li>
		<li class="breadcrumb-item active" aria-current="page">データ</li>
	</ol>
</nav>

5.5.2 ページネーションにアイコンを使用する p204

ページネーション内のリンク箇所に、「前へ」や「次へ」といったテキストを使わず、
アイコンや記号をする場合は、 aria-* 属性や Visually hidden ヘルパー (P.408 参照) の visually-hidden クラスを使用してアクセシビリティに配慮する必要があります。

次の例では、「前」「次」のテキストリンクの代わりに、
&laquo; で左二重角引用符「<<」、 &raquo; でも重角引用符「>>」の記号を使用しています (リスト 5-59 、図 5-60) 。

<nav aria-label="ページネーションの例">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="前へ">
				<span aria-hidden="true">&laquo;</span>
				<span class="visually-hidden">前へ</span>
			</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
			<a class="page-link" href="#" aria-label="次へ">
				<span aria-hidden="true">&raquo;</span>
				<span class="visually-hidden">次へ</span>
			</a>
		</li>
	</ul>
</nav>

5.5.3 リンクに無効状態や現在位置であることを示す p205

ページネーションのリンクは、無効状態を示したり現在位置であることを示すなど、さまざまな状態に合わせてカスタマイズすることができます (リスト 5-60 ) 。

<nav aria-label="ページネーションの例">
	<ul class="pagination">
		<li class="page-item disabled">
			<a class="page-link" href="#" tabindex="-1"></a>
		</li>
		<li class="page-item">
			<a class="page-link" href="#">1</a>
		</li>
		<li class="page-item active">
			<a class="page-link" href="#">2<span class="visually-hidden">(現ページ)</span></a>
		</li>
		<li class="page-item">
			<a class="page-link" href="#">3</a>
		</li>
		<li class="page-item">
			<a class="page-link" href="#">次</a>
		</li>
	</ul>
</nav>

リンクを無効状態で表示するには、 page-item クラスが設定された要素に disabled クラスを追加します(1)。
さらに page-link クラスが設定された a 要素には、属性 tabindex="-1" を追加します(2)。

リンクが現在位置であることを示すには、 page-item クラスが設定された要素に active クラスを追加します(3)。
さらに page-link クラスが設定された a 要素内には、 Visually hidden ヘルパー (P.408 参照) の aria-hidden クラスを使用して、スクリーンリーダー用に現在位置であることを示す非表示テキストを加えておきましょう。

tabindex 属性でリンクを無効状態にする p205

Bootstrap で定義されている disabled クラスのスタイルには、 pointer-events: none; が宣言されており、これによって a 要素のリンク機能を無効化します。
しかし、このプロパティにはキーイベントを無効化する機能がないため、 Tab キーを押してフォーカスを移動して該当箇所で Enter キーを押した場合などはページが遷移してしまいます (図 5-61) 。

この問題を回避するには、要素に属性 tabindex="-1" を追加します。
tabindex 属性は、 Tab キーでフォーカスを移動する順序を明示的に指定するオプションですが、負の整数を指定するとリンク機能は残したままフォーカスが移動しなくなります (図 5-62) 。

グリッドレイアウトを組み込む p221

まず、フォームをグリッドレイアウトで配置する方法を見ていきましょう。
div 要素に col-* クラスや col-{ブレイクポイント}-* クラスを追加して、 row クラスで囲み、グリッドのカラムとして幅指定を行います。
次の例では、姓の入力欄と名の入力欄が横並びのカラムになるように幅指定を行っています (リスト 6-14 、図 6-12)。

<form>
	<div class="row">
		<div class="col"><input type="text" class="form-control" placeholder="姓" /></div>
		<div class="col"><input type="text" class="form-control" placeholder="名" /></div>
	</div>
</form>

6.1.6 ヘルプテキストを表示する p226

入力コントロールの下に表示するヘルプテキスト (補助説明文) を作成する場合は、テキスト要素に form-text クラスを追加します。
次の例では、 small 要素に form-text クラスと Text ユーティリティ (P.400 参照) の text-muted クラスを追加して、小さくグレーで表示されるヘルプテキストを作成しています (リスト 6-19 、図 6-17) 。

<form>
	<label class="form-label" for="inputPassword">パスワード</label>
	<input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpBlock" />
	<small id="passwordHelpBlock" class="form-text text-muted">
		パスワードは8~20文字で、 文字と数字 を含み、スペース、特殊文字、または絵文字を含むことはできません。
	</small>
</form>

Bootstrapのフォームの入力検証機能を使用する p231

まず form 要素に novalidate 属性を追加して、ブラウザデフォルトの入力検証機能を無効化します。
入力必須を指定する項目の入力コントロールには required 属性を追加しておきましょう。
また、フィードバックの文章は、valid-feedback クラスや invalid-feedback クラスを追加した要素で囲みます。
入力値が妥当な場合のフィードバックには valid-feedback クラスを使用し、緑色で表示します。
妥当でない場合のフィードバックには invalid-feedback クラスを使用し、赤色で表示します (リスト 6-24) 。

<form class="needs-validation" novalidate>
	<div class="row g-2">
		<div class="col-md-6 mb-3">
			<label for="validation01">姓</label>
			<input
				type="text"
				class="form-control"
				id="validation01"
				placeholder="First name"
				value="山田"
				required
			/>
			<div class="valid-feedback">入力済！</div>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validation02">名</label>
			<input
				type="text"
				class="form-control"
				id="validation02"
				placeholder="Last name"
				value="太郎"
				required
			/>
			<div class="valid-feedback">入力済！</div>
		</div>
	</div>
	<div class="row g-2">
		<div class="col-md-6 mb-3">
			<label for="validation03">市町村</label>
			<input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required />
			<div class="invalid-feedback">市町村名を入力してください</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validation04">都道府県</label>
			<input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
			<div class="invalid-feedback">都道府県名を入力してください</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validation05">郵便番号</label>
			<input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required />
			<div class="invalid-feedback">郵便番号を入力してください</div>
		</div>
	</div>
	<button class="btn btn-primary" type="submit">送信する</button>
</form>

次に、JavaScript コードを追加します。
Bootstrapは、入力検証の結果が妥当であるかどうかを、CSS の擬似クラス :invalid と :valid として表します。
:invalid および :valid スタイルは、親要素である form 要素の was-validated クラスに対して付与されます。

そこで、無効な入力で送信しようとした場合に送信をキャンセルし、 was-validated クラスを追加するしくみを JavaScript で実装します。
これによって、ユーザーが無効な入力で送信しようとすると、入力コントロールにメッセージが表示されるようになります (リスト 6-25 、図 6-23) 。

<script>
	(function () {
		"use strict";
		window.addEventListener(
			"load",
			function () {
				// Bootstrapのフォームの入力検証のスタイルを適用するフォームを取得
				let forms = document.getElementsByClassName("needs-validation");

				// ループして帰順を防ぐ
				let validation = Array.prototype.filter.call(forms, function (form) {
					form.addEventListener(
						"submit",
						function (event) {
							// バリデートが通らない場合、イベントをキャンセルして、was-validatedクラスを追加
							if (form.checkValidity() === false) {
								event.preventDefault();
								event.stopPropagation();
							}

							form.classList.add("was-validated");
						},
						false
					);
				});
			},
			false
		);
	})();
</script>

サーバー側で入力検証を行う p234

フォームの入力検証を JavaScript ではなく、サーバー側で行う場合は、無効な入力があった場合の表示に is-invalid クラス、有効な入力の表示に is-valid クラスを付与します。
これらは、クライアント側で検証する際に使用される :valid や :invalid に相当するスタイルで、サーバー側でこれらのスタイルを付与することで、検証結果に応じたスタイルを適用できます。

なお、フィードバックメッセージの表示には、これまでと同じ、 invalid-feedback クラスを利用します (リスト 6-27 、図 6-25)。

<form>
	<div class="row g-2">
		<div class="col-md-6 mb-3">
			<label for="validationServer01">姓</label>
			<input
				type="text"
				class="form-control is-valid"
				id="validationServer01"
				placeholder="First name"
				value="山田"
				required
			/>
		</div>
		<div class="col-md-6 mb-3">
			<label for="validationServer02">名</label>
			<input
				type="text"
				class="form-control is-valid"
				id="validationServer02"
				placeholder="Last name"
				value="太郎"
				required
			/>
		</div>
	</div>
	<div class="row g-2">
		<div class="col-md-6 mb-3">
			<label for="validationServer03">市町村</label>
			<input
				type="text"
				class="form-control is-invalid"
				id="validationServer03"
				placeholder="市町村名を入力"
				required
			/>
			<div class="invalid-feedback">市町村名を入力してください</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validationServer04">都道府県</label>
			<input 
				type="text"
				class="form-control is-invalid"
				id="validationServer04"
				placeholder="都道府県名を入力"
				required
			/>
			<div class="invalid-feedback">都道府県名を入力してください</div>
		</div>
		<div class="col-md-3 mb-3">
			<label for="validationServer05">郵便番号</label>
			<input
				type="text"
				class="form-control is-invalid"
				id="validationServer05"
				placeholder="郵便番号を入力"
				required
			/>
			<div class="invalid-feedback">郵便番号を入力してください</div>
		</div>
	</div>
	<button class="btn btn-primary" type="submit">送信する</button>
</form>

8.3.3 印刷時の表示/非表示を設定するクラス p361

印刷時に要素の表示/非表示を切り替えるには、 d-print-{表示形式} クラスを使用します (表 8-11)。
たとえば、ナビゲーションバーや広告など、印刷不要の要素によく使用されます。

<div class="d-print-none">スクリーンのみ表示 (印刷時のみ非表示)</div>
<div class="d-none d-print-block">印刷時のみ表示 (スクリーンでは非表示)</div>

8.8.3 配置位置に要素の中心がくるようにする p394

同じく Position ユーティリティの translate-middle-* クラスを使用して、配置位置に要素の中心がくるようにできます。
translate-middle クラスでは水平垂直方向、 translate-middle-x クラスでは水平方向、 translate-middle-y クラスでは垂直方向が適用されます (リスト 8-45 、図 8-39) 。

<div class="position-relative w-auto bg-info" style="height: 400px">
	<div class="position-absolute top-0 start-0 translate-middle">1</div>
	<div class="position-absolute top-0 start-50 translate-middle">2</div>
	<div class="position-absolute top-0 start-100 translate-middle">3</div>
	<div class="position-absolute top-50 start-0 translate-middle">4</div>
	<div class="position-absolute top-50 start-50 translate-middle">5</div>
	<div class="position-absolute top-50 start-100 translate-middle">6</div>
	<div class="position-absolute top-100 start-0 translate-middle">7</div>
	<div class="position-absolute top-100 start-50 translate-middle">8</div>
	<div class="position-absolute top-100 start-100 translate-middle">9</div>
</div>

8.10.2 テーブルセルの垂直方向の整列 p407

次の例では、テーブルセルに Vertical alignment ユーティリティを設定しています。
サンプルではわかりやすいように親要素にボーダーや高さを設定しています (リスト 8-62 、図 8-53)。

<table style="height: 100px" class="mx-auto">
	<tbody>
		<tr>
			<td class="align-baseline">baseline</td><!-- ベースライン -->
			<td class="align-top">top</td><!-- 上揃え -->
			<td class="align-middle">middle</td><!-- 上揃え -->
			<td class="align-bottom">bottom</td><!-- 上揃え -->
			<td class="align-text-top">text-top</td><!-- テキストの上揃え -->
			<td class="align-text-bottom">text-bottom</td><!-- テキストの下揃え -->
		</tr>
	</tbody>
</table>

8.11.1 Visually hidden ヘルパー p408

visually-hidden クラスを使用すると、スクリーンリーダーを除くすべてのデバイスにおいて、要素を非表示にします。
また、 visually-hidden-focusable クラスを使用すると、たとえばキーボード利用のみのユーザーなどに対し、フォーカス時に要素を再表示させることができます。
visually-hidden クラスは、アクセシビリティのための設定として、よく利用されるクラスです (リスト 8-63 、図 8-54)。

<a class="visually-hidden-focusable" href="#content">メインコンテンツへスキップ</a>

8.11.5 Interactions ユーティリティ p411

Webページに対するユーザーの操作を Interactions ユーティリティで制御できます。
主に、テキストの選択とマウスポインターに対するクラスが用意されています。
user-select-* クラスを使うと、ユーザーのテキスト選択操作を制御できます (リスト 8-67 、図 8-58)。

<p class="user-select-all">この段落は、ユーザーがクリックするとすべて選択されます。</p>
<p class="user-select-auto">この段落は、デフォルトの選択動作を行います。</p>
<p class="user-select-none">この段落は、ユーザーがクリックしても選択できません。</p>

8.11.7 Stretched link ヘルパー p413

Stretched link ヘルパーの stretched-link クラスを使用と、リンクを伸長させるストレッチリンクを作成することができます。
これにより、たとえばカード内に設置したリンクをカード全体でクリックできるようにできます。
なお、 stretched-link クラスを追加したリンクを含む親要素は、 position プロパティが relative である必要があります。
カード (card クラス) の position プロパティは relative なので、 stretched-link クラスによるリンクの伸長が可能です (リスト 8-70 、図 8-61)。

<div class="card" style="max-width: 25rem">
	<img class="card-ing-top" src="https://via.placeholder.com/318x180.png&text=img" alt="..." />
	<div class="card-body">
		<h4 class="card-title">カードの見出し</h4>
		<p class="card-text">カードの内容文が入ります。</p>
		<a href="" class="btn btn-primary stretched-link">ボタン</a>
	</div>
</div>

stretched-link クラスは、リンクに after 擬似要素を使うことで、 position プロパティが relative である親要素に対して絶対位置でリンクを配置しています。
よって、親要素の position プロパティが relative でない場合には、外にリンクが伸長しないように、その親要素に position-relative クラスを追加する必要があり