流動レイアウト計算ツール
パーセント幅・流動レイアウト計算ツールは、Figmaなどのデザインカンプで確認したtop・left・width・heightのpx値を入力するだけで、親要素に対する%（パーセント）に自動変換できるツールです。position: absoluteで配置したパーツの位置やサイズを、レスポンシブでも崩れないCSSにする際に使えます。
px
px
px
px
px
px
CSS
| パーツ名 | top (px) | left (px) | width (px) | height (px) |
|---|
CSS（全パーツ）
パーセント幅・流動レイアウト計算とは？
パーセント幅・流動レイアウト計算は、Figmaなどのデザインカンプで指定されたpx単位の位置・サイズを、親要素に対する%（パーセント）値に変換するツールです。position: absoluteで配置したパーツの座標や、要素の幅・高さをレスポンシブに追従させたいときに使えます。基準となる親要素の幅・高さを入力するだけで、top・left・width・heightのpx値をまとめて%に変換し、CSSとしてそのままコピーできます。
各機能の説明
-
基準サイズ入力親要素の幅と高さをpxで指定し、%変換の基準として使えます。
-
単一パーツ変換top・left・width・heightを個別に入力し、瞬時に%へ変換します。
-
複数パーツ一括変換テーブル形式で複数パーツをまとめて登録し、一括で変換できます。
-
出力形式の切り替え%値のみ、またはposition: absolute込みのCSSブロックを選べます。
-
行の追加・削除複数パーツ変換では、パーツ数に応じて自由に行を増減できます。
-
コピー機能変換結果のCSSをワンクリックでクリップボードにコピーできます。
こんなときに使う
-
Figmaのカンプをレスポンシブコーディングするときpx指定のデザインを%ベースのCSSに変換して実装できます。
-
1枚絵の上にパーツを重ねて配置するとき背景画像とパーツの位置関係を、画面幅が変わっても崩さず保てます。
-
LPのファーストビューを作成するとき複数の装飾パーツをposition: absoluteで配置する際に活用できます。
-
既存の固定レイアウトをレスポンシブ化するときpxで組まれたレイアウトを%指定に置き換える下準備として使えます。
よくある質問
-
%への変換はどのように計算していますか？
top・heightは基準高さ、left・widthは基準幅に対する割合として計算しています。これはCSSの仕様に準拠したもので、position: absoluteの要素における%指定の基準に合わせています。
-
入力した数値はサーバーに送信されますか？
送信されません。すべての計算はブラウザ内のJavaScriptで完結しており、入力データが外部に送られることはありません。
-
基準高さを空欄のままにしても計算できますか？
基準高さも必ず入力してください。top・heightの%はCSS仕様上、高さを基準に計算されるため、幅だけでは正しい変換結果になりません。
-
単一パーツ変換と複数パーツ一括変換の違いは何ですか？
単一パーツ変換は1つの要素だけを素早く変換したいときに、複数パーツ一括変換は1枚の画像の上に複数パーツを配置するようなケースで、まとめて変換したいときに向いています。
-
出力したCSSはそのままレスポンシブに使えますか？
%指定にすることで親要素のサイズ変化に追従しますが、極端に画面幅が変わる場合はメディアクエリと組み合わせた調整が必要になることもあります。