Line-height（行送り）計算
ピクセル単位の「行送り」を、CSSの「line-height（倍率）」へとサクッと変換計算します。
このツールについて
FigmaやXDなどのデザインデータで指定された「行送り（px）」を、CSSで使いやすい「line-height（倍率）」に変換する計算ツールです。フォントサイズと希望の行送りを入力するだけで、適切な記述値がわかります。
コーディング中、デザインカンプに「文字サイズ16px、行送り24px」と書かれているのを見て、電卓を叩いて
line-height: 1.5; を計算した経験はありませんか？ このツールを使えば、そんな地味な割り算を素早く行えます。ウェブデザインにおいて、文字の読みやすさを左右する行間（line-height）を、ピクセル単位の直感的なイメージからCSSの単位を持たない相対値（倍率）へとスマートに変換します。ツール操作
line-height（倍率） —
CSS —
使い方
- フォントサイズ（px）と希望する行送り（px）を入力します
- line-heightの倍率が即座に計算されます
- 計算結果をCSSのline-heightプロパティに使用します
いつ使うか
デザインカンプの行送りをCSSに変換、タイポグラフィの行間設計に。
使用例
16px・送り24px → line-height: 1.5、14px・送り21px → line-height: 1.5。
よくある質問
line-heightの単位なしの意味は？
フォントサイズに対する倍率。1.5ならフォントサイズの1.5倍の行の高さになります。継承時も相対的です。
行送りとline-heightの違いは？
同じ概念。デザインでは「送り」、CSSではline-height。送り(px) ÷ フォントサイズ(px) = line-heightの倍率です。
line-heightの推奨値は？
本文は1.5〜1.8が読みやすい。見出しは1.2〜1.4。このツールでデザインの送り(px)から倍率を計算できます。
行送りをpxで指定する場合の計算は？
希望する行の高さ(px) ÷ フォントサイズ(px) = line-heightの倍率。例: 24px送り ÷ 16px = 1.5。
line-height: normalとは？
ブラウザのデフォルト（通常1.2前後）。フォントによって異なります。明示的に指定する方が一貫性が出ます。
タイポグラフィの行間設計のコツは？
本文は1.5〜1.8で可読性確保。見出しはやや詰めて1.2〜1.4。このツールでpx送りから倍率を算出できます。
デザインカンプの送りとは？
行と行の間隔。IllustratorやFigmaでは「行送り」や「leading」で指定。pxで渡された値をline-height倍率に変換する必要があります。
line-heightを継承させるには？
単位なし（1.5など）で指定すると、子要素のフォントサイズに応じて相対的に継承されます。px指定は固定値です。
複数行テキストの行間を揃えるには？
line-heightで倍率を統一。フォントサイズが異なる要素でも、同じ倍率なら視覚的な間隔が揃います。
行送り計算ツールの使い方は？
フォントサイズ(px)と希望する行送り(px)を入力するだけで、line-heightの倍率が即座に計算されます。
このページで扱うキーワード
Line-height（行送り）計算は「行間」「line-height」「フォント」「デザイン」などで検索される開発者向け無料ツールです。ピクセル単位の「行送り」を、CSSの「line-height（倍率）」へとサクッと変換計算します。
基本的な使い方（ワークフロー）
- フォントサイズ（px）と希望する行送り（px）を入力します
- line-heightの倍率が即座に計算されます
- 計算結果をCSSのline-heightプロパティに使用します
具体的な使用シーン
- デザインカンプの行送りをCSSに変換、タイポグラフィの行間設計に。
- FigmaやXDなどのデザインデータで指定された「行送り（px）」を、CSSで使いやすい「line-height（倍率）」に変換する計算ツールです。フォントサイズと希望の行送りを入力するだけで、適切な記述値がわかります。
- px送り→倍率の変換
- フォントサイズ基準
プライバシーとデータの扱い
データは端末内で処理され、当サイトのサーバーには保存されません。
注意点
- コピーした結果を本番環境にそのまま貼る前に必ず再確認する
- ブラウザ拡張機能がページ動作を妨げる場合はシークレットウィンドウで試す
- 大量データ入力時はタブを閉じずに処理完了を待つ
関連する学習コンテンツ
よくある質問（FAQ）
Line-height（行送り）計算は無料ですか？
無料・登録不要で利用できます。
入力データはサーバーに送られますか？
データは端末内で処理され、当サイトのサーバーには保存されません。
対応ブラウザは？
Chrome、Edge、Firefox、Safari の最新版で動作確認しています。
オフラインで使えますか？
オフラインでも基本機能は動作します（初回読み込み後）。
CLIやデスクトップアプリとの違いは？
Line-height（行送り）計算は、コマンドラインやデスクトップアプリの代替として、インストール不要ですぐ使えるオンラインツールです。
いつ使うツール？
こんなときに使います: デザインカンプの行送りをCSSに変換、タイポグラフィの行間設計に。
使用例は？
具体例: 16px・送り24px → line-height: 1.5、14px・送り21px → line-height: 1.5。
主な機能は？
px送り→倍率の変換、フォントサイズ基準、即時計算
他の類似ツールとの使い分けは？
Line-height（行送り）計算はブラウザ完結・インストール不要が強みです。CLIやIDE拡張と併用し、手元ですぐ試したいときに使うのが効率的です。
検索キーワード・別名
行間、line-height、フォント、デザイン
関連ツール
ツールセット
タイポグラフィセット