どうも！ニシドラ(@nishidorablog)です。
この記事では、font-sizeプロパティについて解説します。
WEBサイトを開いたときに、「文字」は閲覧者に様々な情報や印象を与えるデザイン要素です。
そんな文字のデザインを装飾するときに使うのが「font-sizeプロパティ」です。
font-sizeプロパティとは、文字のサイズを指定するときに使うプロパティで、主に4つの単位で指定することができます。
font-sizeプロパティでよく使う主な値と使い方、注意点について解説していきます。
当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説をしています。
font-sizeプロパティとは
「font-sizeプロパティ」は、文字のサイズを変更するときに指定します。
文字の大きさの指定には「px」「%」「em」「rem」の4つの単位を使います。
font-sizeプロパティで使う4つの値
font-sizeプロパティで使う主な4つの単位について解説します。
「px」「%」「em」「rem」の4つです。
「px」は「 絶対値 」と呼ばれ、指定したサイズから変わることはありません。
また、「%」「em」「rem」は「相対値」と呼ばれ、親要素を基準にして文字サイズを指定します。
px(ピクセル)
「px(ピクセル)」は、画面上の最小単位である1ピクセルを基準にした単位です。
当サイトでは基本的に20pxで記事を書いていて1pxと比べてみると、少し見づらいですが下画像のようになります。
「px」はデフォルト表示だと「16px」です
%(パーセント)
「%(パーセント)」は、親要素のサイズを基準にして割合で指定する単位です。
下のようなコードがあったとします。
このコードでは、divタグの中にpタグが2つ要素として入っています。
<p>要素1</p>
<p>要素2</p>
</div>
divタグの文字サイズが16pxだった場合、pタグを50%に指定すると親要素であるdivタグの50%、つまりpタグは8pxで表示されます。
em(エム)
「em(エム)」は、「%」と同じような考え方で、親要素のサイズを基準にして割合で指定する単位です。
emでは「100% = 1」というような考え方で、親要素の半分の大きさに指定したい場合は「0.5em」というように指定します。
rem(レム)
「rem(レム)」は「root + em」という意味です。
「root」とは「ルート要素＝html要素」のことで、htmlタグを親要素として指定します。
remで指定する場合、親要素であるhtmlタグに指定されている文字サイズを参照します
htmlタグの文字サイズを100%で指定されている場合、2remで指定すると200%、つまり、36pxの大きさで文字サイズが表示されます。
font-sizeプロパティの使い方
次にfont-sizeプロパティの使い方の解説と単位の指定方法の復習をします。
<div>
<h1>font-size：2remで指定</h1>
<h2>font-size：24pxで指定</h2>
<p class=”font-1″>font-size：70%で指定</p>
<p class=”font-2″>font-size：0.7emで指定</p>
</div>
html { font-size: 100%; }
div { font-size: 20px; }
h1 { font-size: 2rem; }
h2 { font-size: 24px; }
.font-1 { font-size: 700%; }
.font-2 { font-size: 0.7em; }
左のようなコード(html)があります。
右のコード(CSS)では、それぞれのタグ・クラスにfont-sizeが指定してあります(htmlタグにも100% = 16pxが指定)。
「h1」には「2rem」を指定してます。
htmlタグに指定している「100%」を参照して100%(16px)の2倍である、「32px」のサイズで表示されます
「h2」には「24px」を指定しているので、「24px」のサイズで表示されます。
「p」にはそれぞれ、「font-1」「font-2」というクラス名を付けています。
font-sizeプロパティで「70%」と「0.7em」を指定していますが、参照するのは親要素であるdivタグです。
「div」には「20px」が指定されているので、20pxを基準にすると「70%」「0.7em」の値は「14px」のサイズで表示されます。
結果をブラウザで見てみましょう(下画像)。
こんな感じで「font-sizeプロパティ」を使います。
font-sizeプロパティを使うときの注意点
適切な文字サイズで使う
文字サイズは適切なサイズで指定しましょう。
大きすぎ・小さすぎだと読みにくくなります。
一般的なWEBサイトでは「 14~18px 」程度のサイズで設定されています。
また、指定する文字サイズは2~5つほどにまとめましょう。
これ以上多くなってしまうと統一感がなくなり読みにくくなります。
ジャンプ率を意識する
ジャンプ率とは「見出しと本文の文字サイズの比率」のことです。
ジャンプ率を高くすることで「躍動感や大胆、楽しい」というような印象を与え、低くすることで「落ち着いた、上品、高級感」というような印象を与えます。
まとめ
font-sizeプロパティについて解説してきましたがいかがでしたか？
ここまで読んでくれた方はわかると思いますが、そこまで難しくありません。
しかし、文字サイズを指定する単位が複数あり、初めは複雑そうに思うかもしれませんが勉強していくとわかるようになります。
今回解説した注意点を意識して文字サイズを変えてみてください。
次回は、font-weightプロパティについて、【font-weightプロパティ】CSSで文字の太さを変更する方法で解説します。
コメント