GitHubで表示

タイポグラフィ

Bootstrapのタイポグラフィに関するドキュメントと例。グローバル設定、見出し、本文、リストなどが含まれます。

グローバル設定

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

  • 各OSとデバイスに最適なfont-familyを選択するネイティブフォントスタックを使用します。
  • よりインクルーシブでアクセシブルなタイポグラフィスケールを実現するために、ブラウザのデフォルトのルートfont-size（通常は16px）を使用しています。そのため、訪問者は必要に応じてブラウザのデフォルトをカスタマイズできます。
  • $font-family-base、$font-size-base、および$line-height-base属性を、<body>に適用されるタイポグラフィベースとして使用します。
  • $link-colorを使用してグローバルリンクの色を設定し、:hoverのみにリンクの下線を適用します。
  • $body-bgを使用して、<body>にbackground-color（デフォルトでは#fff）を設定します。

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

見出し

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

見出し 例
<h1></h1> h1. Bootstrap 見出し
<h2></h2> h2. Bootstrap 見出し
<h3></h3> h3. Bootstrap 見出し
<h4></h4> h4. Bootstrap 見出し
<h5></h5> h5. Bootstrap 見出し
<h6></h6> h6. Bootstrap 見出し 
<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>

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

h1. Bootstrap 見出し

h2. Bootstrap 見出し

h3. Bootstrap 見出し

h4. Bootstrap 見出し

h5. Bootstrap 見出し

h6. Bootstrap 見出し

<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の小さなセカンダリ見出しテキストを再現します。

装飾的な見出し 薄いセカンダリテキスト

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

ディスプレイ見出し

従来の見出し要素は、ページコンテンツの主要部分で最適に機能するように設計されています。目立つ見出しが必要な場合は、**ディスプレイ見出し**（大きく、少し意見の強い見出しスタイル）の使用を検討してください。これらの見出しはデフォルトではレスポンシブではありませんが、レスポンシブフォントサイズを有効にすることができます。

ディスプレイ 1
ディスプレイ 2
ディスプレイ 3
ディスプレイ 4 
<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>

リード

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

これはリード段落です。通常の段落よりも目立ちます。

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

インラインテキスト要素

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

markタグを使用してテキストを強調表示できます。

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

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

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

このテキスト行は下線付きで表示されます

このテキスト行は、細かい活字として扱われます。

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

この行は斜体で表示されます。

<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クラスも、タグがもたらす不要な意味的影響を回避しながら、<mark>と<small>と同じスタイルを適用するために使用できます。

上記には示されていませんが、HTML5では<b>と<i>を自由に使用してください。<b>は、追加の重要性を伝えることなく単語やフレーズを強調表示することを目的としており、<i>は主に音声、専門用語などに使用されます。

テキストユーティリティ

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

略語

略語と頭字語のHTMLの<abbr>要素のスタイル付き実装。ホバー時に展開バージョンを表示します。略語にはデフォルトで下線が引かれ、ホバー時や支援技術のユーザーに追加のコンテキストを提供するためのヘルプカーソルが表示されます。

フォントサイズを少し小さくするには、略語に.initialismを追加します。

属性

HTML

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

blockquote

ドキュメント内の別のソースからのコンテンツブロックを引用するには、引用として任意のHTMLを<blockquote class="blockquote">で囲みます。

blockquote要素に含まれる有名な引用。

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

出典の明記

ソースを識別するために、<footer class="blockquote-footer">を追加します。ソース著作物の名前を<cite>で囲みます。

blockquote要素に含まれる有名な引用。

出典の有名人
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

配置

必要に応じてテキストユーティリティを使用して、blockquoteの配置を変更します。

blockquote要素に含まれる有名な引用。

出典の有名人
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

blockquote要素に含まれる有名な引用。

出典の有名人
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

リスト

スタイルなし

リストアイテムのデフォルトのlist-styleと左マージンを削除します（直下の子要素のみに適用）。**これは直下の子リストアイテムにのみ適用されます**。つまり、ネストされたリストにもクラスを追加する必要があります。

  • これはリストです。
  • 完全にスタイルが適用されていません。
  • 構造的には、まだリストです。
  • ただし、このスタイルは直下の子要素にのみ適用されます。
  • ネストされたリスト
    • はこのスタイルの影響を受けません
    • はまだ箇条書きが表示されます
    • 適切な左マージンがあります
  • これは、状況によっては役に立つ場合があります。
<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>

インライン

.list-inlineと.list-inline-itemの2つのクラスを組み合わせて、リストの箇条書きを削除し、軽いmarginを適用します。

  • これはリストアイテムです。
  • もう1つです。
  • ただし、インラインで表示されます。
<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>

説明リストの配置

グリッドシステムの定義済みクラス（またはセマンティックmixin）を使用して、用語と説明を水平方向に配置します。長い用語の場合は、必要に応じて.text-truncateクラスを追加して、テキストを省略記号で切り捨てることができます。

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

用語の定義。

さらにプレースホルダーの定義テキスト。

別の用語
この定義は短いので、追加の段落などはありません。
切り捨てられた用語は切り捨てられます
これは、スペースが限られている場合に役立ちます。最後に省略記号が追加されます。
ネスト
ネストされた定義リスト
定義リストが好きだと聞きました。定義リストの中に定義リストを入れてみましょう。
<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>

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

v4.3.0以降、Bootstrapにはレスポンシブフォントサイズを有効にするオプションが付属しており、テキストがデバイスとビューポートのサイズに合わせてより自然にスケーリングできるようになりました。RFSは、$enable-responsive-font-sizes Sass変数をtrueに変更し、Bootstrapを再コンパイルすることで有効にできます。

RFSをサポートするために、Sass mixinを使用して通常のfont-sizeプロパティを置き換えます。レスポンシブフォントサイズは、レスポンシブスケーリング動作を有効にするために、remとビューポート単位を組み合わせたcalc()関数にコンパイルされます。RFSとその構成の詳細については、GitHubリポジトリをご覧ください。