模写修行メディア

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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

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

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の仕様の違い

XDの行間(行送り)とwebのline-heightの仕様の違い

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

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

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

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

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

デザインをピクセル単位で再現すること、1pxのズレもなく再現を目指すこと。※ ただし、完全一致は難しい場合もある。

【初学者・中級者の方】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターは全員現役エンジニア 👆

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

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
タイトルline-height: 1.8
font-size: 32px
画像下のテキストline-height: 2
font-size: 16px

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

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材