Bootstrap4 - 文字サイズを小さくしたり、大きくしたりする方法

Bootstrap4 を使ってコーディングしている時に、文字サイズを変更したい場合が多々あります。

ここでは、文字サイズを変更する際に Bootstrap4のクラスを使ったり、独自にカスタマイズしたりする方法を紹介します。

HTML要素を使って文字サイズを小さくする

HTML要素の１つとして、small 要素があります。

small 要素で囲まれた部分は文字が小さくなります。

ただし small 要素は免責事項、著作権表記のように短いテキスト部分を前提として使用します。長い文章セクションを丸々 small 要素で囲むのはやめた方がいいでしょう。

長い文章の文字サイズを小さくしたい場合は、後述する「CSSのカスタマイズ」を使用します。

Bootstrap4 のクラスの１つに「lead」クラスがあります。

「lead」クラスのスタイル設定は次のようになっています。


.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

文字サイズが「1.25rem」、太さが「300」なので、少し大きくて太い文字になります。

「リード」なので、文章の小見出しのようなリード文に対して付加するクラスです。

「lead」クラスは次のような使い方になります。


<div>
  <p class="lead">ここにリード文が入ります</p>

  <p>ここに本文が入ります。</p>
</div>

small 要素や、lead クラスのデフォルト値で物足りない場合は、独自にカスタマイズ用CSSを作成し、文字サイズを調整します。

読み込む順番としてカスタマイズ用CSSファイルは、BootstrapのCSSファイルよりも後に読み込むようにしてください。

例えば、lead クラスの文字サイズを「1.25rem」ではなく、「1.3rem」にしたい場合は、「（例）custom.css」などの独自CSSファイルに次のように記述します。


.lead {
  font-size: 1.3rem;
}

これで lead クラスの文字サイズが上書きされます。

自分で独自にクラスを定義して、スタイルを設定するのもありです。

例として文字サイズを小さくするための「font-small」クラスや、大きくするための「font-large」クラスを定義してみます。


.font-small {
  font-size: 0.9rem;
}

.font-large {
  font-size: 1.1rem;
}

このように自分でクラスを作成することで、好きなように文字サイズを調整することができます。