【CSS】「em」で指定しているline-heightを「px」に変換する方法を調べてみた!

line-heightの変換ができない・・・

デザインの参考に他サイトをみて、フォントサイズや文字間・行間を真似したいのですが

ソースを見るとline-heightが〇〇pxではなく、「1.8」などと数値だけで表記されていますよね!

こちとらpxを知りたいのに・・・と何度思ったことか(泣)

ということで、今後スムーズに数値を変換できるように変換方法を調べてみました〜!

変換方法

まずは基礎知識として・・・

IllustratorやPhotoshopの行間をline-heightで指定する方法

行送りの数値(px)÷ フォントサイズ(px)
こちらの計算で簡単に数値を出すことができます!
例えば、「フォントサイズ:20px 、行送り:36px」の場合は、
行間の数値:36÷ フォントサイズ:20 = 1.8 となるので、「line-height : 1.8 ;」と記述します。
 

line-heightからpxに変換する方法

基礎知識を学んだところで、気になっていたpxに変換する方法がこちら!

line-heightの数値 × フォントサイズ(px)
 

まとめ

今回はline-heightの数値をpxに変換する方法を調べてみました!

他サイトのソースを見て参考にしようと思っても、IllustratorやPhotoshopのように全部px指定ではないことが多々ありますよね。

出くわすたびに「うーん」と頭を悩ませていたので、変換方法がわかってスッキリです(笑)

計算方法もいたってシンプルなので、助かりますね!

コメント

タイトルとURLをコピーしました