CSS3のpx,%,em,remの使い方

CSSではフォントのサイズをpx,%,em,remで指定した際のそれぞれの意味を解説します。

スポンサーリンク

CSS3のpx,%,em,remの使い方

CSSにはフォントのサイズなどを指定する方法に4つの単位(px,%,em,rem)が存在します。

px

サイズをpx単位で指定する方法です。

当然、それぞれは指定した値(px単位)で表示されます。

html {
  font-size: 16px;
}
div {
  font-size: 32px; /* -> 64px; */
}
span {
  font-size: 20px; /* -> 20px; */
}

em

emは親要素に指定されているfont-sizeを基準に大きさを計算します。

値は親要素指定されている「font-size × emで指定された値」になります。

html {
  font-size: 32px;
}
div {
  font-size: 2em; /* -> 64px; */
}
span {
  font-size: 0.5em; /* -> 32px; */
}

%

%は親要素に指定されているfont-sizeを基準に大きさを計算します。

値は「親要素指定されているfont-size × %で指定された値)になります。

html {
  font-size: 32px;
}

div {
  font-size: 200%; /* -> 64px; */
}

span {
  font-size: 50%; /* -> 32px; */
}

rem (root em)

文書のルート要素(html要素のfont-size)を基準にして計算します。

値は「文書のルート要素のfont-size × remで指定された値」になります。

html {
  font-size: 32px;
}

div {
  font-size: 2rem; /* -> 64px; */
}

span {
  font-size: 0.5rem; /* -> 16px; */
}
スポンサーリンク
スポンサーリンク
CSS
このサイトをフォローする
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました