ブログの文字サイズを決めるときに、px・emという記号が出てきます。

px・emをどのように使い分ければ良いのか？

px・emについて、調べてみました。



☆ pxとは

コンピュータで画像を表示するときの色情報を表す最も小さな単位のことをいいます。
パソコン、スマホなどの画面には小さな四角がいっぱい敷き詰められています。
画面の四角１マスを１pxといいます。

☆ emとは

文字の高さを基準にしている単位のことをいいます。
１文字分の単位のことをいいます。

emの由来は、大文字の『M』から来てるようです。
大文字の『M』はタテとヨコに均等にたくさんの空間を占めるということで、文字サイズの基準に使われてきたようです。

今は、emを文字の高さと同じ幅という使い方をしています。

☆ pxとemの変換について

１em＝１６px

pxとemの変換について調べるなら、このサイトが便利です。
⇒ http://pxtoem.com/

ブログでは、あらかじめCSS（スタイルシート）というところで、基準になる文字サイズを決めています。

ほとんどは、pxで設定してあるようです。

pxは、絶対単位といわれていて、どんな環境で見ても文字サイズが変わらないんです。

ブログの基準になる文字サイズが１６pxに設定されていれば、ブログで文字サイズを決めるときに、１emを選べば、１６pxになるということです。




ブログの基準になる文字サイズ

⇒ style="font-size:16px;"

px・em・100%のＨＴＭＬタグはそれぞれ下の通りです。

<span style=font-size:16px">１６px・１em・１００%はすべて同じ文字サイズ！</span>


<span style=font-size:1em">１６px・１em・１００%はすべて同じ文字サイズ！</span>


<span style=font-size:100%">１６px・１em・１００%はすべて同じ文字サイズ！</span>

表示結果

１６px・１em・１００%はすべて同じ文字サイズ！

１６px・１em・１００%はすべて同じ文字サイズ！

１６px・１em・１００%はすべて同じ文字サイズ！

px・em・100%、すべて同じ文字サイズになっていますね。




文字サイズや余白などの設定にはemを使ったほうがわかりやすいですね。



１emは一文字ですからね。





最後まで読んでいただき、ありがとうございます。