イントロダクション
CSSにおいて、要素のサイズ、位置、余白（マージン）、パディングなどを指定する際に使用される単位には様々な種類があります。今回は、その中でもよく使われる4つの単位、px、%、em、remについて詳しく見ていきましょう。
px（ピクセル）の説明
ピクセル（px）は、CSSで最も基本的な長さの単位です。1pxは、画面上の物理的な1ピクセルを指します。ピクセルは絶対単位であり、他の要素や親要素のサイズに影響を受けません。
%（パーセンテージ）の説明
パーセンテージ（%）は、相対的な長さの単位です。パーセンテージの値は、通常、親要素のサイズに対する相対値として計算されます。例えば、親要素の幅が500pxで、子要素の幅を50%に設定すると、子要素の幅は250pxになります。
emの説明
emは、現在のフォントサイズに対する相対的な長さの単位です。親要素のフォントサイズが20pxで、子要素のマージンを2emに設定した場合、そのマージンは40pxになります。
remの説明
rem（root em）は、ルート要素（HTML要素）のフォントサイズに対する相対的な長さの単位です。HTML要素のフォントサイズが16pxで、ある要素のパディングを1.5remに設定すると、そのパディングは24pxになります。
各単位間の相違点
これらの単位はそれぞれ異なる場面で利点を発揮します。pxは固定的で予測可能なサイズが必要な場合に適しています。%は親要素に対する比率でサイズを指定したい場合、emとremは親要素やルート要素のフォントサイズに依存したサイズを指定したい場合に適しています。
どの単位をいつ使うべきか
単位の選択は、そのコンテキストと要件に大きく依存します。レスポンシブデザインを実現するためには、%やem、remなどの相対的な単位が
適しています。一方、固定のサイズが必要な要素（例えば、アイコンや固定幅のボーダーなど）には、pxがよく用いられます。
実例を用いた理解の深化
それでは、具体的なコードを見ていきましょう。
pxの例
.element {
width: 200px;
height: 150px;
}
このコードは、要素の幅と高さをそれぞれ200ピクセルと150ピクセルに設定します。
%の例
.parent {
width: 500px;
}
.child {
width: 50%;
}
このコードは、子要素の幅を親要素の50%に設定します。親要素の幅が500pxなので、子要素の幅は250pxになります。
emの例
.parent {
font-size: 20px;
}
.child {
margin-top: 2em; /* 40px */
}
このコードは、子要素の上マージンを親要素のフォントサイズの2倍に設定します。親要素のフォントサイズが20pxなので、上マージンは40pxになります。
remの例
html {
font-size: 16px;
}
.element {
padding: 1.5rem; /* 24px */
}
- このコードは、要素のパディングをルート要素（HTML要素）のフォントサイズの1.5倍に設定します。HTML要素のフォントサイズが16pxなので、パディングは24pxになります。
まとめ
この記事では、CSSで使用される主要な単位、px、%、em、remについて見てきました。各単位がどのように機能し、どのような状況で最も効果的かを理解することは、効率的で適応性の高いスタイリングを達成するための重要なスキルです。
参考資料
さらに深く学びたい方は、以下のリンクを参照してください。
コメント