Bootstrapで文字サイズを変更する方法を解説!

この記事では、Bootstrapで文字サイズを変更する方法を解説いたします!Bootstrapでは自分自身でフォントサイズをカスタムしたい場合には、独自にカスタマイズ用CSSを作成し、文字サイズを調整する必要があります。

コンテンツ [表示]

  1. 1Bootstrapで文字サイズを変更したい!
  2. 2Bootstrapで文字サイズを変更する方法
  3. 3Bootstrapで文字サイズをカスタマイズする方法

Bootstrapで文字サイズを変更したい!

Bootstrapを使っている際に、度々文字サイズを変更したい時が訪れます。

今回は、Bootstrapのクラスで簡単に文字サイズを変更する方法や、フォントサイズをカスタマイズする方法をサンプルコード付きで紹介しますので皆さん是非参考にして下さい。

Photo byPexels

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は文章の小見出しを記載する際に使うクラスです。

.leadfont-size: 1.25rem;font-weight: 300;が適用されているので、少し大きく太くなっており文字を目立たせる役目があります。

このようにBootstrapで用意されているクラスを使うことで、ある程度文字サイズをコントロールすることが可能になります。

もしご自身で文字サイズをもっと自由にカスタマイズしたい場合は次の章を参考にしましょう。

Bootstrapで文字サイズをカスタマイズする方法

自分自身でフォントサイズをカスタムしたい場合には、独自にカスタマイズ用CSSを作成し、文字サイズを調整する必要があります。
(※独自にカスタマイズ用CSSを作成した際は、CSSの優先順位の問題によりBootstrapのCSSファイルよりも後に読み込むようにして下さい。)

このようにご自身のCSSが適用され、文字サイズを自由にコントロールすることが出来ます。

一方で、文字サイズを制御するのが

  • Bootstrap
  • ご自身のCSS
と2箇所になりますので、CSSとしては複雑化し、メンテナンス性が損なわれる面もあります。せっかくBootstrapを使っているのでカスタマイズもしすぎないように気をつけましょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。