Bootstrap5 文字タイポグラフィ
このドキュメントでは、Bootstrap5におけるテキストのスタイリングに役立つユーティリティクラスについて解説します。開発者はこれらのクラスを利用することで、見出し、配置、折り返し、大文字/小文字、色、行間など、テキストのスタイルを簡単に設定できます。
一、 見出し
.h1 から .h6 クラス、または .display-[1-6] クラスを使用して、6つの異なるサイズのheadingを設定できます。
| クラス | 出力 |
|---|---|
.h1 |
見出し1 |
.h2 |
見出し2 |
.h3 |
見出し3 |
.h4 |
見出し4 |
.h5 |
見出し5 |
.h6 |
見出し6 |
二、 テキスト配置
.text-start、.text-center、.text-endを使用して、それぞれ左揃え、中央揃え、右揃えを設定します。.text-justifyを使用して、両端揃えを設定します。
<p class="text-start">左揃え</p>
<p class="text-center">中央揃え</p>
<p class="text-end">右揃え</p>
<p class="text-justify">両端揃え</p>
三、 折り返し
.text-wrapを使用して、自動改行を設定します。.text-nowrapを使用して、改行なしを設定します。.text-breakを使用して、長い単語やURLアドレスでテキストを途中で改行できるようにします。
四、 大文字/小文字
.text-lowercaseを使用して、テキストを小文字に設定します。.text-uppercaseを使用して、テキストを大文字に設定します。.text-capitalizeを使用して、テキストの先頭を大文字に設定します。
五、 フォントの太さ
.fw-boldを使用して、太字のテキストを設定します。.fw-normalを使用して、通常の太さのテキストを設定します。.fw-lighterを使用して、より細いテキストを設定します。
六、 斜体
.fst-italicを使用して、斜体のテキストを設定します。.fst-normalを使用して、通常のフォントのテキストを設定します。
七、 テキストの色
.text-[color]クラスを使用して、テキストの色を設定します。例：.text-primary、.text-danger、.text-successなど。- カスタムカラーを使用します。例：
.text-rgb(255,0,0)または.text-#ff0000。
八、 行の高さ
.lh-[size]クラスを使用して、行の高さを設定します。例：.lh-1、.lh-sm、.lh-lgなど。
九、 字間
.text-resetを使用して、字間をリセットします。.fs-[size]クラスを使用して、フォントサイズを設定します。例：.fs-1、.fs-sm、.fs-lgなど。.font-monospaceを使用して、等幅フォントを設定します。
十、 テキスト装飾
.text-decoration-noneを使用して、テキスト装飾を削除します。.text-decoration-underlineを使用して、下線を設定します。.text-decoration-line-throughを使用して、取り消し線を設定します。
十一、 その他
.text-mutedを使用して、淡いテキストの色を設定します。.leadを使用して、導入テキストを作成します。フォントが大きく、目立ちます。.smallまたは.text-smを使用して、より小さいテキストを作成します。<mark>、<del>、<s>、<ins>、<u>、<strong>、<small>などの意味論的なタグを使用します。
関連リソース
よくある質問
Bootstrap5 でカスタムフォントを使用するにはどうすればよいですか？
<link> タグを使用して、カスタムフォントをインポートし、CSSでフォントファミリーを定義します。
テキストの影を追加するにはどうすればよいですか？
text-shadow CSSプロパティを使用します。
レスポンシブなテキストサイズを設定するにはどうすればよいですか？
メディアクエリを使用して、異なる画面サイズに対して異なるフォントサイズを定義します。