line-height・余白計算ツール
line-heightの倍率計算と、行間を考慮した要素間の余白計算を切り替えて使えます。
行間を確認できます。
line-height: 1.75;line-height・余白計算ツールの使い方
このツールでは、デザインデータに記載された文字サイズと行間からline-heightの倍率を計算できます。また、文字の上下に含まれる行間を考慮して、要素同士を見た目どおりの距離にするためのmarginも計算できます。
- 「要素間の余白」または「line-height計算」を選択します。
- 文字サイズ・行間・確保したい見た目上の余白を入力します。
- 必要に応じてpx・em・remから出力単位を選択します。
- プレビューと計算結果を確認します。
- 生成されたCSSをコピーして使用します。
2つの計算モード
line-height計算
文字サイズとデザイン上の行間を入力すると、CSSのline-heightに指定する単位なしの倍率を計算します。例えば、文字サイズ16px・行間28pxの場合は次の値になります。
line-height: 1.75;計算式は「行間 ÷ 文字サイズ」です。単位なしの値にすると、文字サイズが変更された場合も同じ比率を保ちやすくなります。
要素間の余白計算
見出しと本文のようにline-heightが設定されたテキスト同士では、指定したmarginだけでなく、それぞれの文字の上下に行間が含まれます。このモードでは、その行間を差し引き、画面上で確保したい距離に近づくmarginを計算します。
見た目の余白とCSSのmarginが違う理由
line-heightが文字サイズより大きい場合、文字の上下には余分なスペースが均等に配置されます。例えば文字サイズ24px・line-height 36pxなら、上下に約6pxずつのスペースが含まれます。
見出しと本文の間を40pxにしたいからといって、そのままmargin-bottom: 40pxを指定すると、行間を含めた実際の見た目は40pxより広くなります。このツールは上下の行間を考慮して、CSSへ指定する余白を計算します。
px・em・remの使い分け
- px：デザインデータの数値をそのまま扱いたい場合に向いています。
- em：対象要素の文字サイズを基準に余白を変化させたい場合に便利です。
- rem：ルート要素の文字サイズを基準に、サイト全体で余白の基準をそろえたい場合に便利です。
よくある質問
line-heightは単位なしで指定してもよいですか？
はい。本文や見出しでは、文字サイズに連動しやすい単位なしの倍率指定がよく使用されます。
計算結果が0以下になった場合はどうすればよいですか？
文字の行間だけで、確保したい見た目上の余白を超えている状態です。line-heightを小さくするか、確保したい余白を大きくして調整してください。
スマートフォンでも利用できますか？
スマートフォンやタブレットにも対応しています。入力値を変更すると、プレビューと計算結果が自動的に更新されます。
計算結果を商用サイトで使用できますか？
生成されたCSSは、個人・商用を問わず自由に使用できます。