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指定ではないことが多々ありますよね。
出くわすたびに「うーん」と頭を悩ませていたので、変換方法がわかってスッキリです(笑)
計算方法もいたってシンプルなので、助かりますね!
コメント