CSS 単位について

単位一覧

単位	何を基準にしている？	使い方や特徴のポイント	どんなときに使う？
px	画面の小さな点（ピクセル）	絶対的なサイズ。どんな画面でも同じ大きさになる。	アイコンのサイズや境界線の太さなど正確に決めたいとき。
rem	ルート（HTMLタグ）の文字サイズ	相対的なサイズ。ブラウザの基本フォントサイズに依存する。	文字サイズや余白を統一的に変えたいとき。
em	親要素の文字サイズ	相対的なサイズ。ネスト（入れ子）が深いとサイズが変わることも。	コンポーネント内の文字サイズや余白調整に使う。
%	親要素の幅や高さ	親要素に対する割合で決まる。レスポンシブデザインに便利。	幅や高さを親のサイズに合わせたいとき。
vw	ビューポート（画面の幅）の1%	画面幅の割合でサイズを決める。画面サイズに応じて変わる。	画面幅に合わせて文字や画像の大きさを変えたいとき。
vh	ビューポート（画面の高さ）の1%	画面高さの割合でサイズを決める。画面の高さに合わせて変わる。	画面いっぱいの高さを指定したいとき。
auto	ブラウザや親要素におまかせ	サイズを自動で決める。内容や親要素の状況に合わせる。	画像の自然な大きさを維持したいときや自動調整したいとき。

1.px（ピクセル）

• 意味：画面上の1点の大きさ。ディスプレイの小さなドット1つ分。
• 特徴：絶対的なサイズ。どの画面でも同じ大きさになる。
• 例：「font-size: 16px;」は文字の大きさを16ピクセルにする。

2.rem（ルートem）

• 意味：ルート（htmlタグ）のフォントサイズを基準にした相対単位。
• 特徴：親の影響を受けずに、ページ全体の基準サイズに対して比率を指定できる。
• 例：「font-size: 2rem;」はhtmlのフォントサイズの2倍の大きさになる。
• ポイント：htmlのフォントサイズが16pxなら、2remは32pxになる。

3. em（エム）

• 意味：親要素のフォントサイズを基準にした相対単位。
• 特徴：親のフォントサイズが変わると影響を受けるから、入れ子構造でサイズが変わりやすい。
• 例：「font-size: 1.5em;」は親の文字サイズの1.5倍。

4. %（パーセント）

• 意味：親要素のサイズの割合で指定する単位。
• 特徴：親のサイズに対して相対的に変わる。文字のサイズや幅・高さにも使える。
• 例：「width: 50%;」は親要素の幅の半分の大きさ。

5. vw（ビューポート幅）

• 意味：画面の幅（ビューポート幅）の1％。
• 特徴：ブラウザの幅に応じて大きさが変わる。
• 例：「width: 50vw;」は画面幅の半分の幅。

6. vh（ビューポート高さ）

• 意味：画面の高さ（ビューポート高さ）の1％。
• 特徴：ブラウザの高さに応じて大きさが変わる。
• 例：「height: 100vh;」は画面の高さいっぱいにする。

7. auto

• 意味：ブラウザやCSSのルールに任せて自動調整する。
• 特徴：明示的にサイズを指定しない時や、要素の自然なサイズを使いたいときに使う。
• 例：「width: auto;」は要素の内容や親要素に合わせて幅を決める。

幅設定

プロパティ	意味	特徴
width: 100%	親要素の幅に対して100%	親のサイズにぴったり合わせる
width: 100vw	画面の幅（ビューポート幅）の100%	親に関係なく、画面全体に広がる

ビューポートの落とし穴

• 表示領域（ビューポート）は実際の見えている幅とずれていることがある。
• 特にスクロールバーアドレスバーがあるとき、100vw だとバー込みの幅で計算されるから、結果としてちょっと画面からはみ出てしまう ➡︎ 横スクロール発生。
• そんな時は明示的にheightやwidthを指定しよう！