【CSS Modules】ellipse()関数の使い方
ellipse()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
ellipse()関数は、CSSにおいて、楕円（または円）の形状を定義する処理を実行する関数です。この関数は、主にshape-outside、clip-path、offset-pathなどのプロパティの値として利用されます。これにより、要素の周囲にテキストを楕円形に回り込ませる領域を作成したり、要素の表示範囲を楕円形に切り抜いたりするなど、柔軟なレイアウトや視覚効果を実現できます。
基本的な書式はellipse(rx ry at cx cy)です。ここで、rxは楕円のX軸方向の半径、ryはY軸方向の半径を表します。また、cxとcyはそれぞれ楕円の中心点のX座標とY座標を指定します。rxとryが同じ値を指定すると、結果として円が描画されます。
中心点のcxとcyの指定を省略した場合、楕円の中心は自動的にその要素のコンテンツボックスの中心に配置されます。さらに、rxとryの半径の指定も省略することが可能です。その場合、可能な限り最大の半径（closest-side）が適用され、要素の境界に接する楕円が自動的に生成されます。
このように、ellipse()関数は、ウェブページのデザインにおいて、より複雑で多様な図形ベースの表現を可能にする、非常に重要な機能です。
公式リファレンス: ellipse()
構文(syntax)
1selector { 2 property: ellipse(radius-x radius-y at position-x position-y); 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
basic-shape
ellipse() 関数は、楕円形の図形を定義するための CSS の機能です。この関数の戻り値は basic-shape であり、要素の形状を楕円形に設定するために使用できます。