かんたんCSS em, rem, フォントサイズ単位の使い方

CSSのサイズ指定でよく使われるのは、px, %, em, remです。CSS3からem, remが追加されました。

まだ、em, remとpx, %の違い、どこで使うのか分からない人のために、ソースコードのサンプルを入れながら、かんたんに分かりやすく説明します。

絶対値指定のpx、相対値（倍率）指定の%

px（ピクセル）は、PC, タブレット, スマホの画面の単位です。

画面に表示する単位なので、値を指定すると確実にそのサイズで表示されます。

最近のデジカメでは画素数ともいいますね？

一方、%は親の要素のサイズに影響されます。『親の要素の○○%』と指定するからです。

em,remは、%指定がグレードアップしたもの

em,remは、CSS3から導入された新しい相対値指定の単位です。

初心者でも分かる解説。CSSってなんだ？ CSS3とは？

tadtadya.com

em（エム）は、出版・印刷業界にある単位で、『M』に由来があります。

Mは、アルファベット一文字のなかで一番正方形に近いので、一文字の幅・高さのサイズの基準になりました。

%の基準値は親の要素の同じ項目（プロパティ）のサイズですが、emは親の要素のフォントサイズ（font-size）が基準です。

親のフォントサイズが16pxのとき、1em = 16pxです。

1remは、ウェブページの基本フォントサイズで、htmlタグで指定したフォントサイズです。

remは『root em』の略です。

html {
    font-size: 16px;
}

基本フォントは16pxが多いので、ほとんどは1rem = 16pxになります。

なぜ、フォントサイズの基準が必要になったのか？

なぜ、%だけではダメだったのでしょうか？ ここには、レスポンシブデザインが関係しています。

近年は、PC, タブレット, スマホなど、サイズの違う端末（デバイス）で同じWebページを見ることが当たり前です。

%指定では親の要素に影響されるので、HTMLのタブが階層化されるほど、どれが基準なのか分からなくなっていました。

また、サイズのちがう端末で、それぞれバランスの良い配置・サイズのデザインをひとつのCSSファイルで作れるものが必要でした。

Webページは、アートなど特定の分野を除いて文字が主体です。文字を基準にすると、読みやすくバランスの取れたデザインが作りやすいです。

そこから、フォントサイズを基準にした単位が作られました。

em,remのサンプルコード

em,remのサンプルコードを見てみましょう。

<div class="content content-a"><span>コンテンツA</span></div>
<div class="content content-b fontsize-1"><span>コンテンツB</span></div>
<div class="content content-c fontsize-2"><span>コンテンツC</span></div>

<span>タグはそれ自体に意味はありません。囲ったものにスタイルを設定するためのタグです。

.content {
    color: #fff;
    text-align: center;
}
.content-a {
    background: #7fc2ef;
}
.content-b {
    background: #d685b0;
}
.content-c {
    background: #dbe159;
}
.fontsize-1 {
    font-size: 20px;
}
.fontsize-2 {
    font-size: 24px;
}

結果が見やすいように色をつけたのと、フォントサイズを変えるクラスを追加しました。

HTMLの結果です。

spanタグのフォントサイズは未指定なので、文字列のフォントサイズは、親のボックスのフォントサイズです。

ここで、spanタグのフォントサイズにem, rem指定をします。CSSに次のものを追加して、HTMLを変更します。

.em-half {
    font-size: 0.5em;
}
.em-1 {
    font-size: 1em;
}
.em-2 {
    font-size: 2em;
}
.rem-half {
    font-size: 0.5rem;
}
.rem-1 {
    font-size: 1rem;
}
.rem-2 {
    font-size: 2rem;
}

<div>em</div>
<div class="content content-a"><span class="em-half">A em half</span></div>
<div class="content content-b fontsize-1"><span class="em-half">B em half</span></div>
<div class="content content-c fontsize-2"><span class="em-half">C em half</span></div>
<div>rem</div>
<div class="content content-a"><span class="rem-half">A rem half</span></div>
<div class="content content-b fontsize-1"><span class="rem-half">B rem half</span></div>
<div class="content content-c fontsize-2"><span class="rem-half">C rem half</span></div>
<hr />
<div>em</div>
<div class="content content-a"><span class="em-1">A em 1</span></div>
<div class="content content-b fontsize-1"><span class="em-1">B em 1</span></div>
<div class="content content-c fontsize-2"><span class="em-1">C em 1</span></div>
<div>rem</div>
<div class="content content-a"><span class="rem-1">A rem 1</span></div>
<div class="content content-b fontsize-1"><span class="rem-1">B rem 1</span></div>
<div class="content content-c fontsize-2"><span class="rem-1">C rem 1</span></div>
<hr />
<div>em</div>
<div class="content content-a"><span class="em-2">A em 2</span></div>
<div class="content content-b fontsize-1"><span class="em-2">B em 2</span></div>
<div class="content content-c fontsize-2"><span class="em-2">C em 2</span></div>
<div>rem</div>
<div class="content content-a"><span class="rem-2">A rem 2</span></div>
<div class="content content-b fontsize-1"><span class="rem-2">B rem 2</span></div>
<div class="content content-c fontsize-2"><span class="rem-2">C rem 2</span></div>

HTMLの結果です。

emでは、バランスを崩さずにフォントサイズを変更できました。remでは、基準のフォントサイズが同じなので、A,B,Cの大きさは同じです。

そして、divのサイズ変更は無視されています。

