ブラウザ別対応状況も解説！CSSでテキストにアウトライン効果を設定する

2024-04-02

CSSでテキストにアウトライン効果を適用する方法

基本的な使い方

h1 {
  text-outline: 1px solid red;
}

上記のコードは、<h1> 要素の周りに、幅1ピクセルの赤い線を描画します。

詳細な設定

text-outline プロパティは、以下の3つの値をカンマ区切りで指定できます。

線の幅: 数値または thin、medium、thick のいずれかを指定できます。
線のスタイル: solid、dashed、dotted、double などのスタイルを指定できます。
線のカラー: カラーコードまたはカラー名で指定できます。

例

h1 {
  text-outline: 2px dashed blue;
}

p {
  text-outline: 1px dotted #f00;
}

その他のオプション

text-outline-offset: 線とテキストの間の距離を指定します。

注意点

text-outline プロパティは、すべてのブラウザでサポートされているわけではありません。
アウトライン効果は、テキストの読みやすさを損なう可能性があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSでテキストにアウトライン効果を適用する</title>
</head>
<body>
  <h1>太字の赤いアウトライン</h1>
  <p>細い青い点線</p>
  <p>太い緑色の二重線</p>
  <p>影付きのアウトライン</p>

  <style>
    h1 {
      text-outline: 2px solid red;
    }

    p:nth-of-type(1) {
      text-outline: 1px dotted blue;
    }

    p:nth-of-type(2) {
      text-outline: 3px double green;
    }

    p:nth-of-type(3) {
      text-outline: 1px solid #000, 2px solid #fff;
    }
  </style>
</body>
</html>

このコードを実行すると、以下のようなアウトライン効果が適用されたテキストが表示されます。

太字の赤いアウトライン
細い青い点線
太い緑色の二重線
影付きのアウトライン

このコードを参考に、さまざまなアウトライン効果を試してみてください。

テキストにアウトライン効果を適用する他の方法

text-shadow プロパティは、テキストに影を付けることができます。この影をぼかすことで、アウトライン効果を作成できます。

h1 {
  text-shadow: 0 0 2px red;
}

h1 {
  box-shadow: 0 0 2px red inset;
}

h1 {
  border: 2px solid red;
  border-style: outline;
}

SVGを使用して、テキストにアウトライン効果を適用することもできます。

<svg width="200" height="100">
  <text x="50" y="50" font-size="24">Hello, world!</text>
  <path d="M50 50 L150 50" stroke="red" stroke-width="2" />
</svg>