主要ブラウザでの互換性はどうですか？

CSS単位ガイドの出力はChrome、Safari、Firefox、Edgeの最新版で動作します。古いブラウザ対応が必要な場合はCaniuse.comで各プロパティの対応状況を確認してください。

対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

デザイン・CSS無料登録不要

CSS単位ガイド

CSSの長さ単位(px/em/rem/vw/vh/ch等)の違いと使い分けを解説する無料オンラインツール。

入力

結果

--- 絶対単位 ---
px   ピクセル        (最も一般的)
cm   センチメートル   (印刷用)
mm   ミリメートル     (印刷用)
in   インチ          (印刷用)
pt   ポイント        (フォント: 1pt=1/72in)

--- 相対単位 ---
em   親要素のフォントサイズ基準
rem  ルート要素のフォントサイズ基準
%    親要素の幅/高さ基準
ch   "0"の幅 (等幅フォントの文字幅)
ex   "x"の高さ (あまり使わない)

--- ビューポート ---
vw   ビューポート幅の1%
vh   ビューポート高さの1%
dvh  Dynamic viewport height
svh  Small viewport height
lvh  Large viewport height
vmin vw/vhの小さい方
vmax vw/vhの大きい方

--- 推奨使い分け ---
フォント:  rem (アクセシビリティ)
余白:      rem or px
レイアウト: %, vw, fr(grid)
ボーダー:   px
メディアQ:  px or em

FAQ

よくある質問

はい。CSS単位ガイドはレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

こちらもおすすめ

CSS角度単位

CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSS display一覧

CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。

Flexboxガイド

CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。

CSS Gridガイド

CSS Gridの主要プロパティと値の早見表。2次元レイアウト設計に便利な無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...