.net column

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

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

公開日時:   更新日時:
Bootstrapでのfont sizeの変更方法の紹介|font sizeの変更しよう!
基本情報技術者試験の試験対策はこちら>>
SE
Bootstrapでfont sizeの変更をするにはどうすればよいのでしょうか。
PM
見出しや副見出し、表示見出しなどで装飾することで、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を変更して、ルート要素の文字サイズを変更できます。

SE
見出しや副見出しなどでタグを使用するとfont sizeの変更ができることを理解できました。
PM
自分の好みに合わせて、実際にfont sizeを変更してみましょう。

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

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

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

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

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


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

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

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

Search

Popular

reccomended

Categories

Tags