CSS 単位リファレンス
すべてのツール
無料
すべての CSS 単位 — 絶対（px、cm、pt）、フォント相対（em、rem、ch）、ビューポート（vw、dvh）、コンテナクエリ、グリッド（fr）、角度、時間、解像度 — を、説明、「使いどころ」メモ、コピーしやすいトークンとともに、検索・タイプ絞り込み可能なリファレンスで参照できます。ブラウザ内、無料。
すべての CSS 単位を解説します。すべて組み込みリファレンスを使ってブラウザ内で動作します — サーバーには何も送信されません。
検索に一致する単位がありません。
別の単位やカテゴリを試してください — 例: rem、dvh、fr、angle。
CSS 単位リファレンスについて
CSS単位リファレンスは、この言語が提供するすべての単位(合計45種類)を、タイプ別に整理して収録しています。px、cm、ptのような絶対単位、em、rem、ch、lhのようなフォント相対単位、vwとvhから新しいsvh、lvh、dvhまでのビューポート単位、cqwやcqiのようなコンテナクエリ単位、グリッドのfr単位、そして角度・時間・解像度・パーセンテージです。
各カードは単なる定義以上の情報を提供します。コピー可能な等幅フォントの単位トークン、正式名称、カテゴリー、どのように計算されるかを平易に説明したもの、そしてその単位が真価を発揮する場面と別の単位のほうが適している場面を示す実践的な「使いどころ」のメモです。
検索はトークン・名称・意味にマッチするため、rem、viewport width、root といった入力すべてで該当する単位が見つかります。タイプチップでグリッドを1つのファミリーに絞り込むこともできます。すべて内蔵のリファレンスからブラウザ内で動作し、サーバーには何も送信されません。
CSS 単位リファレンスの使い方
- トークン・名称・意味で単位を検索します。例: rem、viewport width、angle。
- タイプチップを使って、絶対・フォント相対・ビューポート・コンテナ・グリッド・角度・時間・解像度・パーセンテージの単位にグリッドを絞り込みます。
- 各単位の説明と「使いどころ」のメモを読んで、適切な単位を選びます。
- コピーボタンをクリックして、スタイルシート用に単位トークンを取得します。
よくある質問
フォントサイズや、ユーザーの希望するテキストサイズに合わせて拡大縮小すべきものにはremを使ってください。remはルートのフォントサイズを追跡するため、ブラウザのアクセシビリティ設定が機能します。ヘアラインボーダーのように、視覚的に一定を保つべきものにはpxを使ってください。
emは現在の要素自身のフォントサイズを基準とするため、入れ子になった要素では値が積み重なります。remは常にルート要素を基準とするため、予測しやすい結果になります。そのため、間隔やタイプスケールのデフォルトの選択肢としてremが一般的になりました。
モバイルブラウザはツールバーを表示・非表示にすることで表示領域の高さが変わりますが、vhはより大きいレイアウトサイズに固定されたままです。動的単位のdvhはツールバーの移動に応じて実際の可視高さを追跡し、svhとlvhはそれぞれ最小と最大の状態に固定されます。
frはグリッドコンテナの余白を割合で分配します。grid-template-columns: 2fr 1fr は、固定トラックとギャップを差し引いた後、1列目に2列目の2倍の余白幅を与えます。frはグリッドのトラック定義の中でのみ存在します。
これらはビューポートではなく、最も近いクエリコンテナを基準に要素のサイズを決めます。cqwはコンテナの幅の1%、cqiはコンテナのインラインサイズの1%です。これにより、画面サイズに関係なく、コンポーネントが置かれているボックスに合わせて拡大縮小できます。
はい。45種類すべての単位が、完全にブラウザ内で動作するページで無料で解説されています。登録もサーバーへのリクエストも不要です。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。