Q&A
デザインカンプからコーディングする際、
line-heightで上下に余白がついてしまいます。
保守性を重視してズレを許容するか、
カンプの見た目を重視してネガティブマージンで調整するかなどデザイナーと話し合って進めて行くべきかと思いますが、
みなさんはどういった風にコーディングしますか？
皆さんのご意見をお聞きしたいです。
参考記事:
https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/
回答2件
0
ベストアンサー
あくまで私見ですが。
↓こちらの記事の「一貫したサイズとスペースを使用し、デザインのモックアップに従ってルックアンドフィールを維持することにフォーカス」に同意です。
HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状 | コリス
質問から外れますが、line-height: 1は、コンテントエリアが行ボックスからあふれてしまう可能性があるため、バッドノウハウだと思っています。webフォントを使うなど、ターゲットのメトリックをコントロールできている時には、もちろん話は別です。
Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira
投稿2021/01/22 05:52
総合スコア36946
0
カンプの見た目を重視してネガティブマージンで調整するかなどデザイナーと話し合って進めて行くべきかと思いますが、
基本そうですね。
デザイナーさんと話し合って決めるべきです。
（そして、teratailでは、アンケート的質問は推奨されません）
ただし、
フロントエンドコーディングにおいて、大事な話題なので、回答します。
例えば行間を限りなく0にしたい場合、
line-height: 1.005em;
が一番適当な感じがあります。
（単位つけるかは、環境によりバグがあるので、適宜調整）
.005をつけるのは、ブラウザによって、文字が切れるパターンがあるので、その回避のためです。
私個人としては、デザインカンプと1pxも違わないものを目指すので、
どこまでもこだわります。
なので、スマホなどの場合、フォントサイズを、vwで、ルートフォントサイズに設定し、
それ以降は、全てrem単位を使います。
（つまりデザインカンプの横幅に対して、フォントサイズが何%かで算出し、デザインカンプのイメージと違わないようにする）
以上、参考になれば幸いです。
投稿2021/01/22 05:33
編集2021/01/22 05:42
総合スコア9555
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/22 05:55
退会済みユーザー
2021/01/25 03:56