テキスト:text

字の左寄せ/中央寄せ/右寄せを設定するクラス:text-start


text-start

text-center

text-end


  <p class="text-start">text-start</p>
  <p class="text-center">text-center</p>
  <p class="text-end">text-end</p>

ブレークポイント別の適用左寄せ/中央寄せ/右寄せを設定するクラス:text-start


text-sm-start

text-md-start

text-lg-start

text-xl-start


  <p class="text-sm-start">text-sm-start</p>
  <p class="text-md-start">text-md-start</p>
  <p class="text-lg-start">text-lg-start</p>
  <p class="text-xl-start">text-xl-start</p>

テキストの折り返し許可、不許可:text-wrapとtext-nowrap


テキスト折り返し許可している場合
テキスト折り返し許可していない場合

  <!-- 設定した文字数で折り返して全部を表示する -->
  <div class="badge bg-primary text-wrap" style="width: 6rem">テキスト折り返し許可している場合</div>
  <!-- divからはみ出してテキストが表示される -->
  <div class="text-nowrap bd-highlight" style="width: 6rem">テキスト折り返し許可していない場合</div>

文字を大文字や小文字に変換する:text-lowercase


text-Lowercase(すべて小文字)

text-uppercase(すべて大文字)

text-capitalize(最初の文字を大文字)


  <p class="text-lowercase">text-Lowercase(すべて小文字)</p>
  <p class="text-uppercase">text-uppercase(すべて大文字)</p>
  <p class="text-capitalize">text-capitalize(最初の文字を大文字)</p>

文字の太さとイタリック体を設定する:font-weight-*


太字(font-weight)

太字(font-weight-bold)

通常(font-weight-normal)

細字(font-weight-light)


  <p class="font-weight">太字(font-weight)</p>
  <p class="font-weight-bold">太字(font-weight-bold)</p>
  <p class="font-weight-normal">通常(font-weight-normal)</p>
  <p class="font-weight-light">細字(font-weight-light)</p>

イタリック体を設定する:font-italic


イタリック体(font-italic)


  <p class="font-italic">イタリック体(font-italic)</p>

等幅フォント:font-monospace


monospace
日本語の場合(かっこや句読点も)。


  <!-- 同じ幅になる、文字によって変わるのがプロポーショナルフォント -->
  <p class="font-monospace">monospace<br>日本語の場合(かっこや句読点も)。</p>

長いテキストを省略記号:text-truncate w-25


25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。


  <p class="text-truncate w-25">25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。</p>

文字の大きさを変える:h1~h6


h1クラスの標準と同じになる

h2クラスの標準と同じになる

h3クラスの標準と同じになる

h4クラスの標準と同じになる

h5クラスの標準と同じになる

h6クラスの標準と同じになる


  <p class="h1">h1クラスの標準と同じになる</p>
  <p class="h2">h2クラスの標準と同じになる</p>
  <p class="h3">h3クラスの標準と同じになる</p>
  <p class="h4">h4クラスの標準と同じになる</p>
  <p class="h5">h5クラスの標準と同じになる</p>
  <p class="h6">h6クラスの標準と同じになる</p>

displayで文字の大きさを変える:display-*


h3(標準)

h3.display-1/font-size:6rem/font-weight:300

h3.display-2

h3.display-3

h3.display-4

h3.display-5

h3.display-6


  <h3>h3(標準)</h3>
  <!-- 高さも変わる、h1よりさらに大きい -->
  <h3 class="display-1">h3.display-1/font-size:6rem/font-weight:300</h3>
  <h3 class="display-2">h3.display-2</h3>
  <h3 class="display-3">h3.display-3</h3>
  <h3 class="display-4">h3.display-4</h3>
  <h3 class="display-5">h3.display-5</h3>
  <h3 class="display-6">h3.display-6</h3>

マーク:mark


mark要素を使って、テキストをハイライト表示させることができます。

定義済みクラス「.mark」を使用してハイライト表示させることもできます。


  <p>mark要素を使って、テキストを<mark>ハイライト表示</mark>させることができます。</p>
  <p>定義済みクラス「.mark」を使用して<span class="mark">ハイライト表示</span>させることもできます。</p>

スモール:small


「small要素」を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。

「smallクラス」を使用してsmall要素とスタイルを一致させることもできます。


  <p><small>「small要素」</small>を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。</p>
  <p><span class="small">「smallクラス」</span>を使用してsmall要素とスタイルを一致させることもできます。</p>

