カスタムプロパティ (CSS変数) を使用した調整しやすい余白設定

IEを非対応とすることで、今まで使用できなかった、CSSの便利な機能が思う存分使えるようになりました。

今回は、その便利な機能の1つ「カスタムプロパティ (CSS変数)」を使用した、余白設定をご紹介します。

ベースとなる数値を設定する

まず始めに、ベースとなる余白の数値を設定します。

html {
  --sp: 1rem; /* = 16px */
}

ここでは、スペースを意味する「sp」というカスタムプロパティ名にしました。

数値の単位はremがオススメです。ブラウザでの文字サイズの変更に対応しつつ、font-sizeプロパティによる文字サイズ設定に左右されず一定の幅が確保できるためです。

ベースとなる数値をcalc関数で使用する

calc関数で、ベースとなる数値を、掛けたり、割ったり、あるいは他の数値と足したりして使用します。

h1, h2, p, ul, li {
  line-height: calc(var(--sp) + 1em);
  margin: 0;
}
:where(h1, h2):not(:first-child) {
  margin-top: calc(var(--sp) * 3);
}
:where(p, ul):not(:first-child) {
  margin-top: calc(var(--sp) * 2);
}
:where(li):not(:first-child) {
  margin-top: calc(var(--sp) * 1);
}

今回は余白の設定なので、line-heightプロパティとmargin-topプロパティに使用しました。

上記のCSSコードでは、行間の余白を var(--sp) で1として、h1要素とh2要素の上部の余白は calc(var(--sp) * 3) でその3倍、p要素とul要素は calc(var(--sp) * 2) で2倍、li要素は calc(var(--sp) * 1) で等倍としました。

実際には、行の下部余白 (0.5) と上部余白 (0.5) があるので、h1要素とh2要素の上部の余白は4倍、p要素とul要素は3倍、li要素は2倍となります。

これで、ベースとなる数値を元にした余白が設定できました。

余白を調整・変更する

ウェブページの部分毎に文字サイズを変更したいことがあります。例えば、aside要素内の文字サイズを一回り小さくするといったケースです。

単純にfont-sizeプロパティのみを設定しても、rem単位で余白を設定しているため、余白の幅は変化しません。しかし、ベースとなる数値を再設定することで、余白の倍率を保ちつつ一括で変更することができます。

aside {
  --sp: 0.875rem; /* = 14px */
  font-size: 0.875rem; /* = 14px */
}

aside要素自体の余白設定を変更したくないのであれば、aside要素の子要素にベースとなる数値を再設定するといいでしょう。

aside {
  font-size: 0.875rem; /* = 14px */
}
aside > * {
  --sp: 0.875rem; /* = 14px */
}

もちろん、文字サイズはそのままで、余白のみの調整も簡単です。1remを16pxとした場合の、16px以下のrem数値は以下の通り。

• 16px = 1rem
• 15px = 0.9375rem
• 14px = 0.875rem
• 13px = 0.8125rem
• 12px = 0.75rem
• 11px = 0.6875rem
• 10px = 0.625rem
• 9px = 0.5625rem
• 8px = 0.5rem

〆

今回のCSSコードで使用している :where() 擬似クラスも便利すぎ。