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

 

 

この記事では、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.

 

 

コンテンツの切り抜き、クロッピングについて

コンテンツの中央揃えは解決できましたが、画像で円形コンテンツを塗りつぶしたいときはどうしたら良いでしょう。

 

HTML/CSSをつかったアプローチ

border-radiusを使うことで円形でimg要素を切り抜くことができます。

 

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

 

ただし、いくつかの制限があることを覚えておきましょう。

• 要素はレスポンシブではありません。
• 背景から画像をオフセットするため、内側の影を適用することはできません。
• object-fit: coverを使用することで長方形の画像の歪みを防ぐことができますが、IE11ではサポートされていません。

 

より実践向けの例としては、ラッパー要素を使用してアスペクト比ボックス（英: Aspect Ratio Box）を作成することで、正方形の比率を保ちます。さらに@supportを使うことで長方形の画像表示にも対応し、透明な内側の影を適用し、背景から画像を切り抜く以下の方法です。

 

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

 

SVGをつかったアプローチ

上記テクニックと同じことをSVGを使ってスタイリングすることもできます。

 

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

 

しかし、SVG画像要素はsrcsetやサイズをサポートしていないので、一般的な画像サムネイル画像に利用することは少ないでしょう。

 

サブピクセルのずれ、ギャップについて

円形コンテンツの上に内側の影や境界線などデザインを加えると、最終的に円形からサブピクセルのにじみが表示されているのに気付くかもしれません。

 

 

残念ながら、この問題の解決策は見つかりませんでした。この問題は、境界線の描画または画像の表示に使用されるテクニックに関係なく起こるようで、すべてのブラウザである程度で発生します。円形コンテンツのエフェクトをうまく重ねる方法があれば教えて下さい。

 

 

 

円形の周りを文字で囲む方法

ウェブサイトの基本となる文字テキスト。サークル円と組み合わせることでどのようなことができるか詳しく見てみましょう。

 

円形コンテナの周りを文字テキストで囲む方法

shape-outsideプロパティを使用することで、円形コンテンツの周りを文字テキストで囲むことができます。

 

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

 

円形コンテナの中に文字テキストを配置する方法

レスポンシブに対応するのがほとんど不可能なため、あまり良いテクニックとは言えません。shape-insideプロパティがブラウザ対応するのを待ったほうが良いでしょう。

 

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

 

円形パスに沿って文字テキストを配置する方法

SVGとを利用することで、曲線パスに沿って文字テキストを表示することができます。

 

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

 

残念なことに、すべてのブラウザでのはサポートされていませんが、への変換はそれほど難しくはありません。

 

 

おめでとうございます、終了です。

いかがでしたでしょう。CSSをつかった円形サークルにまつわるさまざまなテクニックをまとめてご紹介しました。これできっとCSSの円形マスターになったはず、今回学んだテクニックを実践でも生かしてみましょう。

 

参照元リンク : CSS Circles – Cloudfour.com