CSSの単位を徹底解説！初心者でもわかるem, rem, %, pxの違い
新人
「CSSで使う単位には色々な種類があるみたいですが、em、rem、%、pxの違いって何ですか？」
先輩
「CSSの単位は、スタイルの大きさや配置を決めるために使います。それぞれの単位には特性があって、使い方が異なるんですよ。」
新人
「それぞれの単位は、どのように使えばいいんですか？」
先輩
「それでは、em、rem、%、pxのそれぞれについて、具体的に見ていきましょう！」
1. px（ピクセル）とは？
px（ピクセル）は、最も基本的でよく使われる単位です。1pxは、画面上の1ドットに相当します。ピクセルは、画面解像度に依存してサイズが決まるため、要素のサイズが固定されます。
例えば、次のコードでは、h1タグのフォントサイズを16pxに設定しています：
<style>
h1 {
font-size: 16px;
}
</style>
<h1>こんにちは、CSS！</h1>
このコードでは、h1タグのフォントサイズを16pxに設定しています。ピクセルは非常に直感的で使いやすい単位です。
2. %（パーセント）とは？
%（パーセント）は、親要素に対する相対的なサイズを指定する単位です。例えば、親要素の幅に対して%で指定すると、親要素のサイズに応じて自動的にサイズが変わります。
以下のコードでは、divタグの幅を親要素の50%に設定しています：
<style>
div {
width: 50%;
}
</style>
<div>このdivは親要素の50%の幅です。</div>
このコードでは、divタグの幅が親要素の50%に設定されます。%は親要素のサイズに依存するため、レスポンシブデザインに便利です。
3. em（エム）とは？
emは、親要素のフォントサイズに基づいてサイズを決定する相対的な単位です。1emは親要素のフォントサイズと同じ大きさを指し、子要素に対して相対的にサイズを設定することができます。
次のコードでは、h2タグのフォントサイズを親要素の1.5倍に設定しています：
<style>
h2 {
font-size: 1.5em;
}
</style>
<h2>これはemを使った見出しです。</h2>
このコードでは、h2タグのフォントサイズが親要素の1.5倍になっています。emを使うと、フォントサイズを相対的に設定できます。
4. rem（レム）とは？
remは、ルート要素（通常は<html>タグ）のフォントサイズに基づいてサイズを決定します。emが親要素に依存するのに対して、remは常にルート要素に基づくため、予測がしやすくなります。
次のコードでは、h3タグのフォントサイズをルート要素の2倍に設定しています：
<style>
h3 {
font-size: 2rem;
}
</style>
<h3>これはremを使った見出しです。</h3>
このコードでは、h3タグのフォントサイズがルート要素の2倍になっています。remは一貫性があり、サイト全体で統一感を持たせるのに便利です。
5. 初心者は、どの単位を使うべきか？
CSSの単位には色々な種類がありますが、初心者の方はどの単位を使えば良いのでしょうか？以下で、初心者におすすめの単位とその使い方を説明します。
1. 最初はpx（ピクセル）を使おう
px（ピクセル）は、最も直感的で初心者にも扱いやすい単位です。1pxは画面の1ドットに相当します。ピクセルは、画面解像度に依存してサイズが決まるため、要素のサイズが固定されます。これにより、デザインが非常に直感的で予測可能となり、最初に使うのに適しています。
例えば、フォントサイズや要素のサイズを固定したい場合、pxを使って指定します。次のコードでは、h1タグのフォントサイズを16pxに設定しています：
<style>
h1 {
font-size: 16px;
}
</style>
<h1>こんにちは、CSS！</h1>
このコードでは、h1タグのフォントサイズを16pxに設定しています。ピクセル単位は、サイズが固定されるため、要素の大きさが一貫して表示され、初心者には使いやすい単位です。
2. 次に%（パーセント）を使ってみよう
%（パーセント）は、親要素に対する相対的なサイズを指定する単位です。例えば、親要素の幅に対して%で指定すると、親要素のサイズに応じて自動的にサイズが変わります。
レスポンシブデザイン（画面サイズに合わせてデザインを調整する）の基本を学ぶために、%を使うのは良いステップです。
次のコードでは、divタグの幅を親要素の50%に設定しています：
<style>
div {
width: 50%;
}
</style>
<div>このdivは親要素の50%の幅です。</div>
このコードでは、divタグの幅が親要素の50%に設定されています。%は親要素のサイズに依存するため、レスポンシブデザインにおいて非常に役立つ単位です。
3. 最後にem（エム）を使ってフォントサイズを相対的に調整
em（エム）は、親要素のフォントサイズに基づいてサイズを決定する相対的な単位です。1emは親要素のフォントサイズと同じ大きさを指します。これにより、要素のサイズを相対的に調整することができます。
emを使うことで、親要素のフォントサイズに応じて、子要素のサイズを動的に変更できます。フォントサイズを柔軟に変更したい場合に便利です。
次のコードでは、h2タグのフォントサイズを親要素の1.5倍に設定しています：
<style>
h2 {
font-size: 1.5em;
}
</style>
<h2>これはemを使った見出しです。</h2>
このコードでは、h2タグのフォントサイズが親要素の1.5倍になっています。emを使うと、相対的にサイズを変更することができ、フォントサイズの調整がしやすくなります。
初心者におすすめの単位を使う順番
初心者の方には、まず以下の順番で単位を学んでいくことをお勧めします：
- まずはpx（ピクセル）を使ってデザインを作成し、レイアウトの基本を学びましょう。pxは使いやすく、予測がしやすいので、最初に覚えるのに適しています。
- 次に%を学び、レスポンシブデザインの基本を理解します。%を使うことで、画面サイズに応じてレイアウトを変更できるようになります。
- 最後にemを使い、相対的なサイズ指定を学ぶと良いでしょう。emは、フォントサイズを相対的に指定するのに便利です。
まずはシンプルなデザインから始め、慣れてきたらより柔軟なレイアウトに挑戦してみてください。
