模写修行メディア

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

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

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

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

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

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に限らずデザインツールとwebのline-heightは仕様が異なる場合があります。

デザインツールによっても様々だと思いますが、少なくともXDでは上の画像のように行の下にスペースが入ります。また、1番最後の行の下にはスペースが入りません。

ピクセルパーフェクトでコーディングする際は、この仕様の違いがネックになります。XDで上に余白が16xp空いていて、コーディング時も16px空けたとしても、ハーフ・レディングのせいでwebのほうがスペースが大きく空いているように見えてしまいます。

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

line-heightの上下のスペースの図

この画像のように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

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

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

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

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材