Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Typography (タイポグラフィ)

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

目次

Global settings

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

これらのスタイルは _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を追加して目立たせることができます。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>

これらのタグは意味を表す目的で使用する必要があることに注意してください。

テキストのスタイルを整えたい場合は、代わりに以下のクラスを使用してください。

上記には示していませんが、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"> を利用します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Naming a source

引用元を記載するには <blockquote class="blockquote"> , <cite> を利用します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Alignment

引用の配置を変更するには, text utilities(テキストユーティリティ) を使用します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<figure class="text-right">
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Lists

Unstyled

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Inline

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Description list alignment

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

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

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Responsive font sizes

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