メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
Check
in English

タイポグラフィ

グローバル設定、見出し、本文テキスト、リストなど、Bootstrap タイポグラフィのドキュメントと例。

全体設定

Bootstrap は、基本的なグローバル表示、タイポグラフィ、およびリンク スタイルを設定します。さらに制御が必要な場合は、テキスト ユーティリティ クラスを確認してください。

  • 各 OS とデバイスに最適なネイティブ フォント スタックを使用します。font-family
  • より包括的でアクセスしやすいタイプ スケールのために、ブラウザーの既定のルートfont-size(通常は 16px) を使用して、訪問者が必要に応じてブラウザーの既定値をカスタマイズできるようにします。
  • $font-family-base$font-size-base、および$line-height-base属性を、 に適用されるタイポグラフィック ベースとして使用します<body>
  • でグローバル リンクの色を設定し$link-colorます。
  • (デフォルトでは) に$body-bga を設定するために使用します。background-color<body>#fff

これらのスタイルは 内_reboot.scssにあり、グローバル変数は で定義されてい_variables.scssます。で必ず設定$font-size-baseしてくださいrem

見出し

までのすべての HTML 見出し<h1><h6>使用できます。

見出し
<h1></h1> h1. ブートストラップの見出し
<h2></h2> h2. ブートストラップの見出し
<h3></h3> h3. ブートストラップの見出し
<h4></h4> h4. ブートストラップの見出し
<h5></h5> h5. ブートストラップの見出し
<h6></h6> h6. ブートストラップの見出し
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1見出しのフォント スタイルを一致させたいが、関連付けられた HTML 要素を使用できない場合のために、スルー.h6クラスも利用できます。

h1. ブートストラップの見出し

h2. ブートストラップの見出し

h3. ブートストラップの見出し

h4. ブートストラップの見出し

h5. ブートストラップの見出し

h6. ブートストラップの見出し

html
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

見出しのカスタマイズ

付属のユーティリティ クラスを使用して、Bootstrap 3 の小さな二次見出しテキストを再作成します。

色あせたセカンダリ テキストを含む派手な表示見出し

html
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

見出しを表示する

従来の見出し要素は、ページ コンテンツの中で最適に機能するように設計されています。目立たせる見出しが必要な場合は、表示見出しを使用することを検討してください。

ディスプレイ 1
ディスプレイ 2
ディスプレイ 3
ディスプレイ 4
ディスプレイ 5
ディスプレイ 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

表示見出しは、$display-font-sizesSass マップと 2 つの変数、$display-font-weightおよびを介して構成されます$display-line-height

$display-font-family表示見出しは、との 2 つの変数を介してカスタマイズできます$display-font-style

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

を追加して、段落を目立たせ.leadます。

これはリードパラグラフです。通常の段落とは一線を画しています。

html
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

インライン テキスト要素

一般的なインライン HTML5 要素のスタイリング。

マークタグを使用して、ハイライト文章。

このテキスト行は、削除されたテキストとして扱われることを意図しています。

このテキスト行は、もはや正確ではないものとして扱われることを意図しています。

このテキスト行は、ドキュメントへの追加として扱われることを意図しています。

このテキスト行は下線付きでレンダリングされます。

このテキスト行は細字として扱われることを意図しています。

この行は太字で表示されます。

この行は斜体のテキストとして表示されます。

html
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

これらのタグはセマンティックな目的で使用する必要があることに注意してください。

  • <mark>は、参照または表記のためにマークまたは強調表示されたテキストを表します。
  • <small>著作権や法的テキストなどのサイド コメントや小さな活字を表します。
  • <s>関連性がなくなった、または正確でなくなった要素を表します。
  • <u>テキスト以外の注釈があることを示す方法でレンダリングする必要があるインライン テキストのスパンを表します。

テキストのスタイルを設定する場合は、代わりに次のクラスを使用する必要があります。

  • .markと同じスタイルが適用され<mark>ます。
  • .smallと同じスタイルが適用され<small>ます。
  • .text-decoration-underlineと同じスタイルが適用され<u>ます。
  • .text-decoration-line-throughと同じスタイルが適用され<s>ます。

