CSSユニットの説明

投稿日: 2022-04-20 2022-04-20
タグ: css

序章

CSSには、さまざまなCSSプロパティのサイズを決定するときに使用する単位に関するいくつかのオプションがあります。 CSSユニットのすべてのオプションを学習することは、管理が簡単で、どの画面でも見栄えのする方法でスタイリングするための鍵となる可能性があります。

CSSユニットとは何ですか？

CSSユニットは、要素またはそのコンテンツに設定するプロパティのサイズを決定します。たとえば、段落のプロパティmarginを設定する場合は、特定の値を指定します。この値にはCSS単位が含まれます。

小さな例を見てみましょう：

p {
  margin: 20px;
}

この場合、marginはプロパティ、20px;は値、px（または「ピクセル」）はCSS単位です。

pxのようなユニットが使用されるのはよくあることですが、大きな問題は、「ここで使用するのに最適なユニットは何ですか？」ということです。

ユニットタイプを選択する際の考慮事項と、使用例を次に示します。

絶対対。相対単位

使用する単位のすべてのオプションを検討するときは、絶対単位と相対単位の2つのカテゴリの単位を検討することが重要です。

絶対単位

「絶対」であるユニットは、親要素またはウィンドウサイズに関係なく、同じサイズです。これは、絶対単位を持つ値で設定されたプロパティが、電話または大型モニター（およびその間のすべて！）で見たときにそのサイズになることを意味します。

絶対単位は、応答性が考慮されていないプロジェクトで作業する場合に役立ちます。たとえば、サイズを変更できないデスクトップアプリは、デフォルトのサイズに合わせてスタイルを設定できます。ウィンドウが拡大縮小されない場合は、コンテンツも拡大縮小する必要はありません。

ヒント：絶対単位は、画面サイズが変更されても拡大縮小されないため、レスポンシブサイトにはあまり適していません。

絶対単位	説明	例
px	1インチの1/96（96px = 1インチ）	フォントサイズ：12px;
pt	1インチの1/72（72pt = 1インチ）	フォントサイズ：12pt;
PC	12pt = 1pc	フォントサイズ：1.2pc;
cm	センチメートル	フォントサイズ：0.6cm;
んん	ミリメートル（10 mm = 1 cm）	フォントサイズ：4mm;
の	インチ	フォントサイズ：0.2インチ;

ピクセル（px）は、通常、画面の最も一般的な絶対単位です。センチメートル、ミリメートル、インチは印刷でより一般的であり、それらがオプションであるとさえ知らなかったかもしれません！

相対単位

相対単位は、親またはウィンドウのサイズ（単位によって異なります）に対してスケーリングされるため、レスポンシブサイトのスタイル設定に役立ちます。

原則として、レスポンシブサイトのデフォルトとして相対単位を使用できます。これにより、さまざまな画面サイズのスタイルを更新する必要がなくなります。

相対単位は、どちらを使用するかを決定する際に絶対単位よりも少し難しい場合があるため、オプションについて詳しく見ていきましょう。

相対単位	説明
%	そのプロパティの親要素の値に相対的
em	要素の現在のフォントサイズを基準に
レム	ルートのフォントサイズを基準にしています（例： `<html>`要素）。「rem」=「rootem」
ch	文字数（1文字は現在のフォントの0 /ゼロの幅に等しい）
vh	ビューポートの高さ（ウィンドウまたはアプリのサイズ）を基準にしています。 1vh=ビューポートの高さの1/100
vw	ビューポートの幅を基準にしています。 1vw=ビューポートの幅の1/100。
vmin	ビューポートの小さい方の寸法を基準にしています（例：縦向きの場合、幅は高さよりも小さいため、幅を基準にしています）。 1vmin=ビューポートの小さい方の寸法の1/100。
vmax	ビューポートのより大きな寸法に関連して（例：縦向きの高さ）。 1vmax=ビューポートの大きい方の寸法の1/100。
元	現在のフォントの小文字の「x」の高さを基準にしています。

これらのオプションのどれをCSSプロパティのタイプごとに使用するのが最適かは必ずしも明確ではありません。たとえば、%は通常、font-sizeよりもwidthのようなレイアウト関連のプロパティに適しています。

次に、各相対単位を使用する場合の例をいくつか示します。

％：子要素に親の幅の10％をマージンとして持たせ、親要素全体を埋めないようにします。親のサイズが変更されると、マージンも更新されます。
```
.child {
  margin: 10%;
}
```
em ：子要素のフォントを親のフォントサイズの半分のサイズにする必要があります（例：セクションのタイトルの下の段落）。
```
.child {
  font-size: 0.5em;
}
```
rem ：font-sizeは、ルート要素のフォントの2倍のサイズである必要があります。これは、親コンテナに関係なくすべて同じサイズである必要があるため、ヘッダーのサイズを決定する方法である可能性があります。
```
.header {
  font-size: 2rem;
}
```
ch ：等幅フォント（文字は常に同じ幅）があり、10文字分のスペースしかありません。
```
.small-text {
  width: 10ch;
}
```
vh ：ランディングページは常にビューポート/ウィンドウの高さである必要があります。
```
.wrapper {
  height: 100vh;
}
```
vw ：ビューポート/ウィンドウの半分の幅のテキストを含むセクションがあります。
```
.half-size {
  width: 50vw;
}
```
vmin ：ビューポートの小さい方のサイズと常に同じ幅の画像があります。ポートレートモードで保持されている電話では、画像はビューポートの幅と同じ幅になります。
```
.min-width {
  width: 100vmin;
}
```
vmax ：ビューポートのより大きな寸法を完全に塗りつぶしたいので、画像が切り取られてもかまいません。たとえば、パターンの画像を背景として使用する場合です。
```
.max-width {
  width: 100vmax;
}
```
ex ：おそらくexに出くわすことはあまりないでしょうが、それは一般的にフォントの中央部分の良い尺度です。フォントのline-heightをフォントの「x」の2倍の高さにしたいとします。
```
.double-x {
  line-height: 2ex;
}
```

全体として、CSSユニットをいつどのように選択するかは、いくつかの質問になります。

ビューポートのサイズが変更されたときに、スタイリングしているものを拡大縮小したいですか？
スケーリングしたい場合、アプリ内で何を相対的にスケーリングしたいですか？

これらの質問に答えたら、使用するユニットを特定するのがはるかに簡単になります。 💪

参考文献

この記事を読むことで、ビューポートユニットをさらに深く掘り下げることができます。または、これら2つのユニットの違いがまだ不明な場合は、emとremユニットに関するこの記事を参照してください。

getdocs

13036

序章