CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は

Post on:2025年7月31日

sponsorsr

CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単位もたくさんあります。

Webサイトやスマホアプリでフォントのサイズ、スペース、ポジション、FlexboxとGrid、要素の幅または高さに使用する場合、どのようにCSSの単位を選べばよいのかを紹介します。

What CSS length unit should you use?

CSSの単位はどこでそれぞれ何を使えばよいか
ポジショニング、ディテール・エフェクトに適したCSSの単位
スペースに適したCSSの単位
フォントサイズに適したCSSの単位
FlexboxとGridに適したCSSの単位
要素の幅または高さに適したCSSの単位

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の単位は、下記の通りです。

px
rem

ほとんどの場合、pxを使用します。pxであれば、細かい調整も簡単にできます。ただし、ほかの場所の単位にremを使用している場合は、一貫性を保つためにremを使い続けたほうがよいでしょう。好みに応じて、emも使えます。

スペースに適したCSSの単位

スペース（margin, padding, gap）に適したCSSの単位。

スペースに適したCSSの単位は、、下記の通りです。

px, em, rem
vw/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の単位。

rem
em
clamp()
cqi
lh, 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, rem
fr
fr, px, rem, auto, min-content
max-width, min-width
flex-grow, flex-shrink

要素間のギャップに使用する場合は、固定サイズにはpx, rem, emを使用し、流動的であればビューポート単位（vw, vh）やclamp()が適しています。

グリッドの列・行に使用する場合は、固定サイズにはpxでおそらく問題はありませんが、他でremを使用しているのであれば一貫性を保つためにremがお勧めです。

流体サイズにはfrです。fr単位は残りのスペースを使用します。たとえば、幅が1frの列が3つある場合、列は利用可能なスペースに合わせて調整され、すべて同じ幅になります。また、%も機能しますが、ギャップを考慮しないとオーバーフローが発生する可能性があります。frではその問題を回避できます。

場所によって固定と流体が混在する場合は、流動的なものは利用可能なスペースを占めるためfrを使用します。特定の列や行のコンテンツのサイズに一致させたい場合はautoまたはmin-contentを使用します。固定サイズが必要な場合はpxまたはremを使用して設定します。

flexアイテムはサイズ設定が難しい場合がありますが、それがflexboxを使用する目的であり、柔軟性が求められます。要素が特定のサイズより大きくなるのを防ぎたい場合は、max-widthにpx, remを使用します。flexアイテムはデフォルトでは拡大しません。そのため、通常flexアイテムでflex-growを0にした場合にのみ、この設定が必要になります。max-widthを使用すると、そのサイズを超えて拡大することはありません。

逆に要素が特定のサイズより小さくなるのを防ぎたい場合は、min-widthにpx, remを使用します。

要素を特定のサイズにしたい場合は、つまりflexアイテムを縮小または拡大したくない場合は、flex-growとflex-shrinkの両方を0にします。そして、widthやflex-basisを設定するだけでそのサイズに合わせることができます。

autoについて詳しくは、下記をご覧ください。

CSSのプロパティの値に「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど

要素の幅または高さに適したCSSの単位

要素の幅または高さに適したCSSの単位は、使用するケースによってさまざまな単位を使用します。

px, rem, %, ch
vw
vh, svh, dvh, lvh
cqi

まずは、要素の幅から。幅にはwidth, min-width, max-widthの3つのプロパティを使用します。

max-widthに使用する単位は、pxで問題ないです。ただし、他の場所でremを使用している場合は、一貫性を保つためにremを使用します。また、chは約1文字分の幅に相当する単位で、行の長さの最大幅を簡単に設定できるため、非常に便利です。

widthとmin-widthに使用する単位の考え方は同じです。ます、その要素に幅指定が本当に必要か確認してください。よくある間違いの一つは、幅が必要ないのに幅を宣言してしまうことです。固定幅に使用する場合はpx, remです。他の要素の幅を基準に幅を設定する場合は、%およびcqiを使用します。ビューポートに対して相対的に幅を設定する場合は、ビューポート単位（vw）を使用します。

cqiなど、コンテナクエリに関する単位について詳しくは、下記をご覧ください。