CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト(アイコンも)を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。

ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。

button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック

Vertical text alignment in buttons and inputs
by CodyHouse

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

はじめに

button要素やinput要素のテキストを中央に配置

button要素とinput要素のテキストを揃える

インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか? あなたは仲間です、多くの人が経験していると思います。

この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。

まず、ゴールを明確にしておきましょう。

  1. button要素とinput要素のコンテンツは完璧に揃えます。
  2. button要素とinput要素の高さは同じです。
  3. button要素とinput要素のサイズは、font-size, line-height, padding, borderで決定します。*1

*1 別のアプローチとしては、button要素とinput要素に対して固定の高さ(height: 40px;など)と高さの値に等しい行の高さ(line-height: 40px;など)で定義することが考えられます。しかし、button要素とinput要素はあらゆる状況下でそのコンテンツに適応させるため、(固定の高さより)paddingを使用する方が安全です。

button要素とinput要素の基本的なスタイル

button要素とinput要素の高さと垂直方向の配置は、border, padding, font-size, line-height これらのプロパティに定義された値の組み合わせによって決まります。

button要素とinput要素の高さに影響するプロパティ

button要素とinput要素の高さに影響するプロパティ

button要素とinput要素の基本的なスタイルを定義してみましょう。

このCSSのポイントを解説します。

  • button要素のdisplay値をinline-flexに定義して、justify-contentalign-itemsプロパティでコンテンツを中央に配置できるようにしています。特に、ボタンの中にアイコンを配置する場合に便利です。
  • button要素とinput要素には同じ垂直方向のpadding, font-size, line-height, border-widthを定義します。
  • ボタンに目に見えるボーダーを与えるつもりはありませんが、button要素とinput要素の高さが同じになるように透明のボーダーを適用します。
  • line-heightの値は、1よりも少し大きくする必要があります。1にすると、input要素はその値を受け入れず、button要素よりも高くなります。この例では、1.2を定義しています(必要に応じて、normalの使用も可)。

この基本的なスタイルにより、button要素とinput要素の高さが同じになり、コンテンツが垂直方向に揃います。font-sizeを変更したり、font-familyを変更しても、整列に影響はありません。なぜなら、paddingborderを使用して高さを決めているからです。

また、単位にemを使用することで、スケールアップ・ダウンすることもできます。

button要素とinput要素を美しくする

あとは、button要素とinput要素のカスタムテーマを作成するだけです。

See the Pen
Button Input V-Alignment - Final
by CodyHouse (@codyhouse)
on CodePen.

高さのバリエーションを用意する

button要素とinput要素に固定の高さを定義する必要がある場合、デフォルトのline-heightでは整列が崩れてしまうことがあります。その場合は、垂直方向のpaddingを削除して、line-heightheightと同じ値にします。

ボタンと入力フォームに適用されたときにわずかに異なる振る舞いをする高さのユーティリティクラスを用意しておくことで、回避できます。

これらのクラスを使用すると、さまざまな高さを使用できます。

See the Pen
Button Input V-Alignment - Fixed Height
by CodyHouse (@codyhouse)
on CodePen.

sponsors

top of page

©2020 coliss