emは、同じことが%でもできます。

em, remの使いどころサンプル

『それなら%でいいじゃないか？』と言われそうですが、em,remは、『font-size』以外でも使えます。

たとえば、コンテンツのmarginやpadding、アイコン画像のサイズなどです。

サンプルコードで見てみましょう。（emだけのサンプルです。）

CSSに次のものを追加して、HTMLを変更します。

.set-padding {
    padding: 1.5em;
}

<div class="content content-a"><div class="em-half set-padding">コンテンツA</div></div>
<div class="content content-b fontsize-1"><div class="em-half set-padding">コンテンツB</div></div>
<div class="content content-c fontsize-2"><div class="em-half set-padding">コンテンツC</div></div>
<hr />
<div class="content content-a"><div class="em-1 set-padding">コンテンツA</div></div>
<div class="content content-b fontsize-1"><div class="em-1 set-padding">コンテンツB</div></div>
<div class="content content-c fontsize-2"><div class="em-1 set-padding">コンテンツC</div></div>
<hr />
<div class="content content-a"><div class="em-2 set-padding">コンテンツA</div></div>
<div class="content content-b fontsize-1"><div class="em-2 set-padding">コンテンツB</div></div>
<div class="content content-c fontsize-2"><div class="em-2 set-padding">コンテンツC</div></div>

spanタグは余白が設定できないのでdivに変えます。

次がHTMLの結果です。

フォントサイズと余白のサイズが同じ比率で大きくなるのが分かります。ボタンなどで使われます。

このように、フォントサイズとその周りの文字いがいのコンテンツとのバランスを保ちながら、サイズを変えることができます。

PCとスマホで、それぞれバランスを考えるのは2倍の労力です。

（ノートPC、タブレットを入れるとさらに増えます。）

2倍の費用を出してくれるクライアントはいません。

（おそらく激ギレされます。）

そして作る側もきついです。こういうところでレスポンシブ対応をします。

em,remの使いどころ

em, remの使いどころのポイントは『文章まわり』です。

です。その中で、本文とのバランスが必要なものはremを使います。

といったところです。その他はemを使います。

サンプルコードで見てみましょう。

CSSに次のものを追加して、HTMLを変更します。

.content-d {
    font-size: 0.8rem;
    margin: 2em;
    padding: 0 0.8rem;
    border: 2px solid rgba(0,0,0,0.5); 
}
.h-com {
    margin: 2rem auto 1rem;
}
.h2 {
    font-size: 1.4rem;
    padding: 0.5rem;
    border-top: 2px solid rgba(0,0,0,0.5); 
    border-bottom: 2px solid rgba(0,0,0,0.5); 
}
.h3 {
    font-size: 1.2rem;
    padding: 0.5rem 0.6rem 0.24rem;
    border-left: 0.84rem solid rgba(0,0,0,0.5);  
    border-bottom: 2px solid rgba(0,0,0,0.5);
}
.h4,
.h5,
.h6 {
    font-size: 1rem;
    padding: 0.5rem 0.5rem 0.2rem;
    border-left: 0.7rem solid rgba(0,0,0,0.5);  
    border-bottom: 2px solid rgba(0,0,0,0.5);
}
p {
    margin: 1em auto;
}
.content-d p {
    margin: 0.8rem auto;
}

<p>序文サンプル　段落1</p>
<p>序文サンプル　段落2</p>
<h2 class="h-com h2">見出し2サンプル</h2>
<p>本文サンプル　段落1</p>
<div class="content-d">
<p>挿入コンテンツ　段落1</p>
<p>本文サンプル　段落2</p>
</div>
<p>本文サンプル　段落2</p>
<h3 class="h-com h3">見出し3サンプル</h2>
<p>本文サンプル　段落1</p>
<p>本文サンプル　段落2</p>
<h4 class="h-com h4">見出し4サンプル</h2>
<p>本文サンプル　段落1</p>
<p>本文サンプル　段落2</p>
<h5 class="h-com h5">見出し5サンプル</h2>
<p>本文サンプル　段落1</p>
<p>本文サンプル　段落2</p>
<h6 class="h-com h6">見出し6サンプル</h2>
<p>本文サンプル　段落1</p>
<p>本文サンプル　段落2</p>
<h2 class="h-com h2">見出し2サンプル</h2>
<p>本文サンプル　段落1</p>
<p>本文サンプル　段落2</p>

HTML結果です。

ほとんど本文と絡んでいるのでremを使っています。emは、段落（p）と挿入コンテンツのマージンくらいです。

挿入コンテンツ内の段落の余白は文字サイズに合わせて0.8remにしました。

あくまで例で絶対ではありません。ですが考え方はこんな感じです。

かんたんCSS margin,padding: 余白の設定とボーダーとの関係

tadtadya.com

まとめ

em,remなど、サイズ指定の単位が増えたのは、Webサイトを見る端末（デバイス）のサイズが多様になったからです。

そのためにレスポンシブデザインが必要になり、そのための単位が増えました。

これらの単位が、基準値からの相対値（倍率）指定なところに、レスポンシブデザインを意識していることが分かります。

レスポンシブ対応は、今のWebサイトでは必須なので、以前のような、pxなどの絶対値指定を多く使うのはやめるべきです。相対値指定を優先させるべきでしょう。

そして、相対値指定の中でも、em,remなどのレスポンシブデザイン用に用意された単位を、%よりも優先的に使いましょう。