「文字の上下の余白が微妙に異なる。」
「下部だけがやや広い。」
Webサイトのデザインにこだわると、こうした細かいズレに気づくことがあります。これは主にline-height（行間指定）によって、文字の上下に余白（ハーフレディング）が生じてしまうことが原因です。
たとえば、「見出し」と「本文」の間の余白を40pxと指定しても、各行間の余白が加わるため、実際には40px以上に広く見えてしまう場合があるんです。
ということで今回は、文字の上下の余白をきれいに揃えるためのCSSテクニックをご紹介します。
ハーフレディングとは
ハーフレディング（half-leading）とは、文字サイズと指定された行間（line-height）によって生じる上下の余白のことです。
次のような見出しを例に説明します。
/* 文字サイズ26px、行間1.4 */
font-size: 26px;
line-height: 1.4;この場合、行の高さは 26px × 1.4 = 36.4px と計算できます。
文字サイズ（26px）と行の高さ（36.4px）の差は10.4px。この余白が上下に均等に割り振られ、以下の見えない余白が加わります。↑の図の水色の部分です。
- 上に5.2px
- 下に5.2px
この余白をハーフレディングと呼びます。この隙間があるため、周囲の余白が指定通りにならない原因となるわけです。
CSSで指定したmarginやpaddingだけでは、正確に見た目を揃えづらくなるため、これを補正するテクニックが必要な場合があります。
ハーフレディングを打ち消すCSS
ハーフレディング（上下の余白）を打ち消すには、以下のようなCSSを使います。
margin-block: calc((1em - 1lh) / 2) !important;
打ち消したい要素に上記を指定すればOKです。
仕組み
文字サイズ26px、行間1.4の見出しを例に仕組みを説明します。
- 1em：文字サイズ（26px）
- 1lh：行の高さ（26px × 1.4 = 36.4px）
このCSSは、（文字サイズと行の高さの差）を計算し、それを半分に割った値を上下の余白にマイナスで適用します。
次のように、上下に5.2pxずつマイナスの余白を指定し、行間による余白を相殺するという仕組みです。
注意点
余白の相殺が目的なので、margin-blockには「!important」を付けて優先適用することも多いです。ただ意図しない余白の打ち消しや詰まりを防ぐためにも、特定の見出しのみなど、余白が気になる要素に限定して指定するのが望ましいです。
隣接する要素のmarginやpaddingとの兼ね合いもよく確認しておきましょう。
TCDテーマならクラス指定だけで解決
プラグイン「TCDクラシックエディタ」に対応したテーマであれば、ハーフレディングによる上下の余白を簡単に打ち消す汎用クラスが使えます。CSSの詳細な調整を自分で行わなくても、このクラスを要素に追加するだけで、文字の上下の余白をきれいに揃えられます。
用意されている汎用クラスは、以下3種です。
| mb-hl | 上下の余白を打ち消す。 |
| mbs-hl | 上の余白を打ち消す。 |
| mbe-hl | 下の余白を打ち消す。 |
たとえば、見出しの下の余白のみを打ち消したいときは、以下のようにクラスを付与すれば反映されます。
<!-- 見出しの下の余白を打ち消す -->
<h2 class="mbe-hl">見出しタイトル</h2>
<p>本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト</p>TCDユーザーさまは、細部のデザインにこだわる方も多いと思います。ぜひご活用ください。
まとめ
文字の上下には、行間（line-height）が原因で「ハーフレディング」という余白が発生します。
隣接要素との余白をピクセル単位で調整するには、このハーフレディング対策が必要になることもあります。CSSで相殺する方法もありますが、TCDクラシックエディタ対応のテーマであれば、内蔵の汎用クラスを使ってかんたんに対策可能です。
細かい調整の積み重ねが、Webサイト全体のクオリティ向上にもつながります。ちょっとしたことですが、ぜひ参考に調整してみてください。
企業サイト向けWordPressテーマ
コメント