テキストの上下のスペースが気になったことはありませんか？
webのline-heightの仕様上、テキストの上下にスペースが入ってしまいます。特にフォントサイズが大きめのテキストだと目立つ場合が多いです。
また、デザインツールの行間(行送り)とwebのline-heightの仕様の違いにより、デザインを忠実に再現するためには細かい計算が必要になります。
この記事では、SCSSのmixinを使って、効率良くline-heightで出来るスペースを消す方法を紹介します。
💡 コーディングの練習なら模写修行！
この記事の目次
line-heightの上下のスペースが気になる...
webのline-heightの仕様は、上の画像のように各行の上下にスペースが入ります。このスペースはハーフ・レディングと呼ばれています。
.hoge{
line-height: 1.5;
font-size: 20px;
}
例えば上の指定だと、((20 × 1.5) - 20) / 2 = 5px が各行の上下に入ります。
フォントサイズが小さい場合は、あまり気になりませんが、タイトルやキャッチコピーなどのフォントサイズの大きな箇所はハーフ・レディングのせいでスペースが空きすぎに感じる事があります。
XDの行間(行送り)とwebのline-heightの仕様の違い
XDに限らずデザインツールとwebのline-heightは仕様が異なる場合があります。
デザインツールによっても様々だと思いますが、少なくともXDでは上の画像のように行の下にスペースが入ります。また、1番最後の行の下にはスペースが入りません。
ピクセルパーフェクトでコーディングする際は、この仕様の違いがネックになります。XDで上に余白が16xp空いていて、コーディング時も16px空けたとしても、ハーフ・レディングのせいでwebのほうがスペースが大きく空いているように見えてしまいます。
line-heightで出来るスペースをSCSSのmixinを使って効率よく消す方法
この画像のように1番上と1番下のハーフ・レディングを消せれば、デザインを忠実に再現することが出来ます。
.hoge{
line-height: 1.5;
font-size: 20px;
margin-top: -5px;
margin-bottom: -5px;
}
このようにネガティブマージンを使う方法でも調整は可能ですが、毎回計算するのはとても面倒です。SCSSのmixinを使えば、効率よく調整する事ができます。
💡 SCSSのmixinを使う
@mixin lineHeightSpaceFill($line-height) {
&::before,
&::after {
content: "";
display: block;
width: 0;
height: 0;
}
&::before {
margin-top: calc((1 - #{$line-height}) * 0.5em);
}
&::after {
margin-bottom: calc((1 - #{$line-height}) * 0.5em);
}
}
/* 使用例 */
.hoge{
font-size: 16px;
line-height: 2;
@include g.lineHeightSpaceFill(2);
}
テキストの上下に擬似要素でハーフ・レディング分のネガティブマージンを入れています。毎回mixinを使うのは面倒ではありますが、計算が省けるのでまだましです。
| 該当箇所 | CSS |
|---|---|
| タイトル | line-height: 1.8 font-size: 32px |
| 画像下のテキスト | line-height: 2 font-size: 16px |
画像の左はハーフ・レディング分の調整をしていないもので、右は調整したものです。調整するかしないかで結構な違いがあると感じるのではないでしょうか？
超実務向け！コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ！
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか？嬉しい声もいただいています！
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet
