先日の台風、凄まじかったですね。
被害に遭われた皆様に、謹んで心よりお見舞い申し上げます。
『備え』について、改めて考えさせられたハヤマです、こんにちは。
今回はデザインデータで設定されている「行送り」「トラッキング」をCSSで指定する際の計算方法についてお話しします。
行送りのCSS設定
行送りとは
行送りとは、1つのテキスト行のベースラインからその上の行のベースラインまでの距離を指定します。
記述方法
デザインデータで、このような行送りを設定しているとします。
フォントサイズ:26px
行送り：39px
CSSで行送りを実装する際のプロパティはline-heightとなります。
デザイン通りに行送りを設定するには、以下の計算で算出することができます。
「行送り」で設定した数値（px） ÷ 「フォントサイズ」で設定した数値（px）
例を参考にすると、
39px ÷ 26px = 1.5 となるので、
line-height: 1.5;
と記述をすることで、デザインと同様の行送りを設定することができます。
トラッキングのCSS設定
トラッキングとは
選択した文章全体の文字間隔を調整します。
記述方法
ではこちらも同様に、参考をご覧ください。
デザインデータで、このようなトラッキングを設定しているとします。
トラッキング：180
CSSで行送りを実装する際のプロパティはletter-spacingとなります。
デザイン通りに行送りを設定するには、以下の計算で算出することができます。
トラッキングで設定した数値 ÷ 1000
例を参考にすると、
180 ÷ 1000 = 0.18（単位はem） となるので、
letter-spacing: 0.18em;
と記述をすることで、デザインと同様のトラッキングを設定することができます。
さいごに
コーディングの学習をしていた当初（遠い目）は目分量での調整をしていたりしましたが
計算方法さえわかってしまえば、容易にデザインイメージに近づけますね。
では、今回はこの辺で。
