Bootstrapでのfont sizeの変更方法の紹介｜font sizeの変更しよう！

システム
エンジニア

Bootstrapでfont sizeの変更をするにはどうすればよいのでしょうか。

プロジェクト
マネージャー

見出しや副見出し、表示見出しなどで装飾することで、font sizeを変更できます。詳しい方法を解説しますので、一緒に見ていきましょう。

Bootstrapでのfont sizeの変更方法

今回は、Bootstrapでのfont sizeの変更方法について説明します。
見出しや副見出し、表示見出しなどで装飾することで、font sizeを変更できます。
また、リード文を使用すれば文字を大きいサイズに、smallを使用すれば文字を小さいサイズにできます。CSSからfont sizeを変更することもできます。

用途に応じてfont sizeを変更し、メリハリのあるページを作成できます。
Bootstrapでのfont sizeの変更方法に興味のある方はぜひご覧ください。

見出し

Bootstrapでは、h1～h6タグで見出しを指定できます。
また、.h1～.h6 クラスも使用できます。

実行結果は以下のようになります。

See the Pen
bootstrap_fontsize1 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではh1～h6タグで見出しを指定できます。

副見出し

Bootstrapでは、text-mutedクラスを付けて副見出しのように使用できます。

実行結果は以下のようになります。

See the Pen
bootstrap_fontsize5 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではtext-mutedクラスを付けて副見出しのように使用できます。

表示見出し

Bootstrapでは、display1～display6で表示見出しを指定できます。

実行結果は以下のようになります。

See the Pen
bootstrap_fontsize2 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではdisplay1～display6で表示見出しを指定できます。

リード文

Bootstrapでは、リード文を使用すれば、文字を強調できます。
また、文の途中でもリード文にすることができます。

実行結果は以下のようになります。

See the Pen
bootstrap_fontsize3 by kskumd (@kskumd)
on CodePen.

Bootstrapでは、リード文を使用すれば文字を強調できます。
また、文の途中でも使用できます。

スモールサイズ

Bootstrapでは、smallを使用すれば、文字を小さいサイズにできます。

実行結果は以下のようになります。

See the Pen
bootstrap_fontsize6 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapでは、smallを使用すれば、文字を小さいサイズにできます。

文字サイズの変更

CSSを変更して、ルート要素の文字サイズを変更できます。

実行結果は以下のようになります。

See the Pen
bootstrap_fontsize4 by kskumd (@kskumd)
on CodePen.

このように、CSSを変更して、ルート要素の文字サイズを変更できます。

システム
エンジニア

見出しや副見出しなどでタグを使用するとfont sizeの変更ができることを理解できました。

プロジェクト
マネージャー

自分の好みに合わせて、実際にfont sizeを変更してみましょう。

Bootstrapでfont sizeを正しく変更しよう

いかがでしたでしょうか。

Bootstrapでのfont sizeの変更方法について説明しました。
見出しや副見出し、表示見出しなどで装飾することで、font sizeを変更できます。
また、リード文を使用すれば文字を大きいサイズに、smallを使用すれば文字を小さいサイズにできます。

CSSからfont sizeを変更することもできます。

用途に応じてfont sizeを変更し、メリハリのあるページを作成できます。
ぜひご自身でソースコードを書いて、理解を深めてください。