ホームページの装飾はHTMLではなくてCSSで設定することがわかってきた。文字の色を変えることができたら、次は文字のサイズを変えたいな。
自分でホームぺージを作ろうとすると、やりたいことはどんどん増えますよね。
今回はCSSで文字の大きさを変えるにはどうしたらいいのか、文字サイズの単位にはどのようなものがあるのかについて説明します。
文字サイズを変えるfont-sizeプロパティ
CSSで文字のサイズを変えるには、font-size（フォントサイズ）プロパティを使います。
以前のHTMLには文字の大きさに関する属性がありましたが、現在は非推奨のタグです。
まずセレクターで文字のサイズを変えたい場所を指定し、値の部分で文字のサイズを数値と単位で指定します。
上記のCSSは、「h1の部分の、文字サイズを、20pxに変える」という意味があります。
文字サイズを変えるときに使う単位とは
フォントサイズプロパティで指定する単位によって、ブラウザで表示される文字のサイズが変わります。よく使われる単位は次の4つのです。
- px
- ％
- em
- rem
これまであまり見たことがなかった単位もあるかもしれません。ひとつずつ見ていきましょう。
文字サイズの単位：pxって何ですか？
px（ピクセル）とは、画像（画面）を構成する最小単位のことです。デジタル画面は小さい点が集まってできていて、その1つの点が1pxです。なので、文字サイズを10pxで指定するのは、文字の高さが10pxのサイズという意味です。
Microsoft社のWordやExcelを使うとき、文字の大きさを「pt（ポイント）」という単位で指定しますよね。「1px＝0.75pt」です。
pxで指定するのは、数値が体感的にわかりやすいメリットがあります。しかし、ブラウザでの表示をイメージして数値を指定すると、スマートフォンでは文字が大きく見えすぎてしまったり、逆に小さすぎて読みにくくなってしまったりするデメリットもあります。
文字サイズの単位：％って何ですか？
％（パーセント）は、親要素の文字の大きさを基準に、割合で指定する方法です。親要素の文字サイズの何％の大きさにする、という意味になります。
％を使って指定した場合、親要素の文字サイズが変わると、子要素の文字サイズもあわせて変化します。
文字サイズの単位：emって何ですか？
em（エム）とは、親要素に対して変化する相対的なサイズ指定です。
たとえば、HTMLのなかで親要素になる場所の文字サイズをCSSで「10px」に指定していたら、「1em＝10px」になります。「20px」に指定していた場合は「1em＝20px」になります。
もし、親要素の文字の大きさをCSSで指定していない場合は、ブラウザの規定文字サイズが16pxになっているので、「1em＝16px」になります。
文字サイズの単位：remって何ですか？
rem（レム）とは、「root em（ルートエム）」の略で、親要素に依存しないhtmlのルート要素を基準としたサイズ指定です。
ブラウザの初期設定が16pxなので「1rem＝16px」です。なので「10px＝0.625rem」のように、pxでイメージする数値にあわせると複雑な数字になってしまうので、
html { font-size : 62.5% }のように最初にルート要素の文字サイズをCSSで指定しておくと、「10px＝1.6rem」となり、わかりやすい数字になります。
レスポンシブ対応に適しているので、よく使われるようになってきている単位です。
その他：キーワードで文字サイズを指定する
キーワードで指定する方法もあります。キーワードには7段階があり、小さい方から順に並べると、
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
mediumが標準の大きさです。
上記のほかにも、親要素の文字に対して1段階小さいサイズを指定する「smaller」、1段階大きいサイズを指定する「larger」という指定方法もあります。
CSSで文字サイズを変える練習
CSSで文字サイズを変更してみましょう。今回は「rem」を使うことにします。
【HTML記述例】
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSで文字のサイズを変える</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h1>CSSで文字のサイズを3.0rem＝30pxに変える</h1>
<h2>CSSで文字のサイズを2.4rem=24pxに変える</h2>
<p>文字のサイズが初期値の16pxの62.5%=10pxになる</p>
</body>
</html>
【CSS記述例】
/*ルートの文字のサイズをremで計算しやすいように設定する*/
html{
font-size: 62.5%;
}
/*h1の文字のサイズをremで指定して3.0rem=30pxに変える*/
h1{
font-size: 3.0rem;
}
/*h2の文字のサイズをremで指定して2.4rem=24pxに変える*/
h2{
font-size: 2.4rem;
}
CSS適用後のHTMLファイルをブラウザで開いて確認してみましょう。
<p>タグの部分はCSSで何も指定していないのに、文字が小さくなりましたよね。
/*ルートの文字のサイズをremで計算しやすいように設定する*/
html{
font-size: 62.5%;
}
CSSのこの部分が反映されているため、htmlのデフォルトの文字の大きさが「16pxの62.5％＝10px」になったからです。
h1やh2は、CSSで何も指定しなかったときのデフォルトの文字サイズよりも大きく表示されていると思います。
うまくいったでしょうか？
まとめ
今回はCSSで文字サイズを変更する方法と文字サイズの単位について説明しました。
CSSで文字の色を変える方法については別の記事で解説しましたので、ぜひあわせて参考にしてみてください。
日常生活でこれまであまり目にしなかったかもしれない「rem」という単位については、慣れるために練習することが第一歩です。
HTMLについて全く知らなかった最初のころ、CSSと聞いても何のことか全くイメージができなかった最初のころより、確実に成長しています！これからも一緒に少しずつやってきましょう！
