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 クラスも使用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<h1>h1. This is Bootstrap h1</h1> <h2>h2. This is Bootstrap h2</h2> <h3>h3. This is Bootstrap h3</h3> <h4>h4. This is Bootstrap h4</h4> <h5>h5. This is Bootstrap h5</h5> <h6>h6. This is Bootstrap h6</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クラスを付けて副見出しのように使用できます。
|
1 2 3 4 5 6 |
<h1>h1 <small class="text-muted">This is Sub h1</small></h1> <h2>h2 <small class="text-muted">This is Sub h2</small></h2> <h3>h3 <small class="text-muted">This is Sub h3</small></h3> <h4>h4 <small class="text-muted">This is Sub h4</small></h4> <h5>h5 <small class="text-muted">This is Sub h5</small></h5> <h6>h6 <small class="text-muted">This is Sub h6</small></h6> |
実行結果は以下のようになります。
See the Pen
bootstrap_fontsize5 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではtext-mutedクラスを付けて副見出しのように使用できます。
表示見出し
Bootstrapでは、display1～display6で表示見出しを指定できます。
|
1 2 3 4 |
<div class="display-1">This is Bootstrap display-1</div> <div class="display-2">This is Bootstrap display-2</div> <div class="display-3">This is Bootstrap display-3</div> <div class="display-4">This is Bootstrap display-4</div> |
実行結果は以下のようになります。
See the Pen
bootstrap_fontsize2 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではdisplay1～display6で表示見出しを指定できます。
リード文
Bootstrapでは、リード文を使用すれば、文字を強調できます。
また、文の途中でもリード文にすることができます。
|
1 2 |
<p class="lead">This is lead class.</p> This is not lead. <span class="lead">This is lead class.</span> This is not lead. |
実行結果は以下のようになります。
See the Pen
bootstrap_fontsize3 by kskumd (@kskumd)
on CodePen.
Bootstrapでは、リード文を使用すれば文字を強調できます。
また、文の途中でも使用できます。
スモールサイズ
Bootstrapでは、smallを使用すれば、文字を小さいサイズにできます。
|
1 2 |
<p class="small">This is small class.</p> This is not small. <span class="small">This is small class.</span> This is not small. |
実行結果は以下のようになります。
See the Pen
bootstrap_fontsize6 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapでは、smallを使用すれば、文字を小さいサイズにできます。
文字サイズの変更
CSSを変更して、ルート要素の文字サイズを変更できます。
|
1 2 3 4 |
html { /* ルート要素の文字サイズを変更する */ font-size: 14px; } |
実行結果は以下のようになります。
See the Pen
bootstrap_fontsize4 by kskumd (@kskumd)
on CodePen.
このように、CSSを変更して、ルート要素の文字サイズを変更できます。
Bootstrapでfont sizeを正しく変更しよう
いかがでしたでしょうか。
Bootstrapでのfont sizeの変更方法について説明しました。
見出しや副見出し、表示見出しなどで装飾することで、font sizeを変更できます。
また、リード文を使用すれば文字を大きいサイズに、smallを使用すれば文字を小さいサイズにできます。
CSSからfont sizeを変更することもできます。
用途に応じてfont sizeを変更し、メリハリのあるページを作成できます。
ぜひご自身でソースコードを書いて、理解を深めてください。
