フォントサイズって何？
フォントサイズとはホームページ上で表示する文字サイズです。
デザイン上ではもちろんですが、パソコン、タブレット、スマホなどデバイスによっても読みやすくする為にもフォントサイズの変更は必須となります。
フォントサイズには単位も色々ありますので、ホームページ作成で使用する主な設定方法をご紹介していきます。
font-sizeで使用する主な単位
ホームページを制作する際にfont-sizeで使用するのは主に以下の単位となります。
よく使う単位
- px
- %
- em
- em
ん？ですよね。
1つじゃないんかい。
実はどれも使用方法によって違ってくるので、後ほどご説明いたします。
「絶対値」と「相対値」
単位によって「絶対値」と「相対値」の設定をする事ができます。
絶対値とは
設定した数値がどんな状態であってもそのサイズから変わらない指定方法。
px
相対値とは
親要素次第でサイズが変化する指定方法。
%、em、rem
cssの記述例
HTML
<p>フォントサイズを設定しよう</p>CSS
p{
font-size: 16px;
}表示例
こう記述すると、フォントサイズが16pxで表示されます。
単位別の使用例
各単位による設定方法をご紹介します。
pxで設定
pxは絶対値指定となりますので、固定デザインで使用するのがオススメ。
レスポンシブ対応デザインには向きません。
<p>フォントサイズを設定しよう</p>p{
font-size: 16px;
}
%で指定
%は相対指定となります。
親要素で指定されているフォントサイズの何％にするか、という指定方法になります。
<p>フォントサイズを設定しよう</p>p{
font-size: 80%;
}
※親要素（※ここではデフォルトの16px）に対して＜p＞要素を80%で表示しています。
emで指定
emは相対指定となります。
親要素で指定されているフォントサイズの何割にするか、という指定方法になります。
単位は違いますが%と使用方法は変わりません。
<p>フォントサイズを設定しよう</p>p{
font-size: 0.8em;
}
※親要素（※ここではデフォルトの16px）に対して＜p＞要素を0.8em(80%)で表示しています。
remで指定
remは相対指定となります。
emにrが追加されただけ、という訳ではありません。
remは親要素に影響されるのではなく、全体（HTML）に設定しているサイズに影響されます。
<p>フォントサイズを設定しよう</p>p{
font-size: 0.8rem;
}
※HTML（※ここではデフォルトの16px）に対して＜p＞要素を0.8rem(80%)で表示しています。親要素から影響は受けません。
単位の違いとフォントサイズの統一性
以下のサイズが同じフォントサイズとなります。
（※デフォルトサイズ）
16px＝100%＝1em＝1rem
全体の16pxを変更する事で、%・em・remのサイズも変動します。
