1. TOP
  2. html&CSS入門
  3. CSSで文字の大きさを変える、font-sizeの使い方を徹底解説

CSSで文字の大きさを変える、font-sizeの使い方を徹底解説

文字の大きさを変更するには、font-sizeプロパティを使います。

h1{
    font-size:文字の大きさ;
}

値には文字の大きさを表す数値やキーワードを指定します。例えば下記のように使うことで、文字の大きさを変更することが出来ます。

h1{
    font-size:26px;
}

大きさの単位

大きさの単位にはいくつか用意されていますが、大きくは、絶対値と相対値に分類されます。

絶対値と相対値

絶対値というのは、「26px」と指定したらシンプルにその大きさになるような指定方法を指します。

一方、相対値というのは割合を指定します。例えば「%」を使った指定では親要素の何%の大きさかというのを指定します。

絶対値で指定

px(ピクセル)

pxで指定すると絶対値指定となるので、必ずその大きさになります。

指定した数値は文字の高さとして計算されます。つまり、font-size:26pxとして場合は、文字の縦幅が26pxになります。

例えば下記のような場合、「.ze」は何ピクセルで表示されるでしょうか?

<!DOCTYPE html>
<html lang="en">
    <head>
          ~略~
    </head>
    <body>
        <p class="ze">絶対値で指定</p>
    </body>
</html>
body{
    font-size: 50px;
}
.ze{
    font-size: 25px;
}

絶対値で指定した場合、親サイズが何pxであろうが結果は変わらないので、正解は25pxです。

相対値で指定

%(パーセント)

親要素に対しての自分がどれくらいの大きさなのかを割合で指定します。

例えば親要素が50pxの時、50%を指定すると、50pxの半分の25pxになります。

では、下記の「.so」は何pxで表示されるでしょうか?

<!DOCTYPE html>
<html lang="en">
    <head>
        ~略~
    </head>
    <body>
        <p class="so">絶対値で指定</p>
    </body>
</html>
body{
    font-size: 50px;
}

.so{
    font-size: 30%;
}

正解は、bodyが50pxでその子要素である「.so」が30%なので、50pxの30%つまり15pxになります。

 そのページ内でfont-sizeを指定していない場合、ブラウザの初期値である16pxを基準に計算されるます。つまり、100% = 16pxになります。

複雑な親子関係に注意が必要

相対値で指定するときに注意しなければならないのは、複雑な親子関係です。

親が50%で指定していて、その子要素が80%、さらに孫要素が80%となっていくと、どれくらいの大きさになるのかわからなくなっていきます。

例えば下記のような場合、「相対値で指定」と書かれた部分は何pxで表示されるのでしょうか?

<!DOCTYPE html>
<html lang="en">
    <head>
        ~略~
    </head>
    <body>
        <p class="so"><span>相対値で指定<span></p>
    </body>
 </html>
body{
    font-size: 50px;
}

.so{
    font-size: 50%;
}

span{
    font-size: 80%;
}

正解は、20pxになります。
body要素は50px、その子要素である.soはその50%の25px、さらにその子要素であるspanは25pxの80%で20pxとなります。

このように、親子関係が深くなっていくと%だと分かりづらくなっていくので注意が必要です。

em(エム)

親要素に対しての自身がどれくらいの大きさなのかを割合で指定します。

1emで親と同じサイズを表します。0.5emで半分、2emで2倍のサイズという意味となります。

例を見てみましょう。
例えば下記のような場合、「相対値で指定」と書かれた部分は何pxで表示されるのでしょうか?

<!DOCTYPE html>
<html lang="en">
    <head>
        ~略~
    </head>
    <body>
        <p class="so"><span>相対値で指定<span></p>
    </body>
</html>
body{
    font-size: 50px;
}

.so{
    font-size: 0.5em;
}

span{
    font-size: 0.8em;
}

正解は、20pxになります。
body要素は50px、その子要素である.soはその0.5emなので25px、さらにその子要素であるspanは25pxの0.8emなので20pxとなります。

そのページ内でfont-sizeを指定していない場合、ブラウザの初期値である16pxを基準に計算されるます。つまり、1em = 16pxになります。

こちらの単位も、親子関係が複雑になると管理が大変になるので注意しましょう。

rem (レム)

remはroot em(ルート エム)の略です。ルートとは最上層を示していて、この場合html要素のことを指します。

つまりemが親要素に対する大きさを示していたのに対し、このremは常にルート(html要素)の文字サイズを基準に大きさを指定します。

