【Bootstrap】タイポグラフィ（見出し、本文、リストなど）の使用方法

今回は、Bootstrapにおけるタイポグラフィの使用方法を紹介します(^^)

見出し
リード
インラインテキスト要素
1. small 要素と small クラス
2. mark 要素と mark クラス
引用
リスト

見出し

見出し要素（<h1>～<h6>）には、Bootstrapのスタイルが設定されています。

Bootstrapを使っていないときと使ったときのスタイルを比較してみましょう。
（ブラウザはGoogle Chromeです）

Bootstrapを使っていないとき↓

使ったとき↓

やはりBootstrapのスタイルの方が見やすく整っていますね。

また、h1～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>

リード

見出しではなく、通常の段落内のテキストを目立たせる場合は lead クラスを追加して、テキストを大きく表示することができます。

  <p class="lead">目立たせたい文章</p>
  <p>標準となる文章</p>

インラインテキスト要素

small 要素と small クラス

small 要素を使うとテキストを小さなサイズで表示することができ、他の要素に small クラスを使うことで同じスタイルを適用することができます。

  <p><small>small 要素</small></p>
  <p class="small">small クラス</p>
  <p>標準となる文章</p>

mark 要素と mark クラス

mark 要素を使うことでテキストをハイライト表示することができ、他の要素に mark クラスを使うことで同じスタイルを適用することができます。

  <p><mark>mark 要素</mark></p>
  <p class="mark">mark クラス</p>
  <p>標準となる文章</p>

引用

引用文の表示

blockquote 要素でマークアップし、blockquote クラスを追加することで引用文をつくることができます。

  <p>標準となる文章</p>
  <p><blockquote class="blockquote">これは引用文です。</blockquote></p>

引用元の表示

引用元の表示をするには、blockquote 要素の footer 要素に blockquote-footer クラスを追加し、引用元の名前を cite 要素としてマークアップします。

  <blockquote class="blockquote">
    <p>これは引用文です。</p>
    <footer class="blockquote-footer">引用元は<cite title="XXX">XXX</cite>です。</footer>
  </blockquote>

引用文の整列

引用文を中央揃え・右揃えするには、text-center クラス・text-right クラスを追加します。

  <p>では中央揃えの引用文を見てみましょう。</p>
  <blockquote class="blockquote text-center">
    <p>これは引用文です。</p>
    <footer class="blockquote-footer">引用元は<cite title="XXX">XXX</cite>です。</footer>
  </blockquote>
  <br>
  <p>では右揃えの引用文を見てみましょう。</p>
  <blockquote class="blockquote text-right">
    <p>これは引用文です。</p>
    <footer class="blockquote-footer">引用元は<cite title="XXX">XXX</cite>です。</footer>
  </blockquote>

リスト要素（ul、ol）に list-unstyled クラスを追加することで、デフォルトで設定されているリストマーカーと左のパディングを削除することができます。

入れ子のリスト要素にも同様な処理をしたい場合は同クラスを追加する必要があります。

  <p>デフォルト</p>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3
      <ul>
        <li>項目3-1</li>
        <li>項目3-2</li>
        <li>項目3-3</li>
      </ul>
    </li>
  </ul>
  <br>
  <p>list-unstyled クラス追加</p>
  <ul class="list-unstyled">
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3
      <ul class="list-unstyled">
        <li>項目3-1</li>
        <li>項目3-2</li>
        <li>項目3-3</li>
      </ul>
    </li>
  </ul>

リストの横並び

リスト要素に list-inline クラス、li 要素に list-inline-item クラスを組み合わせることで、リスト項目を横並びにすることができます。

  <ul class="list-inline">
    <li class="list-inline-item">項目1</li>
    <li class="list-inline-item">項目2</li>
    <li class="list-inline-item">項目3</li>
  </ul>

定義リスト

定義リスト（dl、dt、dd）に row クラスや col クラスを追加して、dt 要素と dd 要素を水平に揃えることができます。

また、文字が長くなるときは text-truncate クラスを追加することで省略することができます。

  <dl class="row">
    <dd class="col-3">用語1</dd>
    <dd class="col-9">用語1の説明</dd>
    <dd class="col-3">用語2</dd>
    <dd class="col-9 text-truncate">用語2の説明は少し長くなりそうですが、どうか最後までお付き合いください。</dd>
    <dd class="col-3">用語3</dd>
    <dd class="col-9">用語3の説明</dd>
  </dl>

今回は以上になります。

ご覧いただきありがとうございました(^^)
続きはこちら↓