【CSS】font-sizeの単位とレスポンシブで使えるremの使い方と指定方法！

このブログではfont-sizeの単位とレスポンシブで使えるremの使い方と指定方法を教えています。

こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。

【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者(真実をみる)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)

佐藤先生

ぺんぺん

font-sizeの単位はpxで指定するよりremのほうが効率良く使いやすいって聞きました。

もし読み進めてみても分からないことがあれば1500円でレクチャーしています

佐藤先生

では、初めてのウェブサイト作成でも作業を効率化して、スムーズにレスポンシブを有効にするために、CSS font-sizeの単位と「rem」の使い方や注意点について解説します。

ウェブサイト作成でよく使うCSS font-sizeの単位

CSSを使ったコーディングでは、さまざまなサイズ単位を用います。一般的に抑用いられている単位を表にまとめて見ましたので、参考にしてみてください。

上の表で紹介したサイズ単位はフォントだけではなく、ボックスや画像など様々な要素のサイズ指定に使えます。この機会に、しっかり覚えてコーディングの作業効率を上げましょう。では、それぞれの単位について簡単に解説していきます。

px（ピクセル）

他のサイズ指定に影響を受けたに絶対的地位に据えられたサイズ単位です。たとえば、p{font-size:24px; }とコーディングすれば「p」はすべて24pxへ自動的に調整されます。直観的にサイズを指定して反映できるので便利です。

親要素やルート要素のサイズを他の単位で指定していても、pxは親要素に影響されないためコーディングが非常に分かりやすく第三者が調整しやすいという特徴もあります。ただし、レスポンシブにおいては画面サイズに合わせてサイズを指定し直さなければならないので不便です。

％（パーセント）

pxの絶対的指定に対して、％は相対指定と言われています。例えば、親要素が20pxだった場合、50％指定すれば10pxになります。入れ子構造のHTMLコーディングがされていて、フォントサイズがそれぞれ違う値で指定されている場合は計算がややこしくなるので注意しましょう。

em（エム）

％と同じ相対指定できるサイズ単位です。100％=1emと考えると分かりやすいでしょう。ただし、よく勘違いされているのが、1em=1文字分のサイズという考え方です。文字ではなく親要素に対する割合ですから、入れ子構造の場合はややこしい計算になるので注意しましょう。

rem（レム）

％やemは入れ子構造のHTMLでは計算がややこしくなり、難易度が上がってしまいます。そんなややこしさを一掃して、親要素ではなくフォントサイズを基準として相対的にサイズ指定ができるremが登場しました。親要素ではなく、HTMLの文字サイズを確認すればremサイズもわかるので便利です。

例えば、html{font-size: 16px;}と指定されている場合、子要素をh2{font-size:2rem;}としていすればh2のフォントサイズは、16px×2remの32pxという単純計算で割り出せます。remはレスポンシブにおいて非常に便利なサイズ単位です。

レスポンシブで使えるremの指定方法

ここまで、CSS font-sizeの単位について解説してきました。では、さまざまなサイズのデバイスで表示するウェブサイトを最適化するために、どの単位をどのように指定するのがよいのでしょうか。CSS3～登場したremを使っている人が多いので、初心者にもおすすめです。

remを使ったサイズ設定のコーディング画面は次のようになります。

/* ルートの文字サイズを10pxに設定 */
html {
font-size: 62.5%;
}
/* bodyのフォントサイズを1.6em（16px）に設定 */
body {
font-size: 1.6em;
}
h1{
font-size: 5rem; /* 50px */
}
p{
font-size: 1.5rem; /* 15px */
}

いちばん上のHTML設定で「font-size: 62.5%」と指定しているのは、デフォルト値が16pxなので62.5％縮小して10pxに調整しているのです。このように、HTMLを10pxに指定しておけば、remの指定と実際の表示サイズの認識が簡単に行えるようになるのでおすすめです。

また、body {font-size: 1.6em;}と設定しておけば、ほかに指定がない場合16pxに自動的に調整されるため、pxを使うときと同じような直観的な文字サイズ指定が行えます。

