emとex、pxとptの違いは何?

emとexでは基準にする文字の高さ、pxとptは基準にする細かさが違います。

emは1文字、exは小文字xが基準。pxは画面表示の1点分、ptは1/72インチです。

CSSで利用される単位のemexは、どちらも文字サイズを基準にした大きさです。emは現在のフォントサイズを基準にしているのに対して、exは欧文の小文字のxの高さを基準としています。文字の大きさを基準とした単位なので、段落の行頭を1文字分下げたい、というときや、文章を特定の文字数で折り返すようにしたいときに利用すると便利です。日本語のホームページでは、exよりもemを利用することをお勧めします。

pxptは、どちらも精密な大きさを指定するときによく利用されます。1pxはパソコンなどの画面表示の点1つの大きさと同じです。画面の細かさに対応しているので、正確に大きさを指定することができます。
ptは、印刷技術で利用されてきた単位で、ワープロソフトなどの文字サイズ指定でもおなじみですね。パソコンで利用する場合、1ptは1/72インチ、0.352778mmです。画面の細かさが1インチ当たり72ピクセルであれば、pxと同じ大きさになりますが、標準的なパソコンの画面の細かさは1インチ当たり96ピクセルですから、単位当たりの大きさが異なります。画面表示が中心のホームページではptは使いづらい単位です。

初期設定の文字サイズ

特に指定していないときにブラウザで表示される文字の大きさは、日本語の場合だと16px、あるいは12pt、1emと指定した場合と同じです。文字サイズを変更する場合は、この値を基準に大きさを検討すると良いでしょう。

カテゴリー: CSS, HTMLの基礎知識, ナレッジノート   パーマリンク