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

shape()関数は、CSSのレイアウトにおいて、要素の周囲にテキストが回り込む領域や、要素自体の表示領域を幾何学的な形状で定義するために使用される関数です。この関数は、主にshape-outsideプロパティやclip-pathプロパティと組み合わせて利用されます。

shape-outsideプロパティでは、フロート要素の周囲にテキストが流れる形状を指定し、例えば画像を円形に囲むようにテキストを配置するといった、視覚的に魅力的なレイアウトを実現できます。一方、clip-pathプロパティでは、要素のどの部分を表示し、どの部分を隠すかというクリッピング領域を定義し、要素自体を円、楕円、多角形などの任意の形状に切り抜いて表示することが可能になります。

shape()関数自体は、直接的な形状を定義するものではなく、内部にcircle()（円形）、ellipse()（楕円形）、polygon()（多角形）、inset()（矩形）といった具体的な形状関数を受け取ります。例えば、shape(circle(50% at 50% 50%))のように記述することで円形の形状を定義し、shape(polygon(0 0, 100% 0, 50% 100%))のように記述することで三角形の形状を定義できます。これらのネストされた形状関数は、それぞれ形状のサイズや位置、頂点座標などを引数として持ち、柔軟な形状指定を可能にします。shape()関数を用いることで、ウェブデザインにおいて、従来の四角形にとらわれない、より動的でクリエイティブなレイアウト表現を実現できる強力なツールです。

Copy
1shape(x1 y1, x2 y2, x3 y3, ...)

引数なし

引数はありません

戻り値なし

戻り値はありません