メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
デザイン・CSS
/
CSS単位チートシート
▧
CSS単位チートシート
design/css-unit-cheatsheet
px、em、rem、%、vw、vh、vmin、vmax、ch、ex の基準を短い日本語で確認できます。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
CSS単位チートシートでは、px、em、rem、%、vw、vh、vmin、vmax、ch、ex の基準を短い日本語で確認できます。
関連する観点として css、units、CSS単位チートシート を確認し、結果をコピーして別の作業に使えます。
項目
内容
px
ピクセル(絶対)
em
親フォント基準
rem
ルート基準
%
親要素基準
vw
ビューポート幅%
vh
ビューポート高%
vmin
vw/vhの小さい方
vmax
vw/vhの大きい方
ch
0文字幅
ex
xの高さ
使い方
Item 列で調べたい CSS 単位を探します。
Content 列で、その単位が何を基準にするかを短く確認します。
フォント連動なら em/rem、画面連動なら vw/vh/vmin/vmax、文字幅連動なら ch/ex を候補にします。
印刷系や dvh まで含む詳細が必要な場合は CSS 長さ単位や CSS 単位ガイドを参照します。
入力例・出力例
INPUT
rem
OUTPUT
ルート基準
チートシートの Content 列に表示される説明です。
INPUT
ch
OUTPUT
0文字幅
フォーム幅や読み幅を文字数感覚で見る単位として確認できます。
よくある利用シーン
CSS レビュー中に、単位名の基準だけを素早く思い出したいとき。
em と rem、vw と vh の違いを短い表で説明したいとき。
初学者向け資料で、主要な長さ単位だけを抜粋して見せたいとき。
詳細なガイドを読む前に、使う候補単位を10個から絞るとき。
結果確認のポイント
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
css、units、CSS単位チートシートの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
CSS単位チートシートの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
料金はかかりますか?
CSS単位チートシートは無料で利用できます。アカウント作成は不要で、単位名と基準の表を開くだけで確認できます。
CSSコードを出力するツールですか?
いいえ。CSS単位チートシートは px、em、rem、vw、ch などの単位名と基準説明を固定表で確認する参照ページです。CSS宣言の生成欄はなく、どの単位を使うかを選ぶ前の早見表として使います。
オフラインでも使えますか?
初回表示後は、表の閲覧自体に外部APIは必要ありません。再読み込みや初回アクセスには通常どおりネットワーク接続が必要です。
関連ツール
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。
Material Elevation
Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。
accent-colorが効く要素
CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。
CSS角度単位
CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。
animation-direction
CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。
animation-fill-mode
CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。