Bootstrapで文字サイズを変更する方法を解説！
この記事では、Bootstrapで文字サイズを変更する方法を解説いたします！Bootstrapでは自分自身でフォントサイズをカスタムしたい場合には、独自にカスタマイズ用CSSを作成し、文字サイズを調整する必要があります。
Bootstrapで文字サイズを変更したい！
Bootstrapを使っている際に、度々文字サイズを変更したい時が訪れます。
今回は、Bootstrapのクラスで簡単に文字サイズを変更する方法や、フォントサイズをカスタマイズする方法をサンプルコード付きで紹介しますので皆さん是非参考にして下さい。
Bootstrapで文字サイズを変更する方法
1. h1〜h6を使う
Bootstrapで文字サイズを変更したい場合にはh1〜h6のタグで見出しの大きさを設定することが出来ます。
すべてのHTMLの見出しはh1〜h6を使用出来ます。
下記のサンプルコードを見て下さい。
またh1〜h6はクラスとしても使用することが出来ます。
HTMLクラス
<body>
<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>
</body>
このようにタグでスタイルをかえると、HTMLのタグには文章上の意味がありますのでSEOにも影響が出てきます。
一方でclass属性をかえる分には影響は無いため、このやり方を採用するのであれば後者の方法がおすすめです。
2. display-*を使う
またBootstrapでdispaly-*のクラスを使用することによって見出しを表示することが出来ます。
しかし、従来の見出しより大きく、少し見にくい場合もあるので注意が必要です。
3. leadクラス
leadは文章の小見出しを記載する際に使うクラスです。
.leadはfont-size: 1.25rem;、font-weight: 300;が適用されているので、少し大きく太くなっており文字を目立たせる役目があります。
このようにBootstrapで用意されているクラスを使うことで、ある程度文字サイズをコントロールすることが可能になります。
もしご自身で文字サイズをもっと自由にカスタマイズしたい場合は次の章を参考にしましょう。
Bootstrapで文字サイズをカスタマイズする方法
自分自身でフォントサイズをカスタムしたい場合には、独自にカスタマイズ用CSSを作成し、文字サイズを調整する必要があります。
（※独自にカスタマイズ用CSSを作成した際は、CSSの優先順位の問題によりBootstrapのCSSファイルよりも後に読み込むようにして下さい。）
このようにご自身のCSSが適用され、文字サイズを自由にコントロールすることが出来ます。
一方で、文字サイズを制御するのが
- Bootstrap
- ご自身のCSS
