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

テキストユーティリティ(Text)

整列、折り返し、太さなどを制御する一般的なテキストユーティリティの解説と例。

目次

※HTML5のインライン要素による文字の装飾については文字の体裁に掲載。

文字の配置(Text alignment)v5.0.0-alpha1クラス追加、一部廃止、v5.0.0-beta1一部クラス名変更

文字をテキスト配置クラスでコンポーネントに簡単に配置させる。行頭揃え、行末揃え、中央揃えの場合は、グリッドシステムと同じビューポート幅のブレークポイントを使用するレスポンシブ・クラスが使用可能。

定義済みクラスの種類

●文字の行頭揃え(text-align: left, RTL:text-align: rightv5.0.0-beta1クラス名変更

.text-start:全てのビューポートサイズで行頭揃え

.text-sm-start:ビューポートサイズ小以上で行頭揃え

.text-md-start:ビューポートサイズ中以上で行頭揃え

.text-lg-start:ビューポートサイズ大以上で行頭揃え

.text-xl-start:ビューポートサイズ特大以上で行頭揃え

.text-xxl-start:ビューポートサイズ超特大以上で行頭揃え v5.0.0-alpha1追加

●文字の中央揃え(text-align: center

.text-center:全てのビューポートサイズで中央揃え

.text-sm-center:ビューポートサイズ小以上で中央揃え

.text-md-center:ビューポートサイズ中以上で中央揃え

.text-lg-center:ビューポートサイズ大以上で中央揃え

.text-xl-center:ビューポートサイズ特大以上で中央揃え

.text-xxl-center:ビューポートサイズ超特大以上で中央揃え v5.0.0-alpha1追加

●文字の行末揃え(text-align: right, RTL:text-align: leftv5.0.0-beta1クラス名変更

.text-end:全てのビューポートサイズで行末揃え

.text-sm-end:ビューポートサイズ小以上で行末揃え

.text-md-end:ビューポートサイズ中以上で行末揃え

.text-lg-end:ビューポートサイズ大以上で行末揃え

.text-xl-end:ビューポートサイズ特大以上で行末揃え

.text-xxl-end:ビューポートサイズ超特大以上で行末揃え v5.0.0-alpha1追加

設定例
<p class="text-end">...</p>
【設定】
  • テキストに .text(-{breakpoint})-{side}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
    • {side} は、start(行頭揃え)、end(行末揃え)、center(中央揃え) のいずれかを選択
【注意】
【変更履歴】
  • 【v5.0.0-alpha1】
    • .text-xxl-{side} が追加
    • 文字の均等割付ユーティリティクラス(.text-justify)を廃止(理由は下記に記載)
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭揃え:.text(-{breakpoint})-left.text(-{breakpoint})-start
      • 行末揃え:.text(-{breakpoint})-right.text(-{breakpoint})-end

 

テキストの折り返しとはみ出し(Text wrapping and overflow)

※テキストの省略(.text-truncate)はヘルパーに移動

テキストの折り返し

テキストを .text-wrap クラスで囲む。

見本

.text-wrap ありの場合

このテキストは折り返す必要がある。

.text-wrap なしの場合(参考)

このテキストは折り返す必要がある。
設定例
<div class="badge bg-primary text-wrap" style="width: 6rem;">
	このテキストは折り返す必要がある。
</div>
【設定】
  • 設定したい要素に .text-wrapwhite-space: normal;)を入れる
  • 幅の広さが決まっている場合のバッジの設定などで便利

.text-nowrap クラスで、テキストが折り返されないようにする。

見本
折り返したくない文字をココに入れると、ハミ出してしまいます。
設定例 見やすいよう枠と色を付けています
<div class="text-nowrap" style="width: 8rem;">
	折り返したくない文字をココに入れると、ハミ出してしまいます。
</div>
【設定】

 

単語の改行(Word break)

.text-break を使用して word-wrap: break-wordword-break: break-word を設定することにより、長いテキスト文字列がコンポーネントのレイアウトを壊さないようにする。より幅広いブラウザのサポートをするため、より一般的な overflow-wrap の代わりに word-wrap を使用し、非推奨の word-break: break-word を追加して、フレックスコンテナの問題を回避。

見本

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

※設定がない場合(参考)※画面からはみ出す部分は非表示にしています

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

設定例
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
【設定】
  • 長い英単語を端に来たら途中でも改行するようにしたい場合は、.text-breakword-wrap: break-word, word-break: break-word)を入れる

 

文字の変換(Text transform)

文字の大文字小文字のクラスを使用してコンポーネント内の文字を変換。

.text-capitalize がどのようにして各単語の最初の文字だけを変更するかに注意すること。他の文字の場合は影響を受けない。

変換の種類

●すべて小文字(text-transform: lowercase):.text-lowercase

Lowercased Text.

●すべて大文字(text-transform: uppercase):.text-uppercase

Uppercased text.

●最初の文字が小文字⇒大文字(text-transform: capitalize):.text-capitalize

capitalized text.

設定例
すべて小文字<p class="text-lowercase">Lowercased Text.</p>
すべて大文字<p class="text-uppercase">Uppercased text.</p>
最初の文字が小文字⇒大文字<p class="text-capitalize">capitalized text.</p>
【設定】
  • テキストに .text-{transform}(上記の「変換の種類」から選択)を入れる
【注意】
  • テキストが英文字のみ適用

 

フォントサイズ(Font size)v5.0.0-alpha3新設

テキストの font-size を迅速に変更。見出しクラス(.h1.h6 など)は、font-size, font-weight, line-height を適用するが、ここでのユーティリティは font-size のみを適用。

見本

.fs-1

.fs-1 テキスト

.fs-2

.fs-2 テキスト

.fs-3

.fs-3 テキスト

.fs-4

.fs-4 テキスト

.fs-5

.fs-5 テキスト

.fs-6

.fs-6 テキスト

フォントサイズの種類
<p class="fs-1">.fs-1 テキスト</p>
<p class="fs-2">.fs-2 テキスト</p>
<p class="fs-3">.fs-3 テキスト</p>
<p class="fs-4">.fs-4 テキスト</p>
<p class="fs-5">.fs-5 テキスト</p>
<p class="fs-6">.fs-6 テキスト</p>
【設定】
  • 大きさを設定したい文章に .fs-{size} を入れる
  • .fs-{size}font-size は、見出しのサイズに準ずる

$font-sizes Sassマップを変更すれば、使用可能な font-size がカスタマイズ可能。

デフォルトの設定
scss/_variables.scss 内$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

 

文字の太さとイタリック体(Font weight and italics)v5.0.0-alpha3クラス名変更、v5.0.0-alpha1クラス追加

これらのユーティリティを使用して、テキストの font-weightfont-style を迅速に変更。font-style ユーティリティは .fst-* と、font-weight ユーティリティは .fw-* と省略。

字体の種類

●太めの文字(font-weight: 700):.fw-bold

Bold text.

●より太めの文字(font-weight: bolder):.fw-bolder

Bolder weight text. (※親要素に対して)

●通常の太さの文字(font-weight: 400):.fw-normal

Normal weight text.

●細めの文字(font-weight: 300):.fw-light

Light weight text.

●より細めの文字(font-weight: lighter):.fw-lighter

Lighter weight text. (※親要素に対して)

●イタリック体(font-style: italic):.fst-italic

Italicized text.

●フォントスタイルなし(font-style: normal):.fst-normal v5.0.0-alpha1追加

Text without font style

Bootstrap5.xの設定例 緑背景が変更箇所
太めの文字<p class="fw-bold">Bold text.</p>
より太めの文字<p class="fw-bolder">Bolder weight text.</p>
通常の太さの文字<p><strong class="fw-normal">Normal weight text.</strong></p>
細めの文字<p class="fw-light">Light weight text.</p>
より細めの文字<p class="fw-lighter">Lighter weight text.</p>
イタリック体<p class="fst-italic">Italicized text.</p>
フォントスタイルなし<p class="fst-normal">Text without font style</p>
※Bootstrap4.xの設定例 赤背景が変更箇所
太めの文字<p class="font-weight-bold">Bold text.</p>
より太めの文字<p class="font-weight-bolder">Bolder weight text.</p>
通常の太さの文字<p><strong class="font-weight-normal">Normal weight text.</strong></p>
細めの文字<p class="font-weight-light">Light weight text.</p>
より細めの文字<p class="font-weight-lighter">Lighter weight text.</p>
イタリック体<p class="font-italic">Italicized text.</p>
【設定】
  • テキストに .fw-{weight}.fst-{style}(上記の「字体の種類」から選択)を入れる
【注意】
  • イタリック体はブラウザによっては123やabcなど英数字のみ適用
【変更履歴】
  • 【v5.0.0-alpha1】
    • .font-normal(現 .fst-normal)が追加
  • 【v5.0.0-alpha3】
    • .font-weight-{weight}.fw-{weight}
    • .font-{style}.fst-{style}

 

行間(Line height)v5.0.0-alpha1新設

.lh-* ユーティリティを使用して行間を変更。

行間の種類

.lh-1line-height: 1;

行の高さユーティリティを誇示するための数々のプレースホルダーコンテンツ。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

.lh-smline-height: 1.25;

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

.lh-baseline-height: 1.5;、標準の設定と同じ)

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

