web計。
webデザイナ向けアレコレ計算式、略してweb計。
WordPressのfunctions.phpでのカスタマイズをコピペで簡単にできるWP-functions generatorもどうぞ
大丈夫だとは思いますが、計算が違ってても責任は負いかねます。いちおう免責として。
px × 約px
px × 約px
px × 約px
px × 約px
px × 約px
px × 約px
px px
比率は （）
px にすると高さは px
px にすると幅は px
短い方がpx × 約px（px）
長い方がpx × 約px（px）
pxならpxとpxに分割される
pxとpx（長い方）なら合計約px
pxとpx（短い方）なら合計約px
短い方がpx × 約px（px）
長い方がpx × 約px（px）
pxならpxとpxに分割される
pxとpx（長い方）なら合計約px
pxとpx（短い方）なら合計約px
px
「任意の倍率」に入力するとそちらが優先されます。ルートのfont-sizeは基準サイズとして計算しています。
| ステップ | px | rem | プレビュー |
|---|
幅pxで カラム個で マージンpxの場合、カラム枠の幅がpx
幅pxで カラムのwidthがpxで マージンpxの場合、 カラムが個入る
カラムとカラムの間だけにマージンが入る前提（末尾のマージンは数えない）で計算しています。
px
px
px
px
変換結果：
→ px
→ px
→ px
左のルート／親要素のfont-size、カンプ幅を基準に計算します。
px
px
%
Photoshop / Illustrator のトラッキングは 1/1000em 単位、Figma の % は 1/100em 単位です。
px px
px
行送りは px（文字の上下の余白はそれぞれ px）
Figma / XD の「行の高さ」はそのまま行送り（px）です。無単位の line-height は子要素に倍率が継承されるため、原則こちらを使います。
px
px
px
px
px
rem で出力（推奨）
px で出力
ブラウザの幅を変えると、下の文字サイズが実際に変化します。
あのイーハトーヴォのすきとおった風 Aa Bb 0123