CSSのemとは？
CSSは、HTML言語で用いるスタイルシートを表します。スタイルシートは文書の色やフォント・サイズおよびレイアウトを設定し、見栄えを良くするための記述言語です。
CSSは起源をさかのぼると、1994年欧州原子核研究機構（CERN）に勤務する技術者が提唱したもので、レイアウト設定を行う際の考え方は欧文の組版技術からヒントを得ています。そのため、em（エム）とは組版で用いる長さの単位を表します。emは大文字のMを基準としたサイズ表記が由来となっており、Mの高さを基準とする意味で用います。
またemは何かの略と思ってしまいますが、そうではなく単純にMの読み方そのものを指します。なお、HTMLの<EM>タグはEmphasisの略で、テキストを強調する際に使用しますがCSSのemとは異なるものです。
CSSにおけるemは、フォントサイズを指定する際に一般的に用いる方法です。具体的な違いについては、以降で説明します。
CSSで用いるフォントサイズの単位は？
CSSでフォントサイズを指定するには、以下の3通りの指定方法があります。
・相対値で指定する方法 相対値で指定する場合は親要素と比較してサイズが決定します。 指定はem、exが該当します。 ・パーセント値で指定する方法 パーセント値で指定する場合はある基準に対する比率を指定します。 ・絶対値で指定する方法 絶対値で指定する場合は相対関係は影響せず固定設定となります。 指定はpx、pt、pc、in、cm、mmが該当します。
以降でさらに詳しくフォントサイズ方法を見ていきましょう。
フォントサイズを相対値で指定する方法は？
フォントサイズを相対値で指定する方法は、em、exがあります。
・emによる指定 現行のフォントサイズを1とした場合のサイズを指定します。 利用者がブラウザでサイズを拡大・縮小した場合でもサイズが追従するメリットがあります。 指定方法： p { font-size: 0.8em; } ・exによる指定 使用するフォントの小文字の “x”の高さを基準とした指定方法です。 日本語では和文を多用するため、通常は欧文指定のexは用いません。 指定方法： p { font-size: 1.2ex; }
この他にも、このあと絶対値の項目で説明するpxについても画面解像度に対して相対的な指定となります。そのためpxを相対値の分類に含めることもあります。
フォントサイズをパーセント値で指定する方法は？
フォントサイズをパーセント値で指定する場合も相対値指定可能です。 指定方法： p { font-size: 120%; }
なお、1em＝フォントサイズ100%が成り立ちますのでパーセント値で指定するほか、em値を指定することもできます。
フォントサイズを絶対値で指定する方法、pxの変換方法は？
フォントサイズを相対値で指定する方法は、px、pt、pc、in、cm、mmがあります。この場合は固定サイズとなるため、事前に決められているサイズを設定する際に用います。
pxによる指定は以下の通りです。 ・pxによる指定 このして方法もCSSで頻繁に用いられている指定方法で、ピクセル値で指定します。 ピクセル値で指定しますので最も精密に表示指定できます。 1px＝1/96インチです。 指定方法： p { font-size: 16px; }
pxによる指定はディスプレイ解像度が低い場合は表示が収まらないこともあるため、対象となる端末で確認が必要です。なお、最近のブラウザではフォントサイズ変更に対応できるものもあります。 ここで、emとpxの関係について補足しておきます。emの単位は使用するフォントサイズを基準としています。通常フォントは16px・12ptなため、フォントサイズを指定していない場合は1emは16pxです。
次にpt、pc、in、cm、mmの指定は以下の通りです。指定方法は数値に単位を追記するものでpxと同等の記載方法にしたがいます。pxの変換方法として理解しておきましょう。 ・ptによる指定 ポイント数を指定します。 1pt＝1/72インチです。 ・pcによる指定 Picas（パイカ）数を指定します。 1pc＝1/6インチ、12ptです。 ・inによる指定 インチ数を指定します。 1in＝2.54センチメートル、96pxです。 ・cmによる指定 センチメートル数を指定します。 1cm＝1/2.54インチ、96/2.54pxです。 ・mmによる指定 ミリメートル数を指定します。
なお、組版印刷では絶対値指定は非常に重要ですが、ウェブブラウザ表示を基本とするCSSではほとんど用いることがありません。理由としては、修正等のメンテナンスに工数がかかるためです。
emとremの関係は？
emと同等の指定方法で、remがあります。一方のemは親要素を基準としたフォントサイズ指定となります。つまり、フォントを指定することでそのサイズが1emの基準単位となります。
他方のremはルート要素のフォントサイズを基準とします。そのため未指定（デフォルト状態）の時は、1em＝16pxが成り立ちますし、階層が深いフォント指定の基準として利用することができます。
なお、remはIE8以前のブラウザではサポートされていないため、バージョン差異による表示の違いについては事前に確認しておくことをおすすめします。
emを用いた使用例は？
emの使い方が理解できたところで、使用例を見ていきましょう。
使用例： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="sample_css.css"> <title>日記帳</title> </head> <body> <h1>私の備忘録</h1> <h2>買い物</h2> <p>昨日野菜を買いに行きました。うっかり<span>エコバック</span>を忘れてしまいました。</p> </body> </html> sample_css.cssの内容： h2 { color: blue; font-size: 1.2em; } p { color: green; font-size: 0.8em; } span { color: red; font-size: 1.5em; } 表示例：
この例では、h2要素に1.2emを設定しています。同様にp要素に0.8em、span要素に1.5emを設定しています。emは親要素のフォントサイズを相対指定しいるため、親子関係がシンプルな場合はこのまま利用できます。
remを用いた使用例は？
次に、remの使用例を見ていきましょう。
使用例： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="sample_css.css"> <title>日記帳</title> </head> <body> <h1>私の備忘録</h1> <h2>買い物</h2> <p>昨日野菜を買いに行きました。うっかり<span>エコバック</span>を忘れてしまいました。</p> </body> </html> sample_css.cssの内容： html { font-size: 1em; } body { font-size: 2em; } h2 { color: blue; font-size: 1.2em; } p { color: green; font-size: 1.1em; } span { color: red; font-size: 2.5rem; } 表示例：
この例では、HTML文書は変更せずにCSSファイルのみ修正しました。span要素のみrem値を指定し、それ以外はem値を指定しました。理解を深めるために意図的にサイズを大きく指定しています。ここで例示した各要素のフォントサイズを確認してみましょう。
・html要素 1emですので16px相当のサイズです。 この値がルート要素の設定サイズとなります。 ・body要素 親要素の2倍のem値を指定しました。 ・h2要素 親要素がbody要素となりますので、親要素2em値x指定した1.2em値＝2.4em値となります。 ・p要素 親要素がbody要素となりますので、親要素2em値x指定した1.1em値＝2.2em値となります。 ・span要素 ルート要素基準となりますので、ルート要素1emx指定した2.5rem値＝2.5em値となります。
上記の通り、em値では親要素の設定値により影響を受けてしまいます。rem値はルート要素を基準としていますので影響がありません。そのため親子関係が複雑な文書ではルート要素を基準としたremで指定するのも効率的です。
pxとem値の使い分けは？
フォントサイズ指定方法となるpxは絶対値で指定し、em値は相対値で指定します。
pxはドキュメントを忠実に再現するため、百科事典や美実品紹介・DTP等に適しています。emは拡大・縮小に追従するため、モバイル端末やスマートフォンで表示する際に便利です。したがって、どちらか一方を利用するよりも適材適所で使い分けたり、併用したりすることをおすすめします。
CSSのフォントサイズ指定で統一デザインのウェブコンテンツ作成をすすめましょう
近年スマートフォンやモバイル端末の利用は加速しているため、小さい画面での見栄えが重要になってきています。
このように、CSSのem指定はモバイル端末での指定に最適です。CSSのフォントサイズ指定が理解できたら、実際にCSSスタイルシートを作成し見栄えの調整を進めましょう。複数のウェブコンテンツにCSSを適用することで統一感のあるデザインが実装できるため、とてもおすすめです。
新着記事やエンジニアに役立つ情報をお届け！
日々のキャッチアップをお手伝いします！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
