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

サイト構築 -CSS

Post on:2020年8月24日

はじめに

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

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

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

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

button要素とinput要素のコンテンツは完璧に揃えます。
button要素とinput要素の高さは同じです。
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要素の基本的なスタイルを定義してみましょう。

<input class="form-control" type="text" value="Input element">
<button class="btn">Button</button>

1 2	<input class="form-control" type="text" value="Input element"> <button class="btn">Button</button>

<style>
  .btn, .form-control {
    /* ユーザーエージェントスタイルシートをリセット */
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    appearance: none;

    /* 高さに影響するプロパティが同じ値であることを確認 */
    font-size: 1em;
    line-height: 1.2;
    padding: 0.5em var(--padding-x);
    border-width: 2px;
    border-style: solid;
  }
  
  /* button */
  .btn {
    display: inline-flex;
    justify-content: center; /* コンテンツを水平方向に中央揃え */
    align-items: center; /* コンテンツを垂直方向に中央揃え */
    --padding-x: 1.2em;
    border-color: transparent; /* button要素のborderを隠す */
  }
  
  /* input */
  .form-control {
    --padding-x: 0.5em;
  }
</style>

<style>

.btn, .form-control {

/* ユーザーエージェントスタイルシートをリセット */

background-color: transparent;

padding: 0;

border: 0;

border-radius: 0;

color: inherit;

appearance: none;

/* 高さに影響するプロパティが同じ値であることを確認 */

font-size: 1em;

line-height: 1.2;

padding: 0.5em var(--padding-x);

border-width: 2px;

border-style: solid;

}

/* button */

.btn {

display: inline-flex;

justify-content: center; /* コンテンツを水平方向に中央揃え */

align-items: center; /* コンテンツを垂直方向に中央揃え */

--padding-x: 1.2em;

border-color: transparent; /* button要素のborderを隠す */

}

/* input */

.form-control {

--padding-x: 0.5em;

}

</style>

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

button要素のdisplay値をinline-flexに定義して、justify-contentとalign-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を変更しても、整列に影響はありません。なぜなら、paddingとborderを使用して高さを決めているからです。

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

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

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

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

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

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

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

.height-30, .height-40, .height-50 {
  height: var(--height);

  &.btn, &.form-control {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.height-30 {
  --height: 30px;
}

.height-40 {
  --height: 40px;
}

.height-50 {
  --height: 50px;
}