CSS単位リファレンス
px・em・rem・%・vw・vh・vmin・vmax・chなどCSS単位をカテゴリ別に整理し、用途と使い方を解説する無料リファレンス。 コーディング中にすぐ調べたいコード・記号・ショートカット情報を一か所で確認でき、ブラウザ上で即座に検索・コピーでき、登録やインストールなしで無料で使えます。 結果はワンクリックでコピーして、すぐに活用できます。
| 単位 | 名前 | 種類 | 説明 | 例 |
|---|---|---|---|---|
| px | Pixels | absolute | 画面上の1ピクセル。最も基本的な単位。 | font-size: 16px; |
| em | Em | relative | 親要素のfont-sizeの倍数。 | padding: 1.5em; |
| rem | Root Em | relative | ルート（html）要素のfont-sizeの倍数。 | margin: 2rem; |
| % | Percent | relative | 対応する親プロパティに対する割合。 | width: 50%; |
| vw | Viewport Width | viewport | ビューポート幅の1%。 | width: 100vw; |
| vh | Viewport Height | viewport | ビューポート高さの1%。 | height: 100vh; |
| vmin | Viewport Min | viewport | vwとvhのうち小さい方の1%。 | font-size: 5vmin; |
| vmax | Viewport Max | viewport | vwとvhのうち大きい方の1%。 | width: 50vmax; |
| dvh | Dynamic VH | viewport | 動的ビューポート高さ（モバイルのアドレスバーを考慮）。 | height: 100dvh; |
| svh | Small VH | viewport | 最小のビューポート高さ。 | min-height: 100svh; |
| lvh | Large VH | viewport | 最大のビューポート高さ。 | max-height: 100lvh; |
| ch | Character | relative | 「0」の文字幅を基準にします。 | max-width: 60ch; |
| ex | X-Height | relative | 「x」の文字高さを基準にします。 | line-height: 2ex; |
| cm | Centimeters | absolute | センチメートル。印刷用。 | width: 10cm; |
| mm | Millimeters | absolute | ミリメートル。印刷用。 | margin: 5mm; |
| in | Inches | absolute | インチ（1in = 96px）。 | width: 2in; |
| pt | Points | absolute | ポイント（1pt = 1/72in）。 | font-size: 12pt; |
| cqi | Container Inline | container | コンテナのインラインサイズの1%。 | font-size: 5cqi; |
| cqb | Container Block | container | コンテナのブロックサイズの1%。 | padding: 2cqb; |
19개 표시 중
埋め込み
最終更新: 2026年 · 無料オンラインツール
CSS単位リファレンスとは？
px・em・rem・%・vw・vh・vmin・vmax・chなどCSS単位をカテゴリ別に整理し、用途と使い方を解説する無料リファレンス。 コーディング中にすぐ調べたいコード・記号・ショートカット情報を一か所で確認でき、ブラウザ上で即座に検索・コピーでき、登録やインストールなしで無料で使えます。 結果はワンクリックでコピーして、すぐに活用できます。
使い方
- 1検索— キーワードで必要な項目を検索してください。
- 2カテゴリ— カテゴリボタンでフィルタリングしてください。
- 3コピー— 必要な項目をコピーしてください。
関連ツール
px ↔ rem 変換ツールカスタム可能なルートフォントサイズを基準にCSSのpxとrem単位を双方向変換し、コピー可能な参照表とCSSスニペットを提供する無料オンラインツールです。 CSV・JSON・色・時刻など異なるデータ形式を変換したいときに便利で、すべてブラウザ内で処理されるため入力データが外部に送信されず、インストールや登録なしで無料で利用できます。
ブラウザ互換性チェッカーCSS・JavaScript・HTML・Web APIの機能について、Chrome・Firefox・Safari・Edge各ブラウザの対応バージョンを確認できる無料オンライン参照ツール。 コーディング中にすぐ調べたいコード・記号・ショートカット情報を一か所で確認でき、ブラウザ上で即座に検索・コピーでき、登録やインストールなしで無料で使えます。
CSSグラデーションジェネレーターlinear・radial・conicのCSSグラデーションを作成し、カラーストップや角度を調整してCSSコードをコピーできる無料ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。 結果はワンクリックでコピーして、すぐに活用できます。
CSSボックスシャドウジェネレーターオフセット・ぼかし・広がり・色・内側影（inset）を調整しながらbox-shadowをリアルタイムでプレビューし、完成したCSSコードをコピーできる無料オンライン生成ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。
よくある質問
px em rem vh vwなどのCSS単位をカテゴリ別に参照できる無料オンラインツールです。
はい、キーワードでリアルタイム検索できます。
いいえ。静的データを使用し、オフラインでも使用可能です。
はい、項目をクリックしてコピーできます。
はい、レスポンシブデザインでモバイルでも動作します。