リード文:lead


目立たせたい段落(p.lead)

標準的な段落(p)


  <!-- 標準的なPタグより、文字を目立たせることができる -->
  <p class="lead">目立たせたい段落(p.lead)</p>
  <p>標準的な段落(p)</p>

サブタイトル:text-muted


主タイトル サブタイトル(text-muted)


  <h4>主タイトル <small class="text-muted">サブタイトル(text-muted)</small></h4>

コードの表記:preとcode



    <p>サンプルテキスト</p>
    <p>2行目のサンプルテキスト</p>
  

  <pre><code>
    <p>サンプルテキスト</p>
    <p>2行目のサンプルテキスト</p>
  </code></pre>

インラインのコード表記:code


インラインのコード表示部分を<code>タグで囲みます。

  <div>
    インラインのコード表示部分を<code><code></code>タグで囲みます。
  </div>

引用:blockquote


基本の引用文です。


  <blockquote class="blockquote">
    <p class="mb-0">基本の引用文です。</p>
  </blockquote>

引用の中央寄せ:blockquoteとtext-center


基本の引用文です。

文章の引用元が明示できます。

  <blockquote class="blockquote text-center">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

引用の右寄せ:blockquoteとtext-end


基本の引用文です。

文章の引用元が明示できます。

  <blockquote class="blockquote text-end">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

引用符のフッター表記:figcaptionとblockquote-footer


基本の引用文です。


  <!-- HTML仕様では、ブロック引用符の帰属を blockquoteの外側に配置する必要があります。 -->
  <figure class="text-center">
    <blockquote class="blockquote">
      <p class="mb-0">基本の引用文です。</p>
    </blockquote>
    <figcaption class="blockquote-footer">文章の <cite title="引用元の名前">引用元</cite></figcaption>
  </figure>

略語:abbr


HTML

HTML


  <!-- 略語にカーソルを合わせるとtitleの内容(正式名称)を表示される -->
  <p><abbr title="HyperText Markup Language">HTML</abbr></p>
  <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

HTML5 強調:strongとb


strong要素を使って、テキストを重要なテキストとして太字で表示させることができます。

b要素を使ってテキストを強調表示するテキストとして太字で表示させることができます。


  <p>bttb.jp/bootstrap5/index.php?strkey=strong" class="bg-warning text-dark">strong要素を使って、テキストを<bttb.jp/bootstrap5/index.php?strkey=strong" class="bg-warning text-dark">strong>重要なテキスト</bttb.jp/bootstrap5/index.php?strkey=strong" class="bg-warning text-dark">strong>として太字で表示させることができます。</p>
  <p>b要素を使ってテキストを<b>強調表示するテキスト</b>として太字で表示させることができます。</p>

HTML5 取り消し線:del


del要素のデフォルトスタイルを使って、テキストを削除されたテキストとして取り消し線を表示させることができます。


  <p>del要素のデフォルトスタイルを使って、テキストを<del>削除されたテキスト</del>として取り消し線を表示させることができます。</p>

HTML5 英語を斜体で表示:em


em要素のデフォルトスタイルを使って、テキストを強調したいテキスト(Emphasis text)としてイタリック体または斜体で表示させることができます。


  <p>em要素のデフォルトスタイルを使って、テキストを<em>強調したいテキスト(Emphasis text)</em>としてイタリック体または斜体で表示させることができます。</p>

HTML5 アンダーライン:u


u要素のデフォルトスタイルを使って、テキストをラベル付けされたテキストとして下線を表示させることができます。


  <p>u要素のデフォルトスタイルを使って、テキストを<u>ラベル付けされたテキスト</u>として下線を表示させることができます。</p>

HTML5 取り消し線:s


s要素のデフォルトスタイルを使って、テキストを無効なテキストとして取り消し線を表示させることができます。


  <p>s要素のデフォルトスタイルを使って、テキストを<s>無効なテキスト</s>として取り消し線を表示させることができます。</p>

HTML5 下線:ins


ins要素のデフォルトスタイルを使って、テキストを後から挿入されたテキストとして下線を表示することができます。


  <p>ins要素のデフォルトスタイルを使って、テキストを<ins>後から挿入されたテキスト</ins>として下線を表示することができます。</p>

黒背景に白抜き文字/ユーザインプット表記:kbd


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

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

プログラムからのサンプル出力を示す:samp


This text is meant to be treated as sample output from a computer program.

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

変数の表記:var


y = mx + b

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