【学習記録:230日目】line-height ✖️ プログラミング

勉強記録

こんにちは!アラサーOLのぱるこです。

現在、webプログラマーを目指して、プログラミングの勉強中です。

今回は8ヶ月目(前半)の定例ブログは、「line-height」について、最近知ったことと疑問点について、書いていきます。

line-heightとは

line-heightとは、「行の高さを指定する」プロパティのことです。

例えば、フォントサイズ16pxのline-heightを24pxとした場合は、
line-heightからフォントサイズを引いた残りの値「8px」を半分にした値の「4px」がフォントの上下に割り振られます。

このようにCSSの場合は、line-heightは文字の上下に余白がつきます。

しかし、ほとんどのwebサイトやアプリのデザインの大半は、「photoshop」や「illustlator」や「XD」のいずれかを使用してデザインをされているかと思うのですが、CSSの「line-height」とPhotoshopやXDなどのデザインツールのcssのline-heightでいう「行送り」は少し異なっているようです。

なので、コーディングをする際は(特にピクセルパーフェクト絶対!!の場合は、)、この「line-height」に注意する必要がありそうです。

XD(デザインツール)の行送りの仕様の確認

今回、illustlator/photoshop/XDの「行送り」を確認したところ、CSSのline-heightの場合は、フォントの上下に行間が割り振られていましたが、これらのデザインツールでは、フォントの下のみに行間が割り振られていました。なので、フォントサイズ16pxの行送りが24pxの場合、8pxがフォントの下の余白に割り振られます。

最近まで、知らずにコーディングしていました・・・。だからずれていたのか・・・。

パーフェクトピクセルをするには?

おそらく、デザイナーさんから頂けるデザインカンプは、デザインツールがそのような仕様なので、このようにフォントの上スレスレで、余白が取られているのではないかと思います。

デザインカンプの例

しかし、そのままの値でコーディングをしてしまうと、CSSでのline-heightはフォントの上下に余白が割り振られてしまうので、タイトルと文章の間の余白に誤差が生じてしまいます。

そのようなズレを相殺するためには、①重なっている行間をマージンから引くか、②擬似要素を使用して文章を下げるかのどちらかだと考えていますが、実際の現場ではどうしているのでしょうか??

①重なっている行間を引く対策

今回の場合は、タイトルをh1とし、文章をpするとこのようなcssになります。

h1 {
  font-size: 30px;
   line-height: 1;
   margin-bottom: calc(50px - (((24px - 16px) / 2));
}
p{
  font-size: 16px;
   line-height: 24px;
}

いちいち、重なっている行間を式で書くのはめんどくさいので、ここで登場するのがsassを使ったmixinです!!気になる方は、こちらのブログに詳しく書かれているので参考になりそうです!!!

marginとline-heightによる"真の余白"について考える : SimpleIsm
舞台裏は乱雑に、見えるところはシンプルに。

②擬似要素を使用した対策

こちらのブログは、①でいうpタグに擬似要素を使う方法です。
文字の上下の余白を取り除いてくれるようです。こちらも便利そうです!!!ですが、大規模なサイトの場合、擬似要素が増えて、読み込み速度が遅くなるの可能性もあるのでは?という疑問もあります・・・。

[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート
文字に含まれる上下の余白を取り除いて、矩形ぴったりの高さに、アイコンとぴったり同じ高さに、画像とツラが揃うようにするスタイルシートを生成するオンラインツールを紹介します。 「line-height」が

line-heightに関する記事はたくさんありますが、この類の記事はあまり見つかなかったので、実際の現場の意見があれば教えてください。m(_ _)m

最近のコーディングに関する疑問でした。
卒業試験では、①を取り入れてline-heightの練習してみます。

プログラミング学習報告(8ヶ月目(前半))

8ヶ月目(前半)のプログラミングの勉強の振り返りです。
ちなみに私は、平日は10時〜19時までの会社勤務なので、平日は4時間、土日祝日は6時間を勉強時間の目標としています。

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