テキストユーティリティ（Text）

job_illustrator_pc_woman-e ※Web開発

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

このページの項目

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

  1. 文字の配置（Text alignment）v5.0.0-alpha1クラス追加、一部廃止、v5.0.0-beta1一部クラス名変更
        1. 定義済クラスの種類
        2. 設定例
          1. 【設定】
          2. 【注意】
          3. 【変更履歴】
  2. テキストの折り返しとはみ出し（Text wrapping and overflow）
      1. テキストの折り返し
        1. 見本
        2. 設定例
          1. 【設定】
        3. 見本 見やすいよう色と枠を付け、画面からはみ出す場合はその部分を非表示に設定しています
        4. 設定例
          1. 【設定】
  3. 単語の改行（Word break）
        1. 見本
        2. 設定例
          1. 【設定】
  4. 文字の変換（Text transform）
        1. 変換の種類
        2. 設定例
          1. 【設定】
          2. 【注意】
  5. フォントサイズ（Font size）v5.0.0-alpha3新設
        1. 見本
        2. フォントサイズの種類
          1. 【設定】
  6. 文字の太さとイタリック体（Font weight and italics）v5.0.0-alpha3クラス名変更、v5.3.0クラス追加
        1. 字体の種類
        2. Bootstrap5.xの設定例 緑背景が変更箇所
        3. ※Bootstrap4.xの設定例 赤背景が変更箇所
          1. 【設定】
          2. 【注意】
          3. 【変更履歴】
  7. 行間（Line height）v5.0.0-alpha1新設
        1. 行間の種類
        2. 設定例
          1. 【設定】
  8. 等幅フォント（Monospace）v5.0.0-alpha1クラス名変更
        1. 見本
        2. 設定例
          1. 【設定】
          2. 【変更履歴】
  9. 色の継承（Reset color）
        1. 見本
        2. 設定例
          1. 【設定】
          2. 【注意】
  10. テキストの装飾（Text decoration）v5.0.0-alpha1クラス追加
        1. 装飾の種類
        2. 設定例
          1. 【設定】
          2. 【注意】
  11. CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更
    1. Sass変数（Sass variables）v5.2.0変更、v5.3.0変数から名称変更
        1. デフォルトの設定
          1. 【変更履歴】
    2. Sassマップ（Sass maps）v5.3.0マップから名称変更
        1. デフォルトの設定
    3. SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更
        1. デフォルトの設定
          1. 【変更履歴】

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

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

定義済クラスの種類

文字の行頭揃え（text-align: left, RTL：text-align: right）v5.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: left）v5.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-wrap（white-space: normal）を入れる
  • 幅の広さが決まっている場合のバッジの設定などで便利

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

見本 見やすいよう色と枠を付け、画面からはみ出す場合はその部分を非表示に設定しています

折り返したくない文字をココに入れると、ハミ出してしまいます。

設定例

<div class="text-nowrap bg-body-secondary border py-2" style="width: 8rem;"> 折り返したくない文字をココに入れると、ハミ出してしまいます。 </div>

【設定】

単語の改行（Word break）

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

見本

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

設定例

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

最も使用されているRTL（右書き）言語であるアラビア語では単語の途中で改行できないので、.text-break はRTLでコンパイルされたCSSでは削除されている。

【設定】
  • 長い英単語を端に来たら途中でも改行するようにしたい場合は、.text-break（word-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（font-size: calc(1.375rem + 1.5vw)）

.fs-1 テキスト

.fs-2（font-size: calc(1.325rem + 0.9vw)）

.fs-2 テキスト

.fs-3（font-size: calc(1.3rem + 0.6vw)）

.fs-3 テキスト

.fs-4（font-size: calc(1.275rem + 0.3vw)）

.fs-4 テキスト

.fs-5（font-size: 1.25rem）

.fs-5 テキスト

.fs-6（font-size: 1rem）

.fs-6 テキスト

フォントサイズの種類

<p class="fs-1">...</p>

【設定】
  • 大きさを設定したい文章に .fs-{size} を入れる
  • .fs-{size} の font-size は、見出しのサイズに準ずる

$font-sizes Sassマップを変更すれば、使用できる font-size がカスタマイズできる（※デフォルトの設定はマップに掲載）。

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

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

字体の種類

太めの文字（font-weight: 700）：.fw-bold

Bold text.

より太めの文字（font-weight: bolder）：.fw-bolder

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

若干太めの文字（font-weight: 600）：.fw-semiboldv5.2.0追加

Semibold weight text.

中間の太さの文字（font-weight: 500）：.fw-mediumv5.3.0追加

