Zenn
📏

CSSの単位マスター：px、em、remの違いと特徴

2024/07/26に公開
CSS
フロントエンド
レスポンシブデザイン
ウェブデザイン
ui設計
tech

CSSの単位マスター：px、em、remの違いと特徴

こんにちは！今回は、CSSでよく使われる長さの単位であるpx、em、remについて詳しく解説します。これらの単位は一見似ていますが、それぞれに特徴があり、適切な理解が重要です。

1. px（ピクセル）

特徴

  • 絶対的な単位で、1pxは画面上の1ドットに相当します。
  • デバイスの画面解像度に依存するため、高解像度ディスプレイでは物理的に小さくなる可能性があります。
  • ユーザーのブラウザ設定（文字サイズの変更など）に影響されません。
  • ズーム機能を使用しない限り、常に同じ大きさで表示されます。
  • 精密な制御が可能で、デザインの意図を正確に反映できます。

サンプルCSS

.pixel-example {
  font-size: 16px;
  line-height: 24px;
  padding: 10px 20px;
  border: 1px solid #000;
  width: 300px;
  height: 150px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.pixel-text {
  font-size: 14px;
  margin-bottom: 8px;
}

.pixel-button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}

2. em（エム）

特徴

  • 相対的な単位で、現在の要素のフォントサイズを基準とします。
  • 1em は現在の要素のフォントサイズに等しくなります。
  • 親要素のフォントサイズが変更されると、emで指定されたサイズも比例して変化します。
  • ネストされた要素で値が累積するため、複雑なレイアウトでは予期せぬ結果を生む可能性があります。
  • コンポーネント単位でのスケーラブルなデザインに適しています。
  • タイポグラフィの調整に特に有用で、フォントサイズに応じた調和のとれたスペーシングを実現できます。

サンプルCSS

.em-example {
  font-size: 16px; /* 基準となるフォントサイズ */
}

.em-example p {
  font-size: 1em; /* 16px */
  line-height: 1.5em; /* 24px */
  margin-bottom: 1.25em; /* 20px */
}

.em-example .large-text {
  font-size: 1.5em; /* 24px */
}

.em-example .small-text {
  font-size: 0.875em; /* 14px */
}

.em-example .nested {
  font-size: 0.9em; /* 親要素の90% */
}

.em-example .nested .nested {
  font-size: 0.9em; /* さらに親要素の90% */
}

3. rem（ルートエム）

特徴

  • 相対的な単位で、ルート要素（通常は<html>）のフォントサイズを基準とします。
  • 1rem はルート要素のフォントサイズに等しくなります。
  • ネストの深さに影響されないため、一貫したサイジングが可能です。
  • グローバルなタイポグラフィスケールの設定に適しています。
  • レスポンシブデザインの実装が容易で、ルート要素のフォントサイズを変更するだけで全体のスケールを調整できます。
  • ユーザーのブラウザ設定（文字サイズの変更）を尊重しつつ、デザインの一貫性を保つことができます。

サンプルCSS

html {
  font-size: 16px; /* ベースのフォントサイズ */
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 18px; /* 大画面でのベースフォントサイズ */
  }
}

.rem-example {
  font-size: 1rem; /* 16px または 18px（メディアクエリに応じて） */
  line-height: 1.5;
  padding: 1rem;
}

.rem-example h1 {
  font-size: 2rem; /* 32px または 36px */
  margin-bottom: 1rem;
}

.rem-example p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.rem-example .large-text {
  font-size: 1.25rem; /* 20px または 22.5px */
}

.rem-example .small-text {
  font-size: 0.875rem; /* 14px または 15.75px */
}

.rem-example .button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 0.25rem;
}

まとめ

  • pxは絶対的で精密な制御が可能ですが、柔軟性に欠けます。
  • emは親要素に対して相対的なサイジングができますが、ネストによる複雑さに注意が必要です。
  • remはグローバルな一貫性とレスポンシブデザインに優れており、最も柔軟な選択肢です。

これらの単位の特性を理解し、プロジェクトの要件や設計方針に応じて適切に選択することで、より効果的で保守性の高いCSSコードを書くことができます。

各単位には長所と短所があるため、状況に応じて使い分けることが重要です。例えば、pxはアイコンやボーダーのような精密な制御が必要な場合に、emはコンポーネント内の相対的なサイジングに、remはグローバルなタイポグラフィとレイアウトの一貫性を保つために使用するといった具合です。

ぜひ、これらの単位の特性を活かして、柔軟で効果的なスタイリングを実現してください！

おまけ

コピペで使えます！
比較にどうぞ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS単位の比較: px, em, rem</title>
    <style>
        /* ベースのスタイル */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }

        /* px単位の例 */
        .px-example {
            font-size: 16px;
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .px-example h2 {
            font-size: 24px;
        }

        .px-example p {
            font-size: 14px;
        }

        /* em単位の例 */
        .em-example {
            font-size: 16px;
            padding: 1em;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .em-example h2 {
            font-size: 1.5em;
        }

        .em-example p {
            font-size: 0.875em;
        }

        .em-example .nested {
            font-size: 0.9em;
        }

        /* rem単位の例 */
        html {
            font-size: 16px;
        }

        .rem-example {
            font-size: 1rem;
            padding: 1rem;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .rem-example h2 {
            font-size: 1.5rem;
        }

        .rem-example p {
            font-size: 0.875rem;
        }

        .rem-example .nested {
            font-size: 0.9rem;
        }

        /* レスポンシブデザインの例 */
        @media screen and (min-width: 768px) {
            html {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <h1>CSS単位の比較: px, em, rem</h1>

    <div class="px-example">
        <h2>px単位の例</h2>
        <p>これは14pxのフォントサイズです。pxは固定サイズなので、ブラウザの設定を変えても変化しません。</p>
    </div>

    <div class="em-example">
        <h2>em単位の例</h2>
        <p>これは0.875emのフォントサイズです。親要素のフォントサイズに相対的です。</p>
        <div class="nested">
            <p>これはネストされた要素で、さらに小さくなります（0.9em）。</p>
        </div>
    </div>

    <div class="rem-example">
        <h2>rem単位の例</h2>
        <p>これは0.875remのフォントサイズです。ルート要素（html）のフォントサイズに相対的です。</p>
        <div class="nested">
            <p>これはネストされた要素ですが、remなのでサイズは変わりません（0.9rem）。</p>
        </div>
    </div>

    <p>ブラウザの幅を変更すると、rem単位を使用している要素のサイズが変化するのが分かります（768px以上で大きくなります）。</p>
</body>
</html>

Discussion