【CSS Modules】shape型の使い方
shape型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
shape関数は、CSSにおいて要素の形状を定義するために使用される一連の関数を指します。これらの関数は、主にウェブコンテンツのレイアウトにおいて、画像や他の要素の周囲にテキストを回り込ませるような複雑なデザインを実現する際に重要な役割を果たします。具体的には、shape-outsideプロパティなどの値として適用され、要素が占めるフローティング領域の形状を定義し、その定義された図形の外側にインラインコンテンツが配置されるように制御します。
代表的なshape関数には、inset()、circle()、ellipse()、polygon()などがあります。inset()関数は矩形を定義し、circle()関数は円を、ellipse()関数は楕円を、そしてpolygon()関数は任意の多角形を定義します。それぞれの関数は、引数としてサイズや位置、頂点の座標などを受け取り、指定された図形を生成します。これらの関数によって作成される図形は、CSSの<basic-shape>データ型として扱われます。
システムエンジニアを目指す方にとって、shape関数を理解することは、ウェブページの視覚的な表現力を高めるために役立ちます。CSS Modulesの文脈では、コンポーネントごとに独立したスタイルとして、これらの図形定義を適用することが可能になります。これにより、単なる四角いブロックではない、より柔軟で動的なレイアウトを構築するための基盤となります。
公式リファレンス: <shape>
構文(syntax)
1.element { 2 shape-outside: circle(50% at center); 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません