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

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。

矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。

サイトのキャプチャ

CSS border-radius can do that?


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

今年開催された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はボックスの角丸を指定するプロパティで、下記のように使用されます。

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

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

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

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

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

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

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

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

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

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

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

「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プロパティに適用すると、有機体のように見える形も作成できます。

有機体の形をborder-radiusで作成

有機体の形をborder-radiusで作成

この有機体の形を構成しているのは、4つの重なり合う楕円です。

有機体の形の構成

有機体の形の構成

border-radiusでの形を簡単に作成するジェネレーター

この構文に慣れるには、手間と時間がかかります。直観的に指定することは、まず無理だと思います。そのため、少しでも簡単に指定できるように、私はジェネレーターを作成しました。

border-radiusでさまざまな形を作成でき、コードもコピペで簡単に利用できます。

サイトのキャプチャ

Fancy Border Radius Generator
Fancy Border Radius -GitHub

流れに逆らう(わないで)

上記のジェネレーターでは値を別々に設定するオプションがなく、8つの値を使えないので、残念な気持ちになったかもしれません。
しかし、心配しないでください。8つ版もあります。

サイトのキャプチャ

8つの値を設定できるフル コントロール版

1984年に公開されたゴーストバースタースにこんなセリフがあります。

「流れに逆らってはいけない」
「どうして?」
「それは悪いことだからさ」

追伸:
simuraiに感謝します。 彼が2010年に公開したCSSのかわいいボタン「BonBon」は今となっては少し古く見えますが、スラッシュの構文について私が学べた唯一のリソースです。

最後に、ここで紹介したborder-radiusのテクニックを使って、どのような形が実装できるか紹介します。
さまざまな美しい形をピュアCSSで実装できます。

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例
photo by gratisography.com

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

border-radiusのテクニックを使った例

下記のデモでは、形が有機的に変化する模様を楽しめます。

See the Pen border-radius by Nils (@enbee81) on CodePen.

sponsors

top of page

©2018 coliss