CSS の絶対単位と相対単位

CSS で要素をスタイル設定する場合、絶対単位 と 相対単位 の 2 つのカテゴリの単位から選択できます。それぞれの内訳と違いは次のとおりです。

---

1.絶対単位

絶対単位は固定の測定単位です。これらは他の要素や画面サイズの影響を受けません。つまり、使用されるコンテキストに関係なく、サイズは一定です。

一般的な絶対単位:

• px (ピクセル): ピクセルは画面上の小さな正方形です。固定レイアウトで最もよく使用される単位です。

  • 例:

  h1 {
    font-size: 24px;
  }
  

• pt (ポイント): 通常、印刷メディアで使用され、1pt は 1/72 インチに相当します。

• cm (センチメートル) および in (インチ): Web デザインではほとんど使用されず、これらの単位は物理的な寸法に基づいています。

絶対単位の利点:

• 一貫性: デバイスや画面のサイズに関係なく、サイズは常に同じです。
• 予測可能: すべてのプラットフォームでデザインをまったく同じにしたい場合に、固定レイアウトを作成するのに最適です。

欠点:

• 柔軟性の欠如: 絶対単位はさまざまな画面サイズやズーム設定にうまく適応せず、応答性が低下します。

---

2.相対単位

相対単位は柔軟で、使用されるコンテキストに基づいて拡大縮小されます。そのサイズは、親コンテナ、ビューポート、基本フォント サイズなどの他の要素によって異なります。

一般的な相対単位:

• em: 使用される要素のフォント サイズに相対します。親要素のフォントサイズが 16px の場合、1em は 16px に相当します。親要素のサイズが変更されると、親要素のサイズも変更されます。

  • 例:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em): ルート要素 (通常は 要素) のフォント サイズに相対します。これにより、em と比較して予測可能になります。

特に指定がない限り、ブラウザは通常、デフォルトでルート フォント サイズを 16 ピクセルに設定します。要素のカスタム フォント サイズを定義すると、すべての rem 値がその新しいサイズに基づいて計算されます。

• 例:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (パーセント): 親要素のサイズに対する相対値。たとえば、width: 50% と指定すると、要素の幅がその親コン​​テナの 50% になります。

• 例:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (ビューポートの幅) および vh (ビューポートの高さ): これらの単位はブラウザのビューポートを基準としています。 1vw はビューポートの幅の 1%、1vh はビューポートの高さの 1% です。

• 例:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

相対単位の利点:

• レスポンシブ デザイン: 相対単位は画面サイズ、フォント サイズ、コンテナーの寸法に基づいて自動的に拡大縮小され、デザインがより柔軟になります。
• メンテナンスが簡単: ルート要素のフォント サイズを変更すると (rem を使用)、デザイン全体を拡大縮小できます。

欠点:

• 制御が難しくなる可能性があります: 継承と、要素内でサイズがどのようにカスケードされるかをよく理解していないと、相対単位が予期しない結果を引き起こす可能性があります。

---

絶対単位と相対単位を使用する場合

• 絶対単位 (px など) は、正確な固定測定値が必要な場合に最適です。どこでも同じサイズにしたい場合にこれらを使用します (小さなロゴやアイコンなど)。
• 相対単位 (em、rem、vw、% など) はレスポンシブ デザインに最適です。画面サイズや親要素に基づいて要素を拡大縮小したり適応させたりできるため、デザインがより柔軟になります。

---

例: 実際の絶対単位と相対単位

<style>
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
</style>

<h1 id="This-is-px-text">This is 24px text</h1>
<h1 id="This-is-rem-text-px-based-on-root-size">This is 1.5rem text (24px based on root size)</h1>

この例では:

• 絶対フォント サイズ (24px) は常に同じです。
• 相対フォント サイズ (1.5rem) は、ルート フォント サイズ (16px) に基づいて調整され、24px になります。

---

結論:

• デバイス間での一貫性が必要な場合は、絶対単位を使用しますが、応答性が低いことに注意してください。
• 特に複数の画面サイズやデバイス向けに開発する場合、より柔軟で応答性の高いデザインを実現するには、相対単位を使用します。

以上がCSS の絶対単位と相対単位の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。