line-heightで出来るスペースをSCSSのmixinを使って効率よく消す方法

テキストの上下のスペースが気になったことはありませんか？

webのline-heightは、テキストの上下にスペースが入る仕様になっています。特にフォントサイズが大きめのテキストだと目立つ場合が多いです。

また、デザインツールの行間(行送り)とwebのline-heightの仕様の違いにより、デザインを忠実に再現するためには細かい計算が必要になります。

この記事では、SCSSのmixinを使って、効率良くline-heightで出来るスペースを消す方法を紹介します。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

line-heightの上下のスペースが気になる...

webのline-heightの仕様は、上の画像のように各行の上下にスペースが入ります。このスペースはハーフ・レディングと呼ばれています。

.hoge{
    line-height: 1.5;
    font-size: 20px;
}

例えば上の指定だと、((20 × 1.5) - 20) / 2 = 5px が各行の上下に入ります。

• 1行目の上には5px
• 1行目と2行目の間は5px+5pxで10px
• 2行目の下には5px

↑これらのスペースが空くことになります。

フォントサイズが小さい場合は、あまり気になりませんが、タイトルやキャッチコピーなど、フォントサイズの大きな箇所は気になる場合があります。

デザインツールとwebのline-heightの仕様の違い

各デザインツールの行間(行送り)とwebのline-heightは仕様が異なる場合があります。

• XDでは上の画像のように行の間のみスペースが入る(上下には入らない)
• Figmaはwebと同じ仕様

ピクセルパーフェクトでコーディングする際、この仕様の違いがネックになります。

1. XDでテキストの上に余白が16xp空いている
2. コーディング時はmarginで16px空けた
3. ハーフ・レディングのせいでwebのほうがスペースが大きくなる

↑このようなことが起きます。この場合、コーディング時にテキストの上下のハーフ・レディングを消せば、デザインを忠実に再現することができます。

line-heightで出来るスペースを消す方法

1番上と1番下のハーフ・レディングを消す方法を紹介します。

ネガティブマージンを使う方法

.hoge{
    line-height: 1.5;
    font-size: 20px;
    margin-top: -5px;
    margin-bottom: -5px;
}

ハーフ・レディング分のネガティブマージンを使ってスペースを消すことができます。ただし、毎回何pxか計算するのはとても面倒です。

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を使うのは面倒ではありますが、計算が省けるのでまだましです。

line-height分の調整前と後の比較

画像の左はハーフ・レディング分の調整をしていないもので、右は調整したものです。調整するかしないかで結構な違いがあると感じるのではないでしょうか？

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！