CSS単位変換とは、Webデザインで使用される様々な長さ単位(px、em、rem、%、vw、vh等)を相互に変換することです。
絶対単位と相対単位
CSS単位は大きく絶対単位と相対単位に分かれます。絶対単位(px、pt、cm等)は固定サイズ、相対単位(em、rem、%、vw、vh等)は基準に対する比率で表現されます。
px(ピクセル)
最も一般的な単位で、画面上の1ドットを表します。固定サイズのため扱いやすいですが、ユーザーのフォントサイズ設定を無視するため、アクセシビリティに課題があります。
em(エム)
親要素のフォントサイズを基準とした相対単位です。1em = 親要素のfont-size。入れ子構造で複利的に計算されるため、深い階層では予期しないサイズになることがあります。
rem(ルートエム)
ルート要素(html)のフォントサイズを基準とした相対単位です。1rem = htmlのfont-size(通常16px)。emと違い入れ子の影響を受けないため、モダンなCSSでは推奨されます。
%(パーセント)
親要素のサイズに対する割合を表します。font-sizeの場合は親のfont-size、widthの場合は親のwidth基準になります。プロパティにより基準が異なるため注意が必要です。
vw/vh(ビューポート単位)
ビューポート(表示領域)のサイズを基準とした単位です。1vw = ビューポート幅の1%、1vh = ビューポート高さの1%。レスポンシブデザインで画面サイズに応じた柔軟なレイアウトを実現できます。
pt/pc(印刷単位)
印刷業界で使用される単位です。1pt = 1/72インチ、1pc = 12pt。印刷用CSSやPDF生成で使用されますが、画面表示には通常pxやremを使用します。
物理単位(cm/mm/in)
実際の物理的な長さを表す単位です。1in = 2.54cm = 25.4mm = 96px(CSS定義)。印刷物との整合性が必要な場合に使用されますが、画面の物理的サイズは保証されません。
リアルタイム変換の利点
本ツールはリアルタイム変換に対応しており、基準値を変更すると即座に結果が更新されます。異なる画面サイズやフォント設定での見え方を素早く確認でき、効率的なCSS設計が可能です。