CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は
CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。
Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。
What CSS length unit should you use?
CSSの単位はどこでそれぞれ何を使えばよいか
CSSの単位はそれぞれどこで使えばいいのかは、下記ページのフローチャートで質問に答えるだけで分かります。
What CSS length unit should you use?
以下は、そのフローの解説です。
フローの入り口は、下記のように分かれています。
- ポジショニング、ディテール・エフェクトに適したCSSの単位
- スペースに適したCSSの単位
- フォントサイズに適したCSSの単位
- FlexboxとGridに適したCSSの単位
- 要素の幅または高さに適したCSSの単位
ポジショニング、ディテール・エフェクトに適したCSSの単位
まずは、ポジショニング（top, right, bottom, left）、ディテール・エフェクト（border, outline, shadowなど）に適したCSSの単位から。
ポジショニング、ディテール・エフェクトに適したCSSの単位は、下記の通りです。
pxrem
ほとんどの場合、pxを使用します。pxであれば、細かい調整も簡単にできます。ただし、ほかの場所の単位にremを使用している場合は、一貫性を保つためにremを使い続けたほうがよいでしょう。好みに応じて、emも使えます。
スペースに適したCSSの単位
スペース（margin, padding, gap）に適したCSSの単位。
スペースに適したCSSの単位は、、下記の通りです。
px,em,remvw/vh,min(),clamp()
段落間スペースには、emとremが適しています。remが使用できる場合もありますが、emを使用することで、テキストのフォントサイズに応じてスペースを調整できます。これにより全体的なフローがよくなります。
スペースをpaddingで確保する場合は、使用するケースによって異なります。まず、固定値が必要な場合はremかpxを使用します。柔軟性の高い値が必要な場合は、emが最適です。たとえば、ボタンにemを使用し、フォントサイズを変更して小さいバージョンや大きいバージョンを作成すると、paddingが自動的に調整されます。
利用可能なスペースの量に応じてサイズを調整したい場合、たとえばスクリーンのサイズが大きい場合はpaddingを多くするなどの場合は、ビューポート単位（vw/vh）が使用できますが、通常はスペースが大きすぎたり小さすぎたりするのを避けるためにclamp()でサイズを調整するのが最適です。
pxなど、絶対単位について詳しくは、下記をご覧ください。
相対単位が主流の現在、絶対単位（px, in, mmなど）は特定のケースで非常に役立ちます
フォントサイズに適したCSSの単位
フォントサイズ（html, body, hx, p, a, divなど）に適したCSSの単位。
rememclamp()cqilh,ex,cap
htmlタグやbodyタグにfont-sizeを定義する場合は、2通りです。レスポンシブにする必要がない場合は、remを使用します。使いやすく、予測可能で、そして非常に重要なポイントはユーザーの選択を尊重します。ユーザーがOSまたはブラウザでフォントのサイズを変更した場合でも、同じ効果が得られます。レスポンシブにする場合は、clamp()を使用します。clamp()関数には3つの値（最小値、推奨値、最大値）を設定します。
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
特定の要素（hn, p, ol, ulなど）で異なるサイズを設定したい場合は、親要素のfont-sizeを基準に相対的に定義したい場合は、emを使用します。より正確な値を定義したい場合は、lh, ex, capを使用します。
これはインライン要素（a, span, strongなど）も同じです。
レイアウト要素（div, nav, main, aside, footerななど）に設定する場合は、htmlタグやbodyタグの場合と同じです。
フォントに使用する単位について詳しくは、下記をご覧ください。
フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
FlexboxとGridに適したCSSの単位
FlexboxとGridに適したCSSの単位は主に、要素間のギャップ、グリッドの列・行、アイテムの幅に使用します。
px,remfrfr,px,rem,auto,min-contentmax-width,min-widthflex-grow,flex-shrink
要素間のギャップに使用する場合は、固定サイズにはpx, rem, emを使用し、流動的であればビューポート単位（vw,