記事内に広告が含まれています。

CSSで使用する単位remとem、そして%、pxの違いを解説

Apr 27, 2022

今回はCSSで使用できる単位について記事にしたいと思います。
CSSで使用できる単位はいくつかありますが、それぞれがどのように違うかご存じですか。

正しく理解していないと意図した通りのデザインで表示されません。
この記事では、HTMLやCSSを記述する上で、最初に覚えておきたい単位について説明します。

１．相対値と絶対値がある

単位には相対値と絶対値があります。

	意味	単位
相対値の単位	基準となる他要素との比率で大きさや長さが決定する単位	rem、em、%
絶対値の単位	他要素の影響を受けず、固定的な大きさや長さで表示される単位	px

２．相対値の単位

remについて

remはCSS3から利用可能になった単位です。
rem（レム）は「root em」の略で、「root」は根、根源という意味ですので、直訳すると「根源的な単位のem」ということになります。

remは、HTMLページの根源にあたるHTMLタグの文字サイズを1として、相対値で大きさや長さが決まります。
配下のどの要素に指定しようとも、各々の親要素の影響は受けず、HTMLタグを基準とします。

では、実際に表示を見てみましょう。
下記のHTMLは、sectionタグの中にh1タグとpタグを入れ子にしています。

Sample01

See the Pen Untitled by natsuki (@natsukimemo) on CodePen.

下記がCSSです。

  html { 
  font-size: 10px; /* ルート要素にremの基準となるサイズを指定 */
  } 
  section{
  font-size:1000px; /* 親要素sectionの指定は無視されている */
  }
  h1 { 
  font-size: 2rem; /* 20px 相当（2倍） */
  }  
  p { 
  font-size: 3rem;  /* 30px 相当（3倍） */
  }

CSSで注目すべき箇所は、5行目でsectionタグに1000pxを指定していることです。
あえてあり得ないほど大きな数値にしてみました。
Sample01の表示を見てみるとsectionに指定した1000pxは無視され、h1タグ、pタグともに、ルート要素であるhtmlタグを基準とした大きさで表示されています。

Sample02

htmlタグにfont-sizeを指定しなかった場合は、ブラウザのデフォルト値を基準に表示されます。

下記のHTMLはSample01と全く同じです。

See the Pen rem-Sampla02 by natsuki (@natsukimemo) on CodePen.

  section{
  font-size:1000px; /* 親要素sectionの指定は無視されている */
  }
  h1 { 
  font-size: 2rem; 
  }  
  p { 
  font-size: 3rem; 
  }

CSSではhtmlタグに何も指定していませんが、表示を見るとブラウザのデフォルト値を基準に文字の大きさが決定されています。
そしてsectionタグの指定（font-size:1000px）は無視されています。

emについて

一方emは、親要素に指定したfont-sizeプロパティの値を1として、相対的な比率で大きさや長さが決まります。

Sample03

下記のHTMLは、これまでのSample01、Sample02と同じです。

See the Pen Untitled by natsuki (@natsukimemo) on CodePen.

CSSは下記です。

  html {
 font-size: 1000px; /*無視される*/
} 
  body{
 font-size: 1px; /*無視される*/
} 
  section{
 font-size: 20px; /*これが基準*/
} 
  h1 {
 font-size: 1.5em;  /* 20pxの1.5倍で表示 */
} 
  p {
 font-size: 2em;  /* 20pxの2倍で表示 */
}

htmlやbodyタグにfont-sizeを指定していますが、それらは無視され、h1とpタグの親要素であるsectionタグの指定を基準に表示されています。