px、em、rem、vw、vh、frなどすべてのCSSユニットを比較します。各ユニットの例、ブラウザサポート、使用タイミングを含みます。
| ユニット | px、em、rem、vw、vh、frなどすべてのCSSユニットを比較します。各ユニットの例、ブラウザサポート、使用タイミングを含みます。 | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| ユニット | px、em、rem、vw、vh、frなどすべてのCSSユニットを比較します。各ユニットの例、ブラウザサポート、使用タイミングを含みます。 | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| ユニット | px、em、rem、vw、vh、frなどすべてのCSSユニットを比較します。各ユニットの例、ブラウザサポート、使用タイミングを含みます。 | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| ユニット | px、em、rem、vw、vh、frなどすべてのCSSユニットを比較します。各ユニットの例、ブラウザサポート、使用タイミングを含みます。 | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| ユニット | px、em、rem、vw、vh、frなどすべてのCSSユニットを比較します。各ユニットの例、ブラウザサポート、使用タイミングを含みます。 | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
:rootのフォントサイズに合わせてスケール、ユーザーのブラウザ設定を尊重、コンポーネント間で一貫性
pxを避ける — ユーザーのフォント設定を尊重しない
rem: 一貫したグローバル間隔; em: コンポーネントのフォントサイズに相対した間隔
スケールするコンポーネントにはpxを避ける
% : 流動コンテナ; ch (45～75ch) : 最適な散文の行長
メインコンテンツ幅に固定pxは避ける
dvh: モバイルブラウザのChromeの重なりを回避; vh: デスクトップのみに適切
モバイルで100vh単独使用を避ける — URLバーがコンテンツを切り取る
残りのスペースを比例的に分配; gridで%よりクリーン
frを固定pxカラムと安易に組み合わせない
ピクセル精度のレンダリング; テキストと一緒にスケールする必要なし
ここでは相対単位は不要
フォントサイズにはremを使用してください。remはルート要素のフォントサイズ（通常16px）に相対的で、ルートフォントサイズを変更することでUI全体を簡単にスケールできます。これはユーザーのブラウザフォントサイズ設定も尊重し、アクセシビリティを向上させます。pxはボーダー、シャドウ、スケールすべきでない要素にのみ使用してください。
emは親要素のフォントサイズに相対的で、ネストされた要素で複合する可能性があります。remはルート（'<'html>）要素のフォントサイズに相対的で、より予測可能です。フォントサイズには通常remが好まれます。emはコンポーネント自身のフォントサイズに合わせてスケールすべきパディングやマージンに便利です。
ブラウザのビューポートに相対してサイズを決める要素（フルスクリーンのヒーローセクション、モーダルなど）にはvw/vhを使用してください。親コンテナに相対してサイズを決める要素にはパーセンテージを使用してください。アドレスバーが高さに影響するモバイルでは、dvh（動的ビューポート高さ）がvhより好まれます。
コンテナクエリ単位（cqw、cqh、cqi、cqb）はビューポートではなくコンテナ要素のサイズに相対的です。コンテナコンテキスト（container-type: inline-size）が必要です。ビューポートサイズに関係なく、コンテナサイズに適応する必要がある真にレスポンシブなコンポーネントに最適です。