【CSS Modules】stroke-linecapプロパティの使い方

stroke-linecapプロパティは、SVG（Scalable Vector Graphics）などのグラフィック要素において、線（ストローク）の端点の形状を制御するために使用されるプロパティです。このプロパティは、線がどこで終わるか、そしてその終わりの形状をどのように表示するかを定義します。主にSVGの<path>、<line>、<polyline>などの図形要素に適用され、strokeプロパティで色を、stroke-widthプロパティで太さを指定した線に対して、その「キャップ」と呼ばれる端の部分の外観を決定します。

設定できる主な値は以下の3種類です。

butt：これは初期値であり、線はその終点で直角にカットされます。追加の突き出しはなく、線は指定されたパスの端点でぴったりと終わります。

round：線は半円形の丸いキャップで終了します。この半円の半径は、線の太さ（stroke-widthの値）の半分になります。これにより、線が柔らかく、丸みを帯びた印象になります。

square：線は正方形のキャップで終了します。この正方形の長さは、線の太さ（stroke-widthの値）の半分だけ、線の終点から外側に突き出します。結果として、線が指定された長さよりもわずかに長く見えることがあります。

これらの値を使用することで、ベクターグラフィックスの描画において、線の表現に多様性を持たせることができます。例えば、ボタンの境界線やグラフの線など、見た目のデザインを細かく調整する際に役立ちます。このプロパティは、グラフィカルなユーザーインターフェースやデータ可視化の分野で特に重要となります。

Copy
1.example-path {
2  stroke-linecap: round;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません