[css]フォントのサイズを変えてみよう

今回は、フォントのサイズを変更する方法をご紹介したいと思います。
文字の大きさを変更することで、主張したい文字とそれに対する説明など情報に強弱をつけることができますね。
そんな文字サイズをどうやって変更するのかをご紹介したいと思います。

フォントサイズを変えるためのhtmlを用意します

フォントサイズを変更するための、htmlを用意します。
今回は、小さい文字と中くらいのサイズの文字と大きな文字の３個を用意してみましょう。

<p class="moji_small">フォントサイズが小さい</p>
<p class="moji_middle">フォントサイズが中くらいの大きさ</p>
<p class="moji_large">フォントサイズが大きい</p>

上記のhtmlに対して、cssで文字のサイズを設定して行こうと思います。

cssを使ってフォントサイズを変えてみよう

フォントサイズをcssで変更するには、font-sizeというものを使用します。

名前の通りfont-sizeなので非常に覚えやすいですね。
ではcssを当てて文字のサイズを上記のhtmlに当てて行こうと思います。

<style>
 .moji_small{
   font-size:10px;
 }
 .moji_middle{
    font-size:18px;
 }
 .moji_large{
    font-size:30px;
 }
</style>
<p class="moji_small">フォントサイズが小さい</p>
<p class="moji_middle">フォントサイズが中くらいの大きさ</p>
<p class="moji_large">フォントサイズが大きい</p>

文字サイズをcssで設定したサンプル実装例

フォントサイズが小さい

フォントサイズが中くらいの大きさ

フォントサイズが大きい

上記のように、 font-sizeをpxで変更することで、小さい文字から大きな文字まで変更することができます。
情報の強弱に合わせて文字の大きさを変更してあなたのサイトをより良いものにしてくださいね。

まとめ

今回は、cssでfont-sizeを変更する方法をご紹介させていただきました。
基本的な設定ですが、情報の強弱やデザインでの文字のサイズのバランスって難しいですよね。様々に文字のサイズをコントロールすることでデザイン性や、情報の伝えやすさが変わりますね。