CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法

Post on:2018年10月23日

はじめに

今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。

イメージはborder-radiusプロパティを使用するだけで、用意できます。CSSの古いプロパティがまだ存在していて、有用であることを忘れないでください。かっこいいエフェクトを与えるために、新しい何かを使用する必要はありません。
by Rachel Andrew

私はこの話を聞いた後すぐに、border-radiusプロパティで何ができるのかじっくり考えてみました。

border-radiusの基礎知識

border-radiusの値が、1つの場合

まずは基本から始めましょう。
おそらくあなたはCSSに精通しており、border-radiusについても知っているでしょう。border-radiusはボックスの角丸を指定するプロパティで、下記のように使用されます。

div{
  border-radius: 1em;
}

div{

border-radius: 1em;

}

border-radiusは値が1つの場合、すべてのコーナーがこの値で設定されます。

border-radiusの値が、1つの場合（すべてが同じ値）

値の単位にはpx, rem, emのような固定値のほか、パーセント（%）を使用することもできます。例えば、border-radiusを50％に設定することで円が作成できます。

パーセント（%）値は、指定された要素の幅と高さに基づいています。そのため、矩形で使用すると、対称的なコーナーを持たなくなります。
「border-radius: 110px;」と「border-radius: 30%;」の違いを見てましょう。

border-radiusに、左: 110px、右: 30% を設定

右は対称ではない、ということに注目してください。これは後ほどでてきます。

border-radiusの値が、4つの場合

border-radiusに複数の値を設定する場合は、左上から時計回りに設定されます。同じく単位にパーセントを使用することができ、さらに固定値を混ぜることもできます。

「border-radius: 30% 70% 20% 40%;」を設定

border-radiusの値が、8つの場合（ここからが面白くなるところです）

border-radiusの値は最高で8つ設定することができます。8つの値は、4つをスラッシュ（/）で区切って記述します。その仕様を見てましょう。

スラッシュの前後に値を設定すると、スラッシュの前の値は水平半径を設定し、スラッシュの後の値は垂直半径を設定します。スラッシュがない場合、値は両方の半径を等しく設定します。

CSS Backgrounds 3 -W3C

つまり、スラッシュの前の値は水平の長さを定義するのに対して、スラッシュの後の値は垂直の長さを定義します。
これは何を意味しているのでしょうか？

さきほどのパーセント値で設定した矩形を思い出してください。
垂直と水平の長さと非対称の角丸は絶対値が異なっており、スラッシュを使用するときに得られるのが正確な値です。

従って、「border-radius: 4em 8em;」と「border-radius: 4em / 8em;」を比較すると、結果はまったく異なります。

border-radiusに、左: 4em 8em、右: 4em / 8em を設定

左の対称コーナーは正円の四分の一で、右の非対称コーナーは楕円の一部です。

作成された形が少し奇妙だ、と思ったかもしれません。しかし、「border-radius: 50%;」で円を作成できることは覚えておいてください。片側を定義する両方の値を100% (50% + 50% = 100%)にすることで、元の正方形を思い出させる直線は残っていないため、円を作成することができます。

そして、同じロジックを8つの値のborder-radiusプロパティに適用すると、有機体のように見える形も作成できます。