CSS単位変換ツール

① このツールの使い方

• •1. ルートフォントサイズを設定する：html要素のfont-size（remの基準値）を指定します。ブラウザの初期値は16pxです。
• •2. 親フォントサイズを設定する：em変換の基準となる、親要素のfont-sizeを指定します。
• •3. px値を入力する：変換したいpx（ピクセル）の値を入力します。

入力すると同時に、rem・em・vw・vh・pt・pcの各単位に変換した結果が一覧で表示されます。ルートフォントサイズ・親フォントサイズはよく使う14/16/18/20pxのボタンからワンタップで切り替えられます。

② remとemの違い

rem（root em）は、常にhtml要素（ルート）のfont-sizeを基準にした相対単位です。一方emは、その要素の親要素のfont-sizeを基準にする相対単位です。emは要素が入れ子になるたびに基準がどんどん変わっていく（親の中に親がいれば、さらにその親を基準にする）ため、階層が深くなるとサイズの計算が複雑になりがちです。remは常にルートの1点だけを基準にするため、どこで使っても一貫した基準でサイズを考えられ、近年はremが推奨されることが多くなっています。

ほとんどのブラウザのデフォルトでは、html要素のfont-sizeが16pxに設定されているため、特に変更していないサイトでは1rem＝16pxが基本の対応関係になります。

③ vw・vh・pt・pcとは

このツールのvw・vh表示は、それぞれ画面幅1440px・画面高さ900pxを基準にした参考値として計算しています。実際の見え方は閲覧しているデバイスの画面サイズによって変わるため、あくまで目安としてご利用ください。

④ なぜpx以外の単位を使うのか

pxは「絶対的な」ピクセル数を指定する単位ですが、ユーザーがブラウザの文字サイズ設定を変更しても、px指定された文字は大きさが変わりません。一方remやem指定された文字サイズは、ユーザーの設定（ルートのfont-size）に応じて相対的に拡大・縮小されるため、視力の弱いユーザーが文字を大きくする設定をしても、そのサイトの文字がちゃんと大きく表示される、というアクセシビリティ上のメリットがあります。近年のCSS設計では、フォントサイズにはrem、画面いっぱいに広げたい要素の余白などにはvw・vhを使う、という使い分けがよく見られます。

⑤ 実務での使いどころ

デザインツール（Figmaなど）から受け取ったデザインカンプは、多くの場合px単位で数値が指定されています。それをコーディングする際、remベースで管理しているプロジェクトのルールに沿って変換したいときにこのツールが便利です。たとえばルートフォントサイズが16pxのプロジェクトで「24pxの見出し」を実装したい場合、24÷16＝1.5remとすぐに計算できます。レスポンシブデザインで文字サイズを画面幅に応じて可変にしたいときは、vw単位への変換結果を参考に、clamp()関数などと組み合わせて使うのも実務でよくあるパターンです。

CSSの単位に関する基礎知識はCSS単位の基礎を解説した記事にまとめています。影のスタイルを数値で調整したい場合はCSS box-shadow生成ツールもあわせてご利用ください。

⑥ ルートフォントサイズ16pxのときのrem早見表

よく使うpx値を毎回入力しなくても済むように、ルートフォントサイズが標準的な16pxのときのrem換算をまとめました。実務でよく出てくる本文サイズ・見出しサイズの目安として使ってください。

ルートフォントサイズを14pxや18pxに変更しているプロジェクトの場合は、上の表の値をそのまま使うと計算がずれてしまいます。そのようなときは、このツールの「ルートフォントサイズ」欄をプロジェクトの実際の値に変更してから、px値を入力し直してください。

⑦ 単位を混在させるときの注意点

1つのプロジェクトの中で、あるコンポーネントはpx、別のコンポーネントはremというように単位が混在していると、あとから全体の文字サイズを一括で調整したいときに苦労します。特にアクセシビリティの観点では、ブラウザの文字サイズ設定を変更したユーザーに対して、remやem指定の文字だけが拡大され、px指定の文字だけが変わらないという不揃いな見た目になりがちです。新しくコンポーネントを作るときは、チーム内で「文字サイズはrem、余白はpxまたはrem」のようなルールをあらかじめ決めておくと、後からの手直しが少なく済みます。このツールで変換結果を確認しながらルールを決めておくと、後から見返す際のリファレンスとしても使えます。単位の選び方1つで、サイト全体のアクセシビリティや保守性が大きく変わることを覚えておいてください。日々のコーディングの中で迷ったときは、このツールで数値を確認しながら判断する習慣をつけると安心です。小さな判断の積み重ねが、後々の開発効率にも影響してきます。