border-radius

2023.04.06

ボタンの大きさが変わっても完全な角丸を指定するテクニック

完全な角丸のボタンを実装する時のborder-radiusには9999pxなどの大きい数値を指定するのではなく、100vmaxを指定することで、ボタンがどんな大きさになっても完全な角丸を保てるようになる。
※vmaxはビューポートの幅と高さのうち、大きい（広い）ほうを基準とする単位。border-radiusに100vmaxを指定すると、横に長いボタンでも縦に長いボタンでも同じ角丸の長さに固定できる。

.button {
  border-radius: 9999px; /* BAD */
  border-radius: 100vmax; /* GOOD */
}

border-radiusの値をスマホとデスクトップで変えるテクニック

border-radiusが8pxのカードコンポーネントについて。カードにマージンがない（ビューポートのフルサイズから4px以内）場合、またはビューポートの幅いっぱいにカードが表示されている場合は、border-radiusを0pxに反転させたい。

.card {
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
}
  1. 0pxとmin()の計算値があり、この2つの値をmax()関数が比較し、大きい方の値が使用される
  2. min()関数では、8pxとcalc((100vw – 4px – 100%) * 9999)の計算値を比較する。これにより、非常に大きな正または負の数値が得られる
  3. 9999は、強制的に0pxか8pxのどちらかにするための大きな数値

幅が1440pxのビューポートがあり、カードコンポーネントは700pxのコンテナ内に配置されている場合、結果の値に9999を掛けると7359264となり、大きな乱数となる。この場合、CSSはブラウザで次のようになる。

.card {
  border-radius: max(0px, min(8px, 7359264px));
}

min()関数で2つの値を比較して、最小値である8pxが選ばれる。そして、max()関数で、8pxの方が選ばれる。
コンテナの幅とビューポートの幅が同じの場合、同じように計算を行うと-39996pxとマイナスの値になり、最終的にmax()関数で0pxが選ばれる。

【参考】
https://coliss.com/articles/build-websites/operation/css/conditional-border-radius-in-css.html

inserted by FC2 system