例を見てみましょう。

例えば下記のような場合、「相対値で指定」と書かれた部分は何pxで表示されるのでしょうか?

<!DOCTYPE html>
<html lang="en">
    <head>
         ~略~
    </head>
    <body>
        <p class="so"><span>相対値で指定<span></p>
    </body>
</html>
html{
    font-size: 50px;
}

.so{
    font-size: 0.5rem;
}

span{
    font-size: 0.8rem;
}

この場合、spanはhtmlの0.8倍なので、親要素のフォントサイズは一切関係なく、40pxになります。

remは親子関係が複雑になっても、シンプルに文字サイズを指定することができるので便利です。

vh(ブイエイチ)

vhはViewport Height の略で、表示画面の高さを基準に、自身の大きさを割合で指定します。

1vhで高さの1%、5vhで高さの5%になります。

例を見てみましょう。

<!DOCTYPE html>
<html lang="en">
    <head>
         ~略~
    </head>
    <body>
        <p class="vh">vhで指定</p>
    </body>
</html>
.vh{
    font-size: 15vh;
}

ブラウザの縦幅をドラッグして変えると、文字の大きさもそれに合わせて変わっていくのがわかるかと思います。

パソコンやスマホなど、様々なデバイスに対応したレスポンシブデザインなどで活躍しそうな単位です。

vw(ブイダブル)

vwはViewport Widthの略で、表示画面の横幅を基準に、自身の大きさを指定します。

1vw横幅の1%、5vwで画面横幅の5%になります。

例を見てみましょう

<!DOCTYPE html>
<html lang="en">
    <head>
        ~略~
    </head>
    <body>
        <p class="vw">vwで指定</p>
    </body>
</html>
.vw{
    font-size: 15vw;
}

ブラウザの横幅をドラッグして変えると、文字の大きさもそれに合わせて変わっていくのがわかるかと思います。

パソコンやスマホなど、様々なデバイスに対応したレスポンシブデザインなどで活躍しそうな単位です。

キーワードで指定する方法

滅多に使うことはありませんが、キーワードで指定することもできます。

キーワードは下記の7段階の指定が出来ます。

  • xx-small
  • x-small
  • smal
  • medium
  • large
  • x-large
  • xx-large

midiumがブラウザの標準サイズ、つまり16pxになります。

他のサイズは、midiumを基準に1段階ごとに1.2倍ずつサイズが増減します。

オススメの指定方法

実用的なのはpxとremです。それ以外は、一応覚えておいてどうしても使いたいときだけ使うくらいの間隔で良いと思います。

かっちりとサイズを決めたい場合はpx

文字の大きさをかっちり指定したい場合はpxで指定しましょう。px以外の指定方法だと他の要素や画面幅の影響を受けることになります。

px指定には一昔前まで文字が拡大されないバグがありましたが、現在のブラウザでは問題ないので、pxはオススメの指定方法です。

昔あったpx指定のバグとは

ブラウザは、画面を縮小・拡大する機能があります。

画面の縮小・拡大に合わせて、文字のサイズも大きくなったり小さくなったりするのが望ましいですが、IE9(Internet Explorer 9)にはpx指定した文字サイズは、画面を拡大しても文字サイズが変わらないという仕様がありました。

このバグがあったため、%やemで指定しようと考える人も多かったのですが、最近ではIE9自体がほとんど使われていないためpxで指定しても特に問題は無いと考えています。

レスポンシブなサイトならrem

remの良いところは、htmlに指定している文字サイズを変えれば、他のremで指定している場所も変わるということです。

例えば、PCとスマホで文字サイズを変えたい場合、pxで指定していればあらゆる要素にサイズを設定する必要があります。

remであればhtmlのフォントサイズ1箇所を直すだけで、自動的に割合が計算されるので、調整が楽になるケースがあるでしょう。

そういった場合はremを使うのがおすすめです。

 単位はなるべく統一しましょう

いずれにしても、一つのサイトの中にpxやremが混在していると、解読が難しくなり、変更するときなどに苦労することになります。

最初にフォントサイズの単位はどれを使うか決めて、どれかに統一するのが理想的です。

まとめ

  • font-sizeはpxかremを使うのがオススメ
  • かっちりと指定したい場合であればpx
  • レスポンシブWEBデザインであればremを使うのもあり
  • 他の方法も用途に合わせて使えるようになんとなく覚えておく