HTMLに指定しているのはルートフォントサイズであり、bodyに指定しているのはデフォルトフォントサイズです。htmlに設定したサイズが基準となりremの指定値に応じてフォントサイズが設定されていきます。

フォントサイズが指定されなかった要素に関しては、自動的にbodyに指定されているデフォルトのサイズが適用されます。

デバイスごとにCSS font-sizeを変更する方法

PCデスクトップ・タブレット・スマホなどウェブサイトを表示するデバイスにはいろいろな種類があり、画面のサイズもさまざまです。それぞれのデバイス画面に合わせて適切に文字サイズを指定するのは骨が折れる作業といえます。

しかし、初心者でもレスポンシブで使える簡単な方法があります。メディアクエリを使いルートフォントサイズを変えれば、HTML要素以下のすべての文字サイズが一括で自動的に変更されるのです。具体的にどのようなコーディングをすればいいのでしょうか。

@media screen and (max-width: 640px) {/* 640px以下でスマホ画面時*/
h3 {
font-size:1.6rem;/*16px*/
}
p{
font-size:1.2rem;/*12px*/
}
}

メディアクエリを活用すれば、pxをデバイスのサイズに合わせて一つずつ設定する必要はありません。初心者でも簡単に使用できるので、CSS font-sizeの設定作業を効率化していきましょう。

【注意点】remのサイズ指定は10pxが必須

「remを使ってレスポンシブを効かせたかったのに、なぜかスマホやタブレットでの表示画面でレスポンシブが効いていない」という場合はどうしたらよいのでしょうか。

1rem=10pxにすると計算しやすいので、コーディングの際の参考にする方は多いでしょう。しかし、次のような値に設定してしまうと、レスポンシブが無効になります。

/* ↓スマホ（横幅550px以下）の場合 */
@media screen and (max-width: 550px) {
html{
/* 1rem = 5pxと再定義 */
font-size: 5px;
}
body{
/* フォントサイズを少し小さく14pxに（5px * 2.8rem = 14px） */
font-size: 2.8rem;
}
h1{
/* （5px * 4rem = 20px） */
font-size: 4rem;
/* 2rem = 10pxに自動で再計算されるはず */
}
p{
/* マージントップはPCの半分の20pxにしますが、ここで何も指定しなくても、5px * 4rem = 20pxに自動で算出されるはず */
}
}

メディアクエリを使ってスマホ画面のサイズ指定を行っています。しかし、このコーディングで問題なのは「1rem = 5pxと再定義」の部分です。PC用のサイズをスマホ用に50％のサイズで表示されるよう計算されることを期待した記述ですが、Chromeではレスポンシブしません。

rem親要素に応じて指定されるのではなく、文字サイズの指定に使うため1rem=10px未満になるとChromeが値を無効にしてしまいます。Chromeの独自処理なので、レスポンシブされない理由が分からず、初心者は煮詰まってしまう可能性があるので注意してください。

remを使っているのに、スマホのChrome画面でレスポンシブが効かないときはremのサイズ指定が10pxになっていないか確認しましょう。

さきほどのコーディングを、Chromeでレスポンシブが効くように修正したものがこちらです。

/* ↓スマホ（横幅550px以下）の場合 */
@media screen and (max-width: 550px) {
html{
/* 1rem = 50pxと再定義 */
font-size: 50px;
}
body{
/* （50px * 0.28rem = 14px） */
font-size: 0.28rem;
}
h1{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
font-size: 0.4rem;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
p{
/* 0.4rem = 20pxに自動で算出されるはず */
}
}

1rem=50pxに指定されているので、Chromeで無視されないフォントサイズ設定が出来ています。

初心者もremで簡単にフォントサイズを設定しよう

レスポンシブで使えるCSSのフォントサイズ単位である「rem」が使えるようになると、マージンやパディングなどさまざまなサイズ指定をPCやスマホなどのデバイスごとに指定し直す必要がなくなります。作業効率を上げて、初心者でもレスポンシブの効いた読者に優しい設定ができるでしょう。

まずは、ウェブサイトの作成で使う機会が多いフォントサイズの値を覚えて、ややこしい計算にならないように注意しながら使い慣れていくようおすすめします。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。

佐藤先生