現役デザイナーが教える！CSSを使った円形サークルの使い方完全ガイド

海外サイト Cloud Four で公開された CSS Circle by Tyler Sticka より許可をもらい、翻訳転載しています。

この記事では、CSSでスタイリングされた円形コンテンツを使うときのポイント、そしてトラブルシューティングを実例サンプルコードと一緒にまとめています。

円形コンテナ、円形サムネイル、サークル型ボタン、円形パスに沿った文字テキストの配置など、かゆいところに手が届くテクニックをマスターしましょう。

サークル円の作成方法について

HTMLとCSSで円形を表現する方法はいくつかあり、それぞれ長所と短所があります。ここでは、もっとも一般的なテクニックからマイナーなものまで、実際にウェブサイトで利用したサンプル例を見ていきましょう。

Border Radiusプロパティをつかった方法

もっとも一般的なテクニックは、要素のすべての角を50%に丸める方法です。もっとも手軽に適用でき、各種ブラウザに幅広くサポートされています。プロパティborder-radiusは、境界線や影、要素のタッチ/クリックのターゲットサイズにも影響します。

See the Pen
Circle: Border Radius by Tyler Sticka (@tylersticka)
on CodePen.

円を横長に引き伸ばしたいときは、プロパティborder-radiusを要素の高さの半分に設定しましょう。もし要素の高さが不明のときは、任意の大きな値（99emなど）を利用すると良いでしょう。

SVGをつかった方法

SVGには要素を追加することができ、他のパス同様にスタイル設定を行うことも可能です。ほぼすべてのブラウザ対応で、アニメーションを実装するときに便利ですが、他のテクニックに比べてより多くのマークアップ記述が必要となるでしょう。図形が部分的に非表示となるクリッピングを防ぐには、サークル円の半径（ストローク幅の半分）がSVGのviewBoxよりも、わずかに小さく設定しましょう。

See the Pen
Circle: SVG by Tyler Sticka (@tylersticka)
on CodePen.

Clip Pathをつかった方法

クリップパス（英: Clip Path）は、比較的新しいテクニック。ブラウザサポートは問題ありませんが、一貫性に欠ける点も。クリップパスは要素のレイアウトには影響を与えないので、境界線には適用されず、外側の影（英: Outer Shadow）が隠れてしまう恐れがあります。しかしこれが欠点というわけではなく、目的に応じては一長一短と言えるでしょう。

See the Pen
Circle: Clip Path by Tyler Sticka (@tylersticka)
on CodePen.

Radial Gradientをつかった方法

background-imageとradial-gradientを使用することで、視覚的に円形で塗りつぶすことができます。コンテンツはその図形の上に配置されますが、レイアウト（タッチ/クリックのターゲットサイズを含む）は影響ありません。一点、ブラウザによっては円形の端、エッジがギザギザになったり、ぼやけてしまうことがあるためあまり使いませんが、背景の控えめなアクセントにも適しています。

See the Pen
Circle: Radial Gradient by Tyler Sticka (@tylersticka)
on CodePen.

コンテンツの中央揃えについて

CSSによるどんな中央揃えテクニックも有効ですが、円形コンテナの場合はわずかにずれて表示されることがあります。円形コンテナ特有の問題ではありませんが、表面積が少ないときはこの問題が顕著になってしまいます。

これはブラウザがサブピクセル単位で計算するためです。相対単位、ビューポート単位、またはモジュラースケールの値を使用するときは、22.78125pxのような小数点までブラウザは計算する可能性があります。この問題によって、グリッドが崩れてしまうという問題が以前はありました。最近では、ブラウザは要素、プロパティ、コンテキストに応じて計算が変ってくれるのですが、完璧とは言えません。

経験上では、もっとも柔軟な中央揃えテクニックは、絶対配置（親要素のレイアウトに基づいて中心点を確立する）と変形（子要素を数字で配置する）の組み合わせを使用します。

See the Pen
Circle: Centered Icon by Tyler Sticka (@tylersticka)
on CodePen.