ContactAboutColumnWorksContactフロントエンド#コーディング#Webエンジニア#Webデザイン#Photoshop2023.03.29「line-height」の性質を知り、デザインデータとズレの無い実装を目指すこんにちは、ヒラヤマです。今回は、CSSプロパティのline-heightについて解説します。「デザインデータ通りに実装したのに、なぜか見た目が大きくズレてしまった」といった経験があるコーディング初心者の方にオススメの記事です!目次1.line-heightとは?2.デザインデータ通りにline-heightの数値を設定しても、見た目が同じにならない理由3.解決方法4.まとめline-heightとは?line-heightは、テキストの1行の高さを指定するCSSプロパティです。行間を調整するために使用され、font-sizeに対する比率で指定することができます。次のように指定することができます。【※補足】line-heightは、比率以外に「24px」などと決め打ちで指定することも可能です。font-sizeに変更が入った場合、line-heightに決め打ちで数字が入っていると、line-heightも変更しなくてはならなくなります。比率で指定しておけばfont-sizeに応じて自動的に行間が計算されるため、運用・更新がしやすいソースになります。そのため、決め打ちで指定するべき特段の理由が無ければ、比率で指定することが多いです。XDで作成されたデザインデータを扱うことが多いので、ここではPhotoshopを例に挙げます。Photoshopでは、「行送り」の項目に数値を入力することで、テキストボックス内の文字の上下の間隔(行間)が指定できます。そこで、Photoshop上で行間が24pxに設定されているデザインデータをもとに実装する場合、CSSでもline-heightが24pxになるように指定します。デザインデータの数値とCSSの数値を合わせても、見た目が大きくズレてしまう場合があります。?実は、PhotoshopとCSSではテキストボックスへの余白の付き方が違っており、それが大きな要因の1つになっているのです。Photoshopの行間は、テキストボックスの上部に余白が出来ないという特徴があります。テキストボックスの下部の余白に関しては手作業で調整するため、余白にばらつきが出てしまいます。CSSのline-heightはテキストボックスの上下に自動的に余白を付与します。デザインデータと実装では、テキストボックスの内側の余白の付き方に違いがあるのです。しては、実装時にpaddingやmarginを調整することです。実装で、テキストボックス外側の余白を調整することで、デザインデータの再現性を高めることができます。デザイン側で、デザインの意図を申し送りをしておくことも有効な解決策です。デザインデータと見た目を合わせることを優先して欲しい(数値は目安程度として見てほしい)のか、数値通りに実装で大丈夫(結果的にデザインデータと見た目がズレることは想定済み)なのか、申し送りがあるとスムーズです。いずれにしても、デザインと実装を分業している場合は、担当者同士でコミュニケーションを取って不明点のすり合わせを行うことが重要です。まとめデバイスフォント(※1)は、表示させるデバイスやブラウザのサイズ、サイトの仕様によって表示に差異が出やすいという特性があります。そのため、デバイスフォントに関連したCSSプロパティであるline-heightは、デザインと実装で特にズレが生じやすい箇所です。制作過程でしっかりとコミュニケーションを取り、サイトのコンセプトや目的に合わせた適切な表示方法を模索していくことが、より良いWebサイトにするための近道かと思います。デバイスフォント...画像として貼り付けられている文字ではなく、PCやスマートフォン等のデバイスがレンダリングしている文字のこと。