【CSS Modules】strokeプロパティの使い方
strokeプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
strokeプロパティは、SVG（Scalable Vector Graphics）要素の図形のアウトライン、つまり線の部分の色を保持するプロパティです。SVGは、拡大・縮小しても画質が劣化しないベクター画像を表示するためのXMLベースのフォーマットであり、Webページで高品質なグラフィックやアイコンを扱う際によく利用されます。
このプロパティは、<path>、<circle>、<rect> といったSVGの図形要素に対して適用されます。例えば、Webページ上に円を描いた際にその円周の色を決めたり、長方形の枠線の色を指定したりする際に用いられます。値には、red のようなカラーキーワード、#FF0000 のような16進数表記、rgb(255, 0, 0) のようなRGB値など、CSSで一般的に使用される標準的なカラー値を指定することが可能です。また、none を指定することで、線の描画自体を完全に無効にすることもできます。
strokeプロパティは、線の色を決定する基本的な役割を持ちますが、SVGの線の描画をより詳細に制御するためには、他にも多くの関連プロパティが存在します。例えば、線の太さを指定するstroke-width、線の透明度を調整するstroke-opacity、破線のパターンを設定するstroke-dasharrayなどが挙げられます。これらのプロパティと組み合わせて使用することで、複雑で表現豊かなSVGグラフィックを作成することが可能になります。WebデザインにおいてSVGを用いる際、見た目を自由にカスタマイズするために不可欠なプロパティの一つです。
構文(syntax)
1path { 2 stroke: red; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません