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

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

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

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

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

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

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

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

.lead クラスを使って文字サイズを大きくする

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

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


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

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

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

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


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

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

カスタマイズ用CSSで文字サイズを調整する

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

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

「lead」クラスの値を変更する

例えば、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;
}

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