.net column
.NET開発者のためのブログメディア

Bootstrapでのfont sizeの変更方法の紹介|font sizeの変更しよう!

2021年03月09日
SE
Bootstrapでフォントサイズを変更したいのですがどうすればいいですか。
PM
見出しなら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を変更して、ルート要素の文字サイズを変更できます。

SE
なるほど。CSSでもフォントサイズを変更できるのですね。
PM
メリハリのあるページを作成するためにも、フォントサイズには重要です。

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

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

 

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

 

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

 

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags