はじめに

WordPressなどでHTMLやCSSを使用していると、文字の大きさを指定したい場面は多いと思います。その際は「font-size」を指定すればよいのですが、指定のためには「px」や「em」などの単位などがあり、その意味がよくわからないという方も多いのではないでしょうか。

今回は「font-size」で文字の大きさを指定するときの方法について、紹介したいと思います。

なお、説明の前に断わっておきますが、文字の大きさは利用者が使う端末やモニター、さらにブラウザやその設定などによって大きく変わり、また、PCのウェブブラウザで簡単にページを拡大する方法でも述べましたが、利用者が文字の大きさを変えることもできます。そのため、すべての利用者に思った大きさで表示することは不可能、と思っていたほうがよいでしょう。

font-sizeで文字の大きさを指定する方法

font-sizeで文字の大きさを指定する方法はいくつかありますが、大きく4つに分類されます。

  • 絶対値で指定する
  • 相対値で指定する
  • 絶対サイズで指定する
  • 相対サイズで指定する

そのうち、「絶対値」「絶対サイズ」は、環境によって決まった特定の値を基準としているのに対し、「相対値」「相対サイズ」は親要素の値を基準としています。親要素がよくわからないという方は、イメージとしては「まわりの文字の大きさを基準」と考えてください。ただし、正確なところは検索いただいたほうが良いと思います。

文字の大きさを絶対値で指定する方法

文字の大きさを絶対値で指定するには、以下の方法があります。

「px」で指定する

コンピュータを使っていると、画面の表示で例えば「1280×800」「1920×1080」といった数値を聞いたことはないでしょうか。これは「px」「ピクセル」と呼ばれる単位を基準にした表現で、「1280×800」なら「画面に横に1280px、縦に800px分の表示がされる」といった意味になります。

この「px」はfont-sizeの絶対値指定でもよく使用します。例えば、「font-size:16px」と指定すれば「1文字当たり縦に16px、横に16px使う」という意味になります。ただし、文字には縦に長いものや横に長いものがありますので、必ず縦横16pxすべて使うわけではない点は注意ください。

「pt」で指定する

絶対値指定には「pt」という単位も使われます。基本的には「1px=0.75pt」となりますが、環境によっては「1px=1pt」となる場合もあるようです。

文字の大きさを相対値で指定する方法

文字の大きさを相対値で指定するには、以下の方法があります。

「%」で指定する

「%」は、親要素の文字サイズの何%で表示するかを指定します。例えば、親要素の1.5倍で表示する場合は「font-size:150%」と指定します。

「em」で指定する

「em」とは、親要素の文字サイズを1としたときの単位です。例えば、親要素の1.5倍で表示する場合は「font-size:1.5em」と指定します。

「ex」で指定する

「ex」とは、親要素の「x」の高さを1としたときの単位です。だいたい「1em=2ex」となります。

文字の大きさを絶対サイズで指定する方法

文字の大きさを絶対サイズで指定するには、「xx-small」「x-small」「small」「medium」「large」「x-large」「xx-large」の7種類の中から指定します。

これは、環境によって定められた基準となる文字サイズを「medium」とし、それぞれ文字を小さくまたは大きくします。具体的には以下のようになります。

xx-smallmediumの約0.58(1/1.728)倍
x-smallmediumの約0.69(1/1.44)倍
smallmediumの約0.83(1/1.2)倍
medium基準の値
largemediumの1.2倍
x-largemediumの1.44倍
xx-largemediumの1.728倍

文字の大きさを相対サイズで指定する方法

文字の大きさを相対サイズで指定するには、「smaller」「larger」の2種類の中から指定します。

これは、親要素の文字サイズを基準として、小さくしたい場合は「smaller」(約0.83倍)、大きくしたい場合は「larger」(1.2倍)を指定します。

まとめ

以上、font-sizeで文字の大きさを指定する方法について紹介させていただきました。

文字の大きさを指定する方法はいろいろあり、どうすればよいか悩んでしましがちです。皆さんもいろいろ試してみて、自分のページにあった大きさを探してみてください。ただし、はじめに述べたとおり利用者によってどうしても見え方は変わってしまいますので、あまりこだわりすぎないようにもしましょう。





おすすめの記事