【CSS Modules】shape-outsideプロパティの使い方

shape-outsideプロパティは、CSSにおいてフロート要素の周囲にコンテンツが回り込む形状を定義するために使用されます。通常、ウェブページのフロート要素の周りにテキストや他の要素が回り込む際、その形状は矩形になりますが、このプロパティを使用すると、その回り込み形状を非矩形にカスタマイズできます。

このプロパティは、floatプロパティがnone以外の値に設定された要素に対してのみ効果を発揮します。shape-outsideプロパティには、以下のような値を指定できます。

• none: デフォルト値で、コンテンツはフロート要素の矩形ボックスに沿って回り込みます。
• circle(): フロート要素の周囲に円形の回り込み形状を作成します。半径や中心座標を指定できます。
• ellipse(): 楕円形の回り込み形状を作成します。x軸およびy軸の半径、中心座標を指定できます。
• inset(): 内側の矩形を定義し、その矩形に沿ってコンテンツが回り込みます。四方からのオフセットを指定できます。
• polygon(): 頂点の座標リストを指定することで、任意の多角形の回り込み形状を作成します。
• url(): 画像のURLを指定し、その画像のアルファチャンネル（透明度）に基づいて回り込み形状を決定します。画像が不透明な部分が形状となります。
• margin-box, border-box, padding-box, content-box: これらのキーワードは、フロート要素のボックスモデルの特定の領域を基準とした形状（通常は矩形）を定義します。形状関数と組み合わせて使用することも可能です。

shape-outsideプロパティは、コンテンツの視覚的な流れをより柔軟に制御し、デザインの表現力を高めるために重要な役割を果たします。特に、画像や複雑な図形の周りにテキストを自然に配置したい場合に有効です。

Copy
1.element-with-shape {
2  shape-outside: circle(50%);
3}

引数なし

引数はありません

戻り値なし

戻り値はありません