CSSの値の単位「px、em、pt、%」など

CSSの「width、height、margin、padding、font-size」といったプロパティにおいて「値」を入力しますが、その際に数値が0の場合を除き「単位」を指定する必要があります。

#main {
    width: 500px;
    font-size: 1.4em;
    padding: 10px;
    }

この場合、mainというエリア内では、横幅が500px、フォントサイズが1.4em、余白が10pxという事になりますが、この「px」や「em」というのが「単位」になります。

値として良く使われるのは、「px」「em」「pt」「%」などですが、他にも色々な値を指定することができます。

相対的な単位

  • px・・・ピクセルで表し、ディスプレイの解像度に依存する
  • em・・・フォントサイズを1とした時の倍率
  • ex・・・小文字のxの高さを1とした時の倍率

相対的な単位は、パソコンやブラウザの環境によって文字のサイズが変わります。

20pxの文字

2emの文字

3exの文字

絶対的な単位

  • cm・・・センチ
  • mm・・・ミリ
  • in・・・インチ
  • pt・・・ポイント
  • pc・・・パイカ

絶対的な単位は、パソコンやブラウザの環境に影響されず同じ大きさで表示されます。

1cmの文字

10mmの文字

0.3inの文字

30ptの文字

2pcの文字

パーセント指定

  • %・・・パーセント

値はパーセントで指定することもできます。パーセント指定した場合、他の値との相対的な大きさになります。

p {
    font-size: 20px;
}

p strong {
    font-size: 120%;
}

例えばこのようなCSSを設定した場合、pタグが20pxになり、pタグ内にあるstrongタグが20pxの1.2倍に当たる24pxになります。

フォントサイズのpxとem

フォントサイズをpxで指定した場合、ブラウザの文字サイズ変更をしてもフォントサイズが変わりません。そのため、フォントサイズはpxではなくemで指定するのが良いとされています。

しかし、最近のブラウザは文字サイズ変更ではなく、サイト全体を拡大縮小する機能が付いており、この機能を使った場合、px指定していてもフォントサイズが変わります。そういったこともあり、最近はフォントサイズをpx指定しても問題ないという意見が多くなっているようです。

ちなみに最近のホームページのフォントサイズは大きくなる傾向にあり、読んで貰いたい文章の場合、14pxや16pxが一般的になっています。サイトによっては、18pxや20pxというのも見かけます。

サイトのデザインや横幅、行間、フォントの種類などによっても適切なフォントサイズは変わってきますので、一概にどのサイズが良いとは言えませんが、個人的に読みやすいと感じるのは、14pxや16pxです。

昔は12pxのサイトが多かったのですが、パソコンの画面サイズが大きくなり、サイトの横幅も1,000pxを超えることも珍しく無くなったことで、フォントサイズも大きめになっています。12pxでも特に問題はないのですが、ユーザーにストレス無く読んでもらうという意味では、14pxか16pxぐらいが良いと思います。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年2月19日

サブコンテンツ

このページの先頭へ