CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック

ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？

ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。

Aligning a Button Label Vertically
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• ボタンにテキストを配置する時、上下のスペースを揃える
• 終わりに

はじめに

デベロッパーのあなたは実装するために、デザインのモックアップを渡されたとします。そのモックアップではかっこよくフォントが使用されており、デザインの中で完璧に見えました。

しかし、CSSで実装してみると、フォントの周りに予期せぬスペースが追加されていることに気がつきました。これは何だと思いますか？ そもそもデザイナーはなぜそのようなフォントを選んだのでしょうか？

この問いかけはフォント自体に関連しています。フォントはフォントごとにline-heightが異なり、それに伴ってテキストの上下のスペースも異なります。

フォントにはリーディング（Leading）と呼ばれるものがあり、これはテキストの行間のスペースを意味します。CSSではline-heightと呼ばれています。

リーディング（Leading）: テキストの行間によるスペース

上記では、2行目のベースラインと1行目のベースラインの間のスペースがリーディングです。CSSでは、これを各行の上下にスペースを追加することで実現しており、これをハーフリーディング（Half Leading）と呼びます。

ハーフリーディング（Half Leading）: 各行の上下にスペース

各フォントにはデフォルトのline-heightが設定されており、フォント作成者は必要に応じてCSSでより大きなline-heightを設定することもできます。これにより、一部のフォントでスペースの問題が発生する可能性があります。

実際に例を見てましょう。

デザインのモックアップでは、スペースは完璧

デザインではスペースは完璧で、緻密に設計されています。しかし、デベロッパーがこのデザインをCSSで実装すると、一貫されていないように見えてしまいます。

CSSで実装したキャプチャ

現在のところ、上下に異なるスペースの値（paddingやmargin）を使用する場合を除き、この問題を解決する方法はありません。さらにすべてのフォントに対応することは非常に大変で、時間がかかりすぎてしまいます。

leading-trimという新しいプロパティで解決できるのではないかと期待されていますが、この記事を書いている時点では、どのブラウザでもサポートされていません。詳しくはこの記事をご覧ください。

ボタンにテキストを配置する時、上下のスペースを揃える

私は日課としてFacebookのメッセンジャーページを調べていたところ、興味深いことに気づきました。プライマリボタンにwidthが0で、heightが20pxの疑似要素があります。

プライマリボタンになぞの疑似要素が！

まずは問題点をおさらいします。

スペースが一定のフォントを使用しています。下記では、グレーのエリアがpaddingなしのフォントの高さそのものを表しています。

グレーのエリア: フォント自体の高さ

これにpaddingを追加すると、さらにスペースが広がり、見栄えが悪くなります。

paddingを追加すると、上下のスペースが異なる

これを修正するには、ボタンのテキストノードの次に偽の要素を追加する必要があります。HTMLは下記のとおりです。

「Create an account」というテキストはテキストノードとみなされ、その次に擬似要素を配置すると、vertical-align: middle;で両方を中央に配置できます。

上: 修正前
下: 修正後（擬似要素を追加）

このテクニックは便利です！
唯一の欠点は、期待通りの結果を得るためにheight値を慎重に定義する必要があることだけです。とはいえ、下記のように手動でpaddingの値をバラバラに定義するより、はるかに優れたソリューションです。

終わりに

同じような問題に遭遇したことはありますか？ その時はどうやって解決しましたか？
コメントや提案があれば、@shadeed9までお願いします。