font-sizeを指定する際、pxを利用することが多いのですが、emという単位も同じぐらいよく使われる単位ですよね。あまり使わなかっていなくてよく知らなかったので、今回は「px」ではなく「em」で指定する方法を書きたいと思います。

CONTENTS

• 1.emとは？
• 2.px単位の値をemに変換する方法
• 3.margin、paddingの指定
• 4.em単位のメリット

1.emとは？

emとはアルファベットの大文字”M”を基準とした値相対単位です。1emが1文字分の高さとなります。

よく使われるpxと比較すると

• px：1pxを1とし、ディスプレイの解像度に依存し、どの画面でも1px。
• em：文字サイズを1となり、親要素のfont-sizeの値が1となる。

つまり、親要素のfont-sizeが14pxならば、その子要素は1emが14pxになります。

2.px単位の値をemに変換する方法

px単位をem単位に変換する場合は以下の計算式を使います。

emに変換したいpx値÷基準となるfont-sizeのpx値

基準となるfont-sizeが14pxの場合1emが14pxとさきほど言いました。これが2emになると何pxになるでしょう。正解は28pxになります。3emだと42pxになります。また小さくしたい場合は0.5emだと7pxになります。このように基準となる値に合わせて値が変化していきます。

3.margin、paddingの指定

このemの値でmarginやpaddingを指定する場合は、marginやpaddingを指定する要素のfont-sizeが基準となります。よってその要素のfont-sizeが2emの場合、2emがmarginにとっての1emになります。前項の例で基準を14pxに設定したとすると2emだと28pxになるので、その要素にmarin-bottom:0.5emを設定した場合、pxに変換すると28px（1em）の半分で14pxとなります。

4.em単位のメリット

これでem単位の理解が深まったかと思いますが、正直どのように利用するかはこの記事を書き始めるまでピンときていませんでした。em単位は基本的にhtmlなどのfont-sizeを基準とすることで、ホームページ全体のfont-sizeを一度に変えることができるんですね。なのでレスポンシブサイトを作る際に、メディアクエリでhtml要素のフォントサイズを変更してあげれば画面に合わせたフォントサイズの設計をすることができ、ユーザーの可読性をあげるというメリットがあると思います。

参考書籍：レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック (Web Professional Books)