CSS의 절대 단위와 상대 단위-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 절대 단위와 상대 단위

Susan Sarandon

Sep 26, 2024 pm 06:09 PM

Absolute vs. Relative Units in 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>

この例では: