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

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

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

1.相対値と絶対値がある

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

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

2.相対値の単位

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タグの指定を基準に表示されています。

point:remとemの違い

rem・・・htmlタグの指定を基準に相対値で表示(親要素の影響を受けない)
em・・・親要素の指定を基準に表示

%について

%は、親要素を基準とした比率で表示され、プロパティにより、横、縦、大きさなど基準となるものが変わります。

  • widthやmargin-left、padding-leftプロパティなど・・・・親要素の横幅を基準に指定した%で表示。
  • heightやmargin-top、padding-topプロパティなど・・・親要素の高さを基準に%で表示。
  • font-sizeプロパティ・・・・親要素の文字サイズを基準に%で表示。

3.絶対値の単位

pxについて

pxは他要素の影響を受けず、絶対的な値で表示される単位です。
イラレやフォトショなどでデザインをする際、pxで指定する場合が多いので、デザインとの整合性を取りやすいというメリットがあります。

ですが、タブレットやスマートフォンなどで、端末ごとに見た目の文字サイズが異なって表示される場合があります。

4.まとめ

大きさや長さが決定しないとデザイン自体が成り立ちません。
それがブラウザやデバイスによって意図した通りに表示されないとなると、苦労して考えたデザインもコードも全て台無しですよね。
単位の使い方や指定の仕方は、ぜひともマスターしておきたいところです。

この記事が、お役に立てるものになっていると嬉しいです。

スポンサーリンク