CSS サイズ単位について理解する: px、em、rem、% など

CSS では、ピクセル (px) からパーセンテージ (%)、em や rem などの相対単位まで、要素のサイズを制御するさまざまな単位があります。デザインに適したユニットを選択することは、応答性が高くアクセスしやすいレイアウトを構築するために重要です。このガイドでは、最も一般的な CSS サイズ単位、各単位をいつ使用するか、およびそれらがレイアウトに与える影響について説明します。

---

1. ピクセル (px)

ピクセルは、CSS で最も一般的な絶対単位の 1 つです。 px は、画面上の 1 つの物理ピクセルを表します。固定されているため、px を使用すると、ユーザーの設定に関係なく、要素は同じサイズのままになります。

px を使用する場合:

• アイコンや境界線などの正確な固定要素にはピクセルを使用します。
• ユーザーがブラウザのズーム レベルを調整するときにアクセシビリティに影響を与える可能性があるため、テキストにはピクセルを使用しないでください。

例:

p {
  font-size: 16px;
  width: 200px;
}

---

2. パーセンテージ (%)

% 単位は相対的なものであり、親要素のサイズに基づいて調整されることを意味します。この柔軟性により、% はレスポンシブ デザイン、特にビューポートに基づいて要素のサイズが変更される流動的なレイアウトに不可欠なツールになります。

% を使用する場合:

• 親コンテナを基準にして調整するコンテナや画像などのレイアウト要素には % を使用します。
• % とメディア クエリを組み合わせて、流動的でレスポンシブなデザインを作成します。

例:

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

3.em単位

em 単位は、最も近い親要素のフォント サイズに基づく相対単位です。親フォント サイズが定義されていない場合は、デフォルトでブラウザの基本フォント サイズ (通常は 16 ピクセル) が使用されます。

キーポイント:

• 1em は親要素のフォント サイズと同じです。

• 1em は 2 倍のサイズです。

• ネストされた要素に適用されると em 値が増加する可能性があるため、ネストには注意してください。

いつ使用するか:

• テキスト サイズに関連したスペース、パディング、またはマージンの調整用。

• 親のテキスト サイズに応じて調整する必要があるコンポーネントのフォント サイズ。

例:

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

4.レム単位

em とは異なり、rem 単位はルート要素 () のフォント サイズに基づきます。つまり、ドキュメント全体で 1rem が一貫しています (カスタマイズされていない限り、多くの場合 16px)。これにより、rem は Web ページ全体で一貫したタイポグラフィと間隔を実現するための信頼できる単位になります。

rem を使用する場合:

• ネストされた要素に関係なく、コンポーネント全体で一貫したフォント サイズを実現します。

• 明確な基準点を使用して、より拡張性と保守性の高い設計を実現します。

例:

p {
  font-size: 16px;
  width: 200px;
}

---

5. ビューポートユニット (vw および vh)

ビューポート単位 - vw (ビューポート幅) と vh (ビューポート高さ) - は、ビューポート (ブラウザ ウィンドウ) のサイズに基づく応答単位です。 1vw はビューポートの幅の 1% に相当し、1vh はビューポートの高さの 1% に相当します。

vw と vh を使用する場合:

• 全ページのヒーロー セクションなど、ブラウザのサイズに合わせて拡大縮小する必要がある要素の場合。

• 画面の幅に基づいて調整されるレスポンシブ タイポグラフィを作成します。

例:

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

6. 柔軟な長さの単位 (最小、最大、クランプ)

min()、max()、clamp() などの新しいユニットはレスポンシブ デザインに強力であり、最小値または最大値に基づいて条件付きのサイズ設定が可能です。

min(a, b): 2 つの値の最小値を取ります。
max(a, b): 2 つの値の最大値を取ります。
クランプ(最小、優先、最大): 定義された範囲内に適応する値を設定します。

いつ使用するか:

• 特定の範囲内に収まるレスポンシブ タイポグラフィ用。
• ビューポートに基づいてコンポーネントのサイズを設定しますが、最小値または最大値の制限があります。

例:

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

結論

各 CSS ユニットには独自の長所と理想的な使用例があります。

• 正確な固定要素の場合は px。
• % は流動的で応答性の高いレイアウト コンポーネントを表します。
• em は親要素を基準にしてスケーリングします。
• ページ全体で一貫したスケーリングを行うには rem を使用します。
• 動的、ビュー​​ポートベースの要素のビューポート単位。
• 適応的で条件付きのスタイルを実現する、clamp() のような柔軟なユニット。

これらの CSS ユニットをマスターすると、柔軟でアクセスしやすく、保守しやすいレイアウトを作成することができます。デザインのニーズに基づいてそれらを組み合わせて、レイアウトが現実になるのを見てください。スタイリングを楽​​しんでください!

以上がCSS サイズ単位について理解する: px、em、rem、% などの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。