Medium 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-normalv5.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 class="fw-semibold">Semibold weight text.</p>中間の太さの文字<p class="fw-medium">Medium weight text.</p>通常の太さの文字<p class="fw-normal">Normal weight text.</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 class="font-weight-normal">Normal weight text.</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}
  • 【v5.2.0】
    • .fw-semibold が追加
  • 【v5.3.0】
    • .fw-medium が追加

行間（Line height）v5.0.0-alpha1新設

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

行間の種類

.lh-1（line-height: 1）

これは、要素の行の高さがユーティリティによってどのように影響を受けるかを示すために書かれた長めの段落。クラスは要素自体に適用されるか、場合によっては親要素に適用される。これらのクラスは、ユーティリティAPIを使用して必要に応じてカスタマイズできる。

.lh-sm（line-height: 1.25）

これは、要素の行の高さがユーティリティによってどのように影響を受けるかを示すために書かれた長めの段落。クラスは要素自体に適用されるか、場合によっては親要素に適用される。これらのクラスは、ユーティリティAPIを使用して必要に応じてカスタマイズできる。

.lh-base（line-height: 1.5、デフォルトの設定と同じ）

これは、要素の行の高さがユーティリティによってどのように影響を受けるかを示すために書かれた長めの段落。クラスは要素自体に適用されるか、場合によっては親要素に適用される。これらのクラスは、ユーティリティAPIを使用して必要に応じてカスタマイズできる。

.lh-lg（line-height: 2）

これは、要素の行の高さがユーティリティによってどのように影響を受けるかを示すために書かれた長めの段落。クラスは要素自体に適用されるか、場合によっては親要素に適用される。これらのクラスは、ユーティリティAPIを使用して必要に応じてカスタマイズできる。

設定例

.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-body-secondary"> <a href="#" class="text-reset">リンクの色をリセットした</a>二次Body色のテキスト。 </p>

【設定】
  • リンクなどの色を親要素の文字色と同じ（color: inherit）にしたい部分に .text-reset を入れる
【注意】
  • リンクの場合、ホバー状態では色は変更しないので、場合によっては色付きリンクの方がお奨め

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

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

装飾の種類

下線（text-decoration: underline）：.text-decoration-underlinev5.0.0-alpha1追加

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

取消線（text-decoration: line-through）：.text-decoration-line-throughv5.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 を入れるとリンクにカーセルを合わせても下線が表示されない

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.2.0変更、v5.3.0変数から名称変更

デフォルトのタイプとフォント関連のSass変数：

デフォルトの設定
scss/_variables.scss 内 font-variables の設定// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-rootは、フォントサイズ、パディング、マージンにも使用される `rem`の値に影響
// $font-size-baseは、本文のフォントサイズに影響
$font-size-root:              null;
$font-size-base:              1rem; // ブラウザのデフォルト、通常は `16px`を想定
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-medium:          500;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;
【変更履歴】
  • 【v5.2.0】
    • CSS変数：--#{$variable-prefix} を --#{$prefix} に変更
    • $font-weight-semibold を追加

Sassマップ（Sass maps）v5.3.0マップから名称変更

フォントサイズのユーティリティは、ユーティリティAPIと組み合わせて、このマップから生成。

デフォルトの設定
scss/_variables.scss 内 font-sizes の設定$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
);

SassユーティリティAPI（Sass utilities API）v5.3.0ユーティリティAPIより名称変更

フォントとテキストのユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_utilities.scss 内 utils-text の設定"font-family": (
  property: font-family,
  class: font,
  values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
  rfs: true,
  property: font-size,
  class: fs,
  values: $font-sizes
),
"font-style": (
  property: font-style,
  class: fst,
  values: italic normal
),
"font-weight": (
  property: font-weight,
  class: fw,
  values: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    normal: $font-weight-normal,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    bold: $font-weight-bold,
    bolder: $font-weight-bolder
  )
),
"line-height": (
  property: line-height,
  class: lh,
  values: (
    1: 1,
    sm: $line-height-sm,
    base: $line-height-base,
    lg: $line-height-lg,
  )
),
"text-align": (
  responsive: true,
  property: text-align,
  class: text,
  values: (
    start: left,
    end: right,
    center: center,
  )
),
"text-decoration": (
  property: text-decoration,
  values: none underline line-through
),
"text-transform": (
  property: text-transform,
  class: text,
  values: lowercase uppercase capitalize
),
"white-space": (
  property: white-space,
  class: text,
  values: (
    wrap: normal,
    nowrap: nowrap,
  )
),
"word-wrap": (
  property: word-wrap word-break,
  class: text,
  values: (break: break-word),
  rtl: false
),
【変更履歴】
  • 【v5.2.0】
    • CSS変数：--#{$variable-prefix} を --#{$prefix} に変更
タイトルとURLをコピーしました