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

1.絶対単位

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

一般的な絶対単位:

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

  • 例：

  h1 {
    font-size: 24px;
  }
  

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

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

絶対単位の利点:

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

短所:

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

2.相対単位

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

一般的な相対単位:

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

  のサイズも変更されます。
  • 例：

  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、% など) はレスポンシブ デザインに最適です。画面サイズや親要素に基づいて要素を拡大縮小したり適応させたりできるため、デザインがより柔軟になります。

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

This is 24px text
This is 1.5rem text (24px based on root size)

この例では:

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

結論：

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