Skip to main content Skip to docs navigation
Bootstrapの新しいバージョンがあります。

Typography (タイポグラフィ)

見出し,本文,リストなどの例です。

Global settings

Bootstrapは文字に関するスタイル(文字の大きさや, リンクスタイル)を設定しています。カスタマイズが必要な場合は textual utility classes を参照してください。

  • OSやデバイスに最適な font-family を適用します。 native font stack
  • 包括的でアクセシブルなタイプのスケールを実現するために、ブラウザの標準の font-size ( 16px ) を想定しています。
  • <body> には $font-family-base, $font-size-base, $line-height-base 属性を適用しています。
  • $link-colorを使用してグローバルリンクの色を設定します。
  • $body-bg を使用して、<body>background-color を設定します(デフォルトでは #fff)。

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

Headings

HTML の見出し <h1> から <h6> が利用可能です。

Heading Example
<h1></h1> h1. Bootstrap heading
<h2></h2> h2. Bootstrap heading
<h3></h3> h3. Bootstrap heading
<h4></h4> h4. Bootstrap heading
<h5></h5> h5. Bootstrap heading
<h6></h6> h6. Bootstrap heading
<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 から .h6 クラスも利用できます。これは、見出しのフォントスタイリングを一致させたいが、関連する HTML 要素を使用できない場合に利用できます。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<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>

Customizing headings

utility classes を利用して下記のような見出しを作成できます。

Fancy display heading With faded secondary text

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

Display headings

見出しを目立たせる必要がある場合は、display headingを使用することを検討してください。

Display 1
Display 2
Display 3
Display 4
Display 5
Display 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 headingsは $display-font-size Sassマップと、$display-font-weight$display-line-height という2つの変数によって設定されます。

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

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead

.leadを追加して目立たせることができます。

This is a lead paragraph. It stands out from regular paragraphs.

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

Inline text elements

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

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<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><i> を自由に使ってください。<b> は追加の重要性を伝えずに単語やフレーズを強調するためのもので、<i> は主に音声や専門用語などのためのものです。

Text utilities

text utilitiescolor utilities で、テキストの整列、変形、スタイル、太さ、線の高さ、装飾、色を変更できます。

Abbreviations

<abbr> 要素で、略語と頭字語を表します。ホバーした際に省略されていないテキストを表示します。 デフォルトで下線が引かれ、ホバーしたときや支援技術のユーザーに追加の文脈を提供するためのヘルプカーソルが表示されます。

文字サイズを少し小さくするための略語に .initialism を追加できます。

attr

HTML

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

Blockquotes

文章に外部ソースからのコンテンツやブロックを引用する場合は <blockquote class="blockquote"> を利用します。

A well-known quote, contained in a blockquote element.

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

Naming a source

HTML仕様では、ブロック引用符の帰属を <blockquote>の外側に配置する必要があります。アトリビューションを提供するときは、 <blockquote><figure>でラップし、 .blockquote-footer<figcaption> またはブロックレベル要素(例:<p>)を使用します。 ソース作品の名前も必ず <cite>で囲んでください。

A well-known quote, contained in a blockquote element.

<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>

Alignment

引用の配置を変更するには, text utilities を使用します。

A well-known quote, contained in a blockquote element.

<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>

A well-known quote, contained in a blockquote element.

<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>

Lists

Unstyled

list-style, margin-left は削除されています。(直後の子のみ)

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
<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>

Inline

箇条書きの黒丸がなくなり, .list-inline , .list-inline-item により margin が適用されます。

  • This is a list item.
  • And another one.
  • But they're displayed inline.
<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>

Description list alignment

グリッドシステム(または semantic mixins )を使用して, 用語と説明リストを水平方向に配置します。 文字が長い場合は場合は .text-truncate クラスを追加してテキストを省略できます。

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.
<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>

Responsive font sizes

Bootstrap 5では、デフォルトでレスポンシブフォントサイズを有効にして、デバイスやビューポートのサイズに合わせてテキストをより自然に拡大縮小できるようにしました。これがどのように動作するかについては、RFS page を見てみてください。

Sass

Variables

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

$headings-margin-bottom:      $spacer / 2;
$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;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

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

$mark-padding:                .2em;

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

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

Mixins

There are no dedicated mixins for typography, but Bootstrap does use Responsive Font Sizing (RFS).