上記には示されていませんが、HTML5 では自由に<b>andを使用してください。重要性を増やさずに単語やフレーズを強調することを目的としていますが、主に音声、技術用語などを対象としています。<i><b><i>

テキストユーティリティ

テキスト ユーティリティカラー ユーティリティを使用して、テキストの配置、変換、スタイル、太さ、行の高さ、装飾、色を変更します。

略語

<abbr>ホバー時に展開されたバージョンを表示するための、略語と頭字語の HTML 要素の様式化された実装。略語にはデフォルトの下線があり、カーソルを合わせたときに追加のコンテキストを提供し、支援技術のユーザーに提供するヘルプ カーソルを取得します。

.initialism若干小さいフォント サイズの省略形に追加します。

属性

HTML

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

ブロッククオート

ドキュメント内の別のソースからコンテンツのブロックを引用する場合。<blockquote class="blockquote">引用符として HTML をラップします。

blockquote 要素に含まれるよく知られた引用。

html
<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

ソースの命名

HTML 仕様では、blockquote 属性を の外側に配置する必要があります<blockquote>。帰属表示を提供する場合は、 でラップ<blockquote>し、 クラスで またはブロック レベルの要素 (例: ) を<figure>使用します。ソース作品の名前も必ずラップしてください。<figcaption><p>.blockquote-footer<cite>

blockquote 要素に含まれるよく知られた引用。

html
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

アライメント

ブロック引用の配置を変更するには、必要に応じてテキスト ユーティリティを使用します。

blockquote 要素に含まれるよく知られた引用。

html
<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

blockquote 要素に含まれるよく知られた引用。

html
<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

リスト

スタイルなし

list-styleリスト項目のデフォルトおよび左余白を削除します(直接の子のみ)。これは直接の子リスト項目にのみ適用されます。つまり、ネストされたリストにもクラスを追加する必要があります。

  • これはリストです。
  • 完全にスタイリングされていないように見えます。
  • 構造的には、まだリストです。
  • ただし、このスタイルは直接の子要素にのみ適用されます。
  • ネストされたリスト:
    • このスタイルの影響を受けません
    • まだ弾丸が表示されます
    • 適切な左マージンを持つ
  • これは、状況によってはまだ便利な場合があります。
html
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

列をなして

リストの箇条書きを削除し、margin2 つのクラス.list-inline.list-inline-item.

  • これはリスト項目です。
  • そしてもう一つ。
  • しかし、それらはインラインで表示されます。
html
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

説明リストの配置

グリッド システムの定義済みクラス (またはセマンティック ミックスイン) を使用して、用語と説明を水平方向に配置します。より長い用語については、オプションで.text-truncateクラスを追加して、省略記号でテキストを切り捨てることができます。

説明リスト
説明リストは、用語を定義するのに最適です。
学期

用語の定義。

そして、いくつかのプレースホルダー定義テキスト。

別の用語
この定義は短いので、余分な段落などはありません。
切り捨てられた用語は切り捨てられます
これは、スペースが狭い場合に役立ちます。最後に省略記号を追加します。
ネスティング
ネストされた定義リスト
あなたは定義リストが好きだと聞きました。あなたの定義リストの中に定義リストを入れさせてください。
html
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

レスポンシブ フォント サイズ

Bootstrap 5 では、レスポンシブ フォント サイズがデフォルトで有効になり、デバイスやビューポートのサイズ全体でテキストをより自然にスケーリングできるようになりました。これがどのように機能するかについては、RFS ページをご覧ください。

サス

変数

見出しには、サイズと間隔のための専用変数がいくつかあります。

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

こことRebootで取り上げるその他のタイポグラフィ要素には、専用の変数もあります。

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

ミックスイン

タイポグラフィ専用の mixin はありませんが、Bootstrap はResponsive Font Sizing (RFS)を使用します。