ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


人の可能性が、
次の世界を
つくる

ファーストビュー ファーストビュー ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

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

レスポンシブremとemの単位の使い方ウェブデザイン

 

ウェブサイトを作成するときにはHTMLとCSSを用いますが、さまざまな単位が出てくるため初心者は難しく感じてしまうでしょう。表示する端末に合わせて最適なサイズに設定するために活用できるのは「rem」です。

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

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

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

単位 意味
px
(ピクセル)
pxのサイズで指定する
%
(パーセント)
親要素で指定したサイズに対して割合で表す単位
em
(エム)
%とほぼ同じで100%=1emと言い換えられる
rem
(レム)
親要素の影響を受けず、htmlタグのフォントサイズを1として考える相対的な文字サイズの単位
vw
(Viewport Width)
画面の表示幅に対しての割合で指定。 10vwで画面幅の10%を意味する
vh
(Viewport Height)
画面表示の高さに対しての割合で指定 10vhで画面の高さの10%を意味する

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

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の使い方についてまとめているので、こちらもチェックしてみてください。
佐藤先生

VSコードウェブデザイン初心者
ホームページ作成をする人は必見!VScodeのインストール方法と必須拡張機能9選!beautifyは神拡張機能なので使い方を覚えよう

  HTMLやCSSを編集するために初心者へおすすめしたい「VScode(Visual Studio Code)」。Microsoft社が提供しているコードエディタです。超軽量かつ豊富な拡張 ...



© 2022 エンジニアラボ【ワードプレスのテーマ構築を制作実績200件以上の現役ウェブデザイナーが初心者に分かりやすい制作テクニックを教えます】 Powered by AFFINGER5