【CSS Modules】circle()関数の使い方

circle()関数は、CSSにおいて特定の形状、特に円形を定義するために使用される関数です。この関数は主に、要素の描画領域を円形に切り抜くclip-pathプロパティ、フローティング要素の周りにテキストを円形に回り込ませる形状を指定するshape-outsideプロパティ、あるいは要素がアニメーションする際の移動パスを円形に定義するoffset-pathプロパティなどの値として活用されます。

circle()関数は、円の半径と、オプションで円の中心点の位置を指定する引数を取ります。例えば、circle(50% at 50% 50%)と記述した場合、これは要素の幅に対する50%の半径を持ち、中心点が要素の中央にある円を定義することを意味します。半径はpxやem、remなどの長さの単位やパーセンテージで指定でき、中心点はat x yの形式で座標を指定するか、leftやtopなどのキーワードを用いて指定します。

CSS Modulesは、CSSをコンポーネントごとにスコープ化し、クラス名の衝突を防ぐための仕組みですが、このcircle()関数のようなCSSの組み込み関数自体は、CSS Modulesの環境下でも通常のCSSと同様に機能します。したがって、CSS Modulesを使用して開発を行う際にも、コンポーネントのスタイル定義内でcircle()関数を直接利用して、円形のデザインやレイアウトを適用することが可能です。この関数を理解し活用することで、ウェブデザインにおける表現の幅が大きく広がります。

Copy
1circle(50%)

引数なし

引数はありません

戻り値なし

戻り値はありません