Zenn
🦔

【SCSS 】mixinを使用しline-heightの余白を消す方法

2022/06/13に公開
Scss
tech

Adove XDのデザインデータから、コーディングする際こんな悩み抱えたことないですか？
「コンポーネント同士の距離を指定したいけど、line-heightの余白も考慮しないと。。」
この記事を最後まで読めば解決できます。
面倒なline-heightの余白を考慮せず、コーディングできる方法を紹介します。
爆速でコーディングスピードが上がりますよ。

目次

  1. line-heightとは？
  2. 【面倒】　line-heightの余白問題
  3. 【解決策】　mixinの活用しline-heightの余白を消す方法
  4. まとめ

line-heightとは？

line-heightは、行間を調整してくれるCSSプロパティーです。
行間とは、「文字の大きさ」と「上下の余白」のことです。

以下の写真をご覧ください。

文字の上下に、余白があるの分かりますか？
これは、line-heightのCSSプロパティーを指定しているからです。

コードは下記の通り。

index.html
<p>
  line-heightの行間はこうなっています<br>
  各行の上下にスペースが入ります。
</p>
style.css
p{
  font-size: 16px;
  line-height: 2;
  background-color: aqua;  //余白を分かりやすくする為に指定
  display: inline-block;     
}

上記の画像の上下の余白の計算方法をやってみます。

まずは、line-heightの値を求めます。
font-size(16px) × line-height(2) = 32pxになります。
次に、上下の余白を求めます。式はこちら。
(32px – 16px） ÷ 2 = 8px
つまり、文字の上下に8pxずつの余白があることがわかります。

これがline-heightの簡単な説明を終わります。

【面倒】　line-heightの余白問題

Adove XDなどのデザインデータから、コーディングする際　「line-height」に苦しみます。
なぜなら、「Adove　XD」　と「Web」の場合は、「line-height」の仕様が異なるからです。
例えば、「Adove　XD」の「line-height」の指定は下記の通りです。

余白の上下が指定されてないことがわかります。

つまり、「Adove　XD」の「line-height」を再現するためには、
CSSで上下の余白を消す必要があります。

【解決策】　mixinの活用しline-heightの余白を消す方法

文字の余白を消していない状態はこちら。

解決方法はSCSSのmixinを活用します。
まずSCSSファイルに、line-heightの余白を打ち消すmixinを定義します。

style.scss
@mixin lineHeight($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);  //文字下の余白を消す
  }
}

次に余白を打ち消したいセレクタ（今回はpタグ）に、先ほど定義したmixinを使用します。

style.scss
p{
  font-size: 16px;
  line-height: 2;
  @include lineHeigh(2);  //line-heightの値（２）を（）の中に指定。
  　　　　ここ太文字にしたい↑
  background-color: aqua;
  display: inline-block;  
}

詳しく解説します。
@include の記述は、@mixinで定義したものを、使用する際に書きます。
lineHeigh(); の記述は、＠mixinの後に定義した関数名を書きます。
括弧の中の「2」の数字は、pタグに指定しているline-heightの値を記述します。

画像のような結果になります。
文字の上下の余白が消えていますね。

他にも具体例を出します。
pタグにline-height: 1.5;をしている場合

style.scss
p{
  font-size: 16px;
  line-height: 1.5;
  @include lineHeigh(1.5);  //line-heightの値（1.5）を（）の中に指定。
  　　　　ここ太文字にしたい↑
  background-color: aqua;
  display: inline-block;  
}

line-heightの値と同じ値を、関数の（）の中に記述することで
文字の上下の余白を消すことができますよ。

まとめ

今回紹介した方法を利用することで、文字の行間の計算が不要になります。
コードを書く時間が短縮できるますので、参考にしてみてください。

Discussion