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

システム
エンジニア

Bootstrapでフォントサイズを変更したいのですがどうすればいいですか。

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

見出しならh1～h6タグで、リード文を使用すれば文字を強調できます。

Bootstrapでのfont sizeの変更方法

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

 

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

見出し

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

 

.h1～.h6 クラスも使用できます。
<p class=“h1”>h1. This is Bootstrap h1</p>
<p class=“h2”>h2. This is Bootstrap h2</p>
<p class=“h3”>h3. This is Bootstrap h3</p>
<p class=“h4”>h4. This is Bootstrap h4</p>
<p class=“h5”>h5. This is Bootstrap h5</p>
<p class=“h6”>h6. This is Bootstrap h6</p>

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

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を変更して、ルート要素の文字サイズを変更できます。

システム
エンジニア

なるほど。CSSでもフォントサイズを変更できるのですね。

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

メリハリのあるページを作成するためにも、フォントサイズには重要です。

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

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

 

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

 

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

 

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