【CSS Modules】rxプロパティの使い方
rxプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
rxプロパティは、主にScalable Vector Graphics（SVG）要素において、図形のX軸方向の角丸の半径を保持するプロパティです。このプロパティは、特に<rect>（矩形）などのSVG図形要素に適用され、その角を丸めるために使用されます。rxプロパティに指定される値は、長さを示す数値と単位（例: px, em, remなど）や、パーセンテージで構成されます。例えば、rx: 10px;と設定することで、矩形の角がX軸方向に10ピクセル分丸くなります。
このプロパティは、対応するryプロパティ（Y軸方向の角丸半径）と組み合わせて使用されることが一般的です。rxとryの両方が指定された場合、その値に基づいて楕円形の角丸が形成されます。もしrxのみが指定され、ryが指定されない場合は、ryにはrxと同じ値が適用されることがしばしばあります。
CSS Modulesの環境下でrxプロパティを定義する際は、そのスタイルが記述されたコンポーネントのスコープ内で局所的に適用される点が重要です。これにより、複数のSVG要素を持つ複雑なアプリケーションにおいて、それぞれの要素の角丸スタイルが他の要素やコンポーネントに影響を与えることなく、独立して管理できるようになります。これにより、スタイル間の衝突を避け、メンテナンス性の高いコードベースを維持できます。ただし、rxプロパティはHTML要素の角丸を制御するborder-radiusプロパティとは異なり、主にSVG要素に特化したものであるため、その用途を理解して適切に使用することが求められます。
公式リファレンス: rx
構文(syntax)
1rx: <length> | <percentage> | auto;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません