こんにちは、ワタナベです。
今回は知っておくと役立つかもしれないCSS備忘録。
BUTTON
↑みたいな横長で完全に角が丸まっているボタン、よく使いますね。
この角丸はborder-radiusで数値を設定するのですが、てきとうに大きな数字で設定していませんか？
ボタンのサイズは大体固定なことも多いのでそれでも問題ないですが、他の書き方もあります。
See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.
border-radius: 100vmax;
と
border-radius: calc(infinity * 1px);
です。
「vmax」は画面（ビューポート）の幅と高さどちらか大きい方を基準とした割合。
「infinity」は無限大の値。
どちらも結局は大きな数を設定していることになるのですが、9999pxとかよりもスマートに感じるのはなぜでしょう(;^ω^)笑
pxだと固定値になるので、万が一に備えて可変的な100vmaxか、無限大のinfinityにしておくのがイマドキなのかもしれません。
それではまた次回。
ご閲覧ありがとうございました♪
