HTMLのCSSで文字に枠線をつける方法は無いのでSVGで代用する

2024/12/4 サイト運営

SVGでは標準的な方法で「文字の外側だけ」に縁を付けるのは難しいです。しかし、少し工夫をすれば実現可能です。以下は外側だけに縁取りを作る方法です。

解決方法

文字を二重で描画し、背景として少し拡大した縁取り用文字を先に描画する方法を使います。この方法では、外側だけに縁取りを見せることができます。

修正版SVGコード（外側だけの縁取り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外側だけの縁取り</title>
</head>
<body>
<h1>テスト</h1>
<p>テストテスト</p>
  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
    <!-- 縁取り文字 -->
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
          font-family="Noto Sans CJK JP" font-size="40"
          fill="none" stroke="black" stroke-width="6">
      縁取り文字
    </text>
    <!-- 内側の文字 -->
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
          font-family="Noto Sans CJK JP" font-size="40"
          fill="white">
      縁取り文字
    </text>
  </svg>
<p>テストテスト</p>
</body>
</html>

修正のポイント

二重描画で解決
- 外側の縁取り文字を先に描画（fill="none" & stroke="black"）。
- 内側の文字をその上に重ねて描画（fill="white"）。
縁取りの幅の調整
- 縁取り部分の幅は stroke-width で調整可能。
- 内側の文字と背景の縁取り文字が完全に重なるように調整されています。
順序が重要
- 縁取り用の文字を背景に描画し、その上に内側の文字を描画することで、外側だけが縁取りになります。