📏

ぼくの理想のボタンの padding 設定

2021/03/13に公開

CSS

HTML

tech

初めての Zenn 記事です！

先日ふと思い立ってこんなことをツイートしました。

ツイートした後、calc() 使えば？というリプライをいただいて、あ、できるかも、と思って試してみたらできた。という記事です。

CodePen のリンクを貼ります！

おわり？

お…終わっちゃった！（4行しか文章書いてない😅）

これで終わっちゃうのも寂しいので一応ちょっとだけ解説してみます！

padding 部分の解説

CodePen みてもらえればと思いますが、最終的にこんな感じになっています。

.c-button {
  padding: max(calc(1em + (1rem - 1em)), 0.2em) max(calc(1em + (1rem - 1em) * 0.2), 0.4em);
}

やりたかったこととしては、こんな感じです。

基本、font-size に基づいて padding が決まる（em）
特定のサイズ（今回は 1rem にしました）より font-size が大きい場合は、padding が小さくなって、逆に font-size が小さい場合は padding が大きくなる。
padding には最小サイズ（em）も設定する

順を追って説明

下記が最終的な横方向の padding です。

.c-button {
  padding: max(calc(1em + (1rem - 1em) * 0.2), 0.4em);
}

ここに至った経緯を書いていこうと思います。

まずは padding を em で設定

.c-button {
  padding: 1em;
}

これで、

font-size に応じて padding が決まる

はクリア。

calc() を使って 1rem と 1em の差を padding に足す

.c-button {
  padding: calc(1em + (1rem - 1em);
}

元々の 1em という値に (1rem - 1em) を足しています。
式の上では「足して」ますが、ボタンに設定された font-size が 1rem よりも大きい場合は (1rem - 1em) はマイナス値になるので、

特定のサイズ（今回は 1rem にしました）より font-size が大きい場合は、padding が小さくなって、逆に font-size が小さい場合は padding が大きくなる。

これもクリア

微調整

ただ、そのままだと、フォントサイズが大きい時の padding がちょっと小さかったので調整します。

.c-button {
  padding: calc(1em + (1rem - 1em) * 0.2);
}

(1rem - 1em) に 0.2 をかけて、ボタンの font-size に応じた padding の変化量を小さくしました。

最後に max() で最小値を決める

あとは、font-size が大きくなるほどに padding が小さくなるということは、font-size が一定値を超えると padding がゼロになっちゃうので、どんなに font-size が大きくなっても最低限保持したい padding の最小値を max() で設定しておきます。

.c-button {
  padding: max(calc(1em + (1rem - 1em) * 0.2), 0.4em);
}

これで

padding には最小サイズ（em）も設定する

もクリア🎉

おしまい

おしまいです。

誰かの参考になったら嬉しいです。