概要

stroke-linecapは、SVG（Scalable Vector Graphics）の線の端の形状を設定するためのCSSプロパティです。線の端をどのように見せるかを指定することで、デザインの細部にこだわった表現が可能になります。この記事では、stroke-linecapの基本的な使い方や、異なる設定による線の端の見た目の違いについて解説します。

stroke-linecapの基本構文

stroke-linecapの構文は以下の通りです。

stroke-linecap: 値;

• 値: 線の端の形状を決定するための指定。以下の3つの値があります。
  • butt: デフォルトの設定で、端を直角にカットします。
  • round: 端を丸くカーブさせます。
  • square: 端を四角くカットし、線幅の半分だけ延長されます。

使用例

butt（デフォルト）

buttは、線の端を直角にカットし、余計な装飾を加えない設定です。

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="10" stroke-linecap="butt" />
</svg>

• この設定では、線の端がそのまま直角に終わるため、シンプルでスッキリした印象を与えます。

round（丸い端）

roundは、線の端を丸くすることで、柔らかい印象を与える設定です。

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="10" stroke-linecap="round" />
</svg>

• 端が半円形に仕上がり、線が丸く終わるため、滑らかで親しみやすい見た目になります。

square（四角い端）

squareは、端を直角にカットし、さらに線幅の半分だけ先に延長されます。

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="10" stroke-linecap="square" />
</svg>

• 端が直角に切られた上に、線幅の半分だけ延長されており、線が力強く視覚的に広がっているように見えます。

stroke-linecapの用途

stroke-linecapは以下のような場面で役立ちます。

• アイコンやイラストのスタイル調整
  アイコンやロゴの線の端を調整することで、デザインの一貫性を高めたり、柔らかさや強さを表現できます。
• グラフやチャートの装飾
  グラフの線の端を丸めることで、データを視覚的にわかりやすくしたり、デザインを洗練させることができます。
• ラインアートの表現力を向上
  線の端を変えることで、線画に微妙なニュアンスやキャラクターを追加し、より個性的なデザインに仕上げます。

stroke-linecapの注意点

• stroke-linecapはSVGの線の端のみに適用されるプロパティです。通常のHTMLのボーダーや線には適用できません。
• stroke-linecapを使っても、端の見た目以外の線の太さや長さには影響しないため、他のプロパティと組み合わせて使用する必要があります。

まとめ

stroke-linecapは、SVGの線の端の形状を簡単にカスタマイズできる便利なプロパティです。デフォルトのbutt、柔らかな印象のround、しっかりしたsquareと、3つのオプションを使い分けることで、線に個性を持たせることができます。線の端を工夫して、より魅力的で視覚的に洗練されたデザインを目指してみましょう。