PX→%換算

PXと%を同じ基準で相互換算

このページでは、ピクセル値とパーセント値を、入力した「基準ピクセル」に対する比率として換算できます。PX欄に値を入れると%欄が更新され、%欄から入力すれば対応するPXを確認できます。初期状態はPX 16、基準ピクセル16です。基準は用途に合わせて変更できます。

たとえば基準を16px、換算する値を24pxにすると、24 ÷ 16 × 100 = 150%です。同じ基準で75%をPXに戻すと、75 ÷ 100 × 16 = 12pxになります。式は入力した2つの数値の比率を表し、CSSの表示結果そのものを予測するものではありません。

CSSの%はプロパティごとに意味が変わる

CSSのパーセント値は、常にルート文字サイズや親要素の幅を基準にするわけではありません。たとえば font-size の%は親要素の計算済み文字サイズを基準にしますが、width は包含ブロックの幅を基準にします。したがって、文字サイズの基準として16pxを使った換算結果を、そのまま幅のCSSに転用すると意図と異なることがあります。

幅を%で指定したい場合は親側の幅など、そのプロパティが実際に参照する値を基準ピクセルに設定してください。この計算ページが行うのは数値換算であり、CSSの階層やレイアウトを読み取って適切な基準を自動判定するものではありません。

仕様で確認できるパーセント値の参照先

基準を決めてから換算する

1. 用途に合う参照値を決める

   文字サイズなら親要素の計算済み文字サイズ、幅なら包含ブロックの幅など、CSSプロパティの規則に沿って基準を確認します。単に初期値が16pxだからという理由で選ばないようにします。

2. 基準ピクセルを入力する

   換算設定の基準ピクセルを実際の参照値にします。初期値は16pxです。たとえば親の文字サイズが20pxなら20、親の幅が960pxなら960を入力します。

3. どちらかの値を入力する

   PX欄または%欄に数値を入れると、もう一方の欄が連動して更新されます。例として基準960px、値240pxなら25%です。逆に25%を入れると240pxになります。

4. 結果を確認してコピーする

   入力欄の結果は小数点以下最大4桁で表示されます。よく使う値の一覧には8、12、14、16、18、20、24、32、48、64pxがあり、各結果は基準に応じて変わります。PX側・%側のコピー操作を利用できます。

換算結果をCSSに使う前の確認

基準ピクセルには何を入力すればよいですか？

換算したいCSSプロパティが参照する実寸です。文字サイズなら親要素の計算済み文字サイズ、幅なら包含ブロックの幅が候補になります。用途が決まっていない場合、初期値16pxは計算上の基準にすぎず、CSS全般の共通基準ではありません。

24pxは何%ですか？

基準によって変わります。基準16pxなら150%、基準960pxなら2.5%です。計算式は「24 ÷ 基準ピクセル × 100」です。

幅を24pxから%にしたい場合も使えますか？

比率の計算には使えます。幅の%は通常、文字サイズではなく包含ブロックの幅を参照するため、その幅を基準ピクセルに設定してください。親幅が960pxなら24pxは2.5%です。

入力した値を変更すると表示結果はどうなりますか？

PXまたは%のどちらを編集しても、反対側の値が計算し直されます。よく使う値一覧も現在の基準に合わせて変わります。リセットするとPXと基準が16に戻ります。

結果を使う前に押さえたい範囲

表示される%は、指定したPXと基準値の算術上の比率です。CSSに適用した際の寸法や継承結果は、対象プロパティとページのレイアウト条件によって決まります。

• 基準ピクセルは目的に応じて設定してください。幅、高さ、文字サイズなどで%が参照する対象は同一ではありません。特に高さの%は、包含ブロックの高さがレイアウト上確定しているかも確認が必要です。
• 初期基準16pxは計算開始用の値です。プロジェクトや親要素が16pxを使っていることを示す情報ではありません。
• 計算結果は小数点以下最大4桁、一覧表示は最大3桁に丸められます。厳密な寸法合わせでは、丸めた値を実際のレイアウトで再確認してください。
• この換算だけではCSSプロパティが%を受け付けるか、負の値を許すかまでは判断しません。適用先の仕様とデザイン要件も確認してください。