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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
css3 image
イラストACの画像をもとに加工しています。

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のタブが階層化されるほど、どれが基準なのか分からなくなっていました。

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

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

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

CSS3以前に、すでにスマホは爆発的に普及していました。

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

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
.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)のフォントサイズ

A16px
B20px
C24px

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.5em50%
1em100%
2em200%

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

『それなら%でいいじゃないか?』と言われそうですが、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にしました。

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

css3 image

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

tadtadya.com

まとめ

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

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

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

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

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

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

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

*

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

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