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

他言語サイト
翻訳はみつかりませんでした
CSS ロゴ

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

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

絶対値指定のpx、相対値(倍率)指定の%

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

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

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

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

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

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

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

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

1em = 親の要素のフォントサイズ

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

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

remは『root em』の略です。

CSS
html {
    font-size: 16px;
}

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

htmlタグで指定する基本フォントのサイズは文章の本文のサイズになります。
1rem = 本文のサイズ
そうじゃない作りのサイトは今まで出会ったことがありません。もし、そんなサイトがあったら、
『誰だ?中学生みたいなプログラムを書いたやつは!』
と激ギレされるほどの基本中の基本です。
(キャリアのある人の中には、bodyタグで基本フォントを設定する人がいると思いますが、remの機能を殺すのでhtmlにしたほうがよいです。)

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

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

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

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

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

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

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

CSS3以前に、すでにスマホは爆発的に普及していました。
そこで開発者たちは、同じHTML,CSSでPCとスマホを表示させるのをあきらめて、PC用ページ、SP(タブレット・スマホ)用ページの2つを用意していました。

em,remのサンプルコード

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

ソースコードサンプルのボックスをタップすると(またはボックスにマウスを合わせると)、右上にコピーボタンが出てコードのコピーができます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

HTML
<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>タグはそれ自体に意味はありません。間にはさまれたものにCSSを設定するためのタグです。

CSS
.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の結果です。

コンテンツA
コンテンツB
コンテンツC
コンテンツボックス(div)のフォントサイズ

  • A: 16px
  • B: 20px
  • C: 24px

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

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

CSS
.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;
}
HTML
<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
A em half
B em half
C em half
rem
A rem half
B rem half
C rem half

em
A em 1
B em 1
C em 1
rem
A rem 1
B rem 1
C rem 1

em
A em 2
B em 2
C em 2
rem
A rem 2
B rem 2
C rem 2

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

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

0.5em = 50%
1em = 100%
2em = 200%

になります。

『それなら%でいいじゃないか?』

と言われそうですが、em,remは、『font-size』以外でも使えます。

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

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

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

CSS
.set-padding {
    padding: 1.5em;
}
HTML
<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の結果です。

コンテンツA
コンテンツB
コンテンツC

コンテンツA
コンテンツB
コンテンツC

コンテンツA
コンテンツB
コンテンツC

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

これはボタンなどで使われます。

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

PCとスマホで、それぞれ全部に対してバランスを考えるのは2倍の労力です。(ノートPC、タブレットを入れるとさらに増えます。)

2倍のサイト作成費用を出してくれるクライアントはいません。(おそらく激ギレされます。)

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

em,remの使い方

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

  • タイトルや見出し
  • 文章の近くにある画像など文字以外のコンテンツ
  • 文章を囲うコンテンツ

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

  • タイトルや見出しのfont-size, margin, padding
  • 本文のある文章の挿入画像・動画のmargin, padding

といったところでしょう。その他の部分はemを使います。

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

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

CSS
.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;
}
HTML
<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の結果です。

序文サンプル 段落1
序文サンプル 段落2

見出し2サンプル

本文サンプル 段落1

挿入コンテンツ 段落1
本文サンプル 段落2

本文サンプル 段落2

見出し3サンプル

本文サンプル 段落1
本文サンプル 段落2

見出し4サンプル

本文サンプル 段落1
本文サンプル 段落2

見出し5サンプル

本文サンプル 段落1
本文サンプル 段落2

見出し6サンプル

本文サンプル 段落1
本文サンプル 段落2

見出し2サンプル

本文サンプル 段落1
本文サンプル 段落2

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

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

これは、あくまで例で絶対ではありません。ですが考え方はこのようにします。

まとめ

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

そのためにレスポンシブデザインが必要になり、それを実現するために使いやすい単位が増えました。

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

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

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

最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!