.lh-lgline-height: 2;

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

設定例
.lh-1 の場合<p class="lh-1">行の高さユーティリティを誇示するための数々のプレースホルダーコンテンツ。...</p>
【設定】
  • 行間を設定したい要素に .lh-{size}(上記の「行間の種類の種類」から選択)を入れる
  • .lh-sm の設定を変更したい場合は、scss/_variables.scss 内の $line-height-sm 変数の値を、同じく .lh-lg の設定を変更したい場合は、scss/_variables.scss 内の $line-height-lg 変数の値を変更して再コンパイルする

 

等幅フォント(Monospace)v5.0.0-alpha1クラス名変更

.font-monospace を使って等幅フォントスタック(font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;)に選択変更可能。

見本

This is in monospace
日本語の場合

※参考(通常のフォント)

This is in monospace
日本語の場合

設定例
<p class="font-monospace">This is in monospace<br>日本語の場合</p>
【設定】
  • 等幅フォントにしたい要素に .font-monospace を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .text-monospace.font-monospace

 

色の継承(Reset color)

テキストやリンクの色を .text-reset でリセットし、親要素から色を継承。

見本

リンクの色をリセットしたミュート色のテキスト。

※通常(参考)

リンクの色をリセットしないミュート色のテキスト。

設定例
<p class="text-muted">
	<a href="#" class="text-reset">リンクの色をリセットした</a>ミュート色のテキスト。
</p>
【設定】
  • リンクなどの色を親要素の文字色と同じ(color: inherit)にしたい部分に .text-reset を入れる
【注意】
  • リンクの場合、ホバー時に色は変更しないので、場合によっては色付きリンクの方がお奨め

 

テキストの装飾(Text decoration)v5.0.0-alpha1クラス追加

コンポーネント内のテキストをテキスト装飾クラスで装飾。

装飾の種類

●下線(text-decoration: underline):.text-decoration-underline v5.0.0-alpha1追加

このテキストには下線があります。

●取消線(text-decoration: line-through):.text-decoration-line-through v5.0.0-alpha1追加

このテキストには取消線があります。

●装飾なし(text-decoration: none):.text-decoration-none

下線の付いていないリンク
設定例
下線<p class="text-decoration-underline">このテキストには下線があります。</p>
取消線<p class="text-decoration-line-through">このテキストには取消線があります。</p>
装飾なし<a href="#" class="text-decoration-none">下線の付いていないリンク</a>
【設定】
  • テキストに .text-decoration-{xxx}(上記の「装飾の種類」から選択)を入れる
【注意】
  • <a>.text-decoration-none を入れるとリンクにカーセルを合わせても下線が表示されない