【保存版】CSSでテキストに縁取りを追加する方法！-webkit-text-stroke-colorだけじゃない

書き方

-webkit-text-stroke: <color> <width>

<width>: 縁取りの太さをピクセル単位で指定します。
<color>: 縁取りの色を指定します。

例

p {
  -webkit-text-stroke: #F00 2px;
}

この例では、段落内のすべてのテキストに赤い 2 ピクセルの縁取りが追加されます。

注意事項

-webkit-text-stroke-color プロパティは、他のテキスト装飾プロパティ (例: text-shadow) と同時に使用できます。
縁取りは、テキストの読みやすさを妨げる可能性があることに注意してください。縁取りを使用する場合は、慎重に検討してください。
-webkit-text-stroke-color は、すべてのブラウザでサポートされているわけではないことに注意してください。

代替手段

-webkit-text-stroke-color プロパティは、Webkit ブラウザでのみ使用できます。他のブラウザで同様の効果を得るには、SVG または Canvas などの代替手段を使用する必要があります。

CSS 拡張機能について

CSS 拡張機能は、CSS に新しい機能を追加するプロパティや値です。これらの拡張機能は、特定のブラウザまたはブラウザのセットでのみサポートされます。

CSS 拡張機能を使用する場合は、その拡張機能がサポートされているブラウザでのみ機能することが重要です。また、拡張機能の使用がアクセシビリティやパフォーマンスに影響を与えないように注意する必要があります。

基本的な例

p {
  -webkit-text-stroke: #F00 2px;
}

異なる色の縁取り

この例では、見出し (h1) に青色の 5 ピクセルの縁取り、段落 (p) に赤い 2 ピクセルの縁取りを追加します。

h1 {
  -webkit-text-stroke: #00F 5px;
}

p {
  -webkit-text-stroke: #F00 2px;
}

縁取りと影の組み合わせ

この例では、テキストに赤い 2 ピクセルの縁取りと、3 ピクセルボケの黒い影を追加します。

p {
  -webkit-text-stroke: #F00 2px;
  -webkit-text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

この例では、:hover 疑似要素を使用して、マウスカーソルがホバリングしているときにリンクに太い緑色の縁取りを追加します。

a {
  text-decoration: none;
}

a:hover {
  -webkit-text-stroke: #0F0 4px;
}

これらの例は、-webkit-text-stroke-color プロパティの基本的な使い方を示しています。創造性を発揮して、独自のスタイルを作成してみてください。

以下のウェブサイトでは、-webkit-text-stroke-color を使った様々なクリエイティブな例を見つけることができます。

縁取りは、テキストの読みやすさを妨げる可能性があることに注意してください。縁取りを使用する場合は、慎重に検討してください。
前述のように、-webkit-text-stroke-color プロパティは Webkit ブラウザでのみサポートされます。

背景画像を使う

疑似要素 ::before や ::after を使って疑似的な縁取りを生成することもできます。
テキストの上にその画像を背景画像として配置します。
テキストと同じ大きさの透過 PNG 画像を用意し、縁取りとなる部分を黒色で塗りつぶします。

利点

複雑な縁取りや、SVG などの画像を含む縁取りには向いていません。
画像ファイルを用意する必要があるので、若干の手間がかかります。
比較的シンプルな方法で、縁取りの色や太さを自由に調整できます。

例

.text-stroke {
  background-image: url('text-stroke.png');
  background-repeat: no-repeat;
  background-position: center;
  text-shadow: transparent 0 0 2px; /* 縁取りとテキストの隙間を作る */
}

SVGを使う

縁取りの色や太さを SVG コードで自由に設定できます。
SVG でテキストと縁取りを記述し、それを inline 要素として HTML に埋め込みます。

利点

古いブラウザでは SVG がサポートされていない場合があります。
コードが複雑になり、メンテナンスが大変になる可能性があります。
複雑な縁取りや、アニメーション付きの縁取りにも柔軟に対応できます。
ベクター画像なので、解像度に依存せず綺麗に表示できます。

例

<svg viewBox="0 0 100 50">
  <text x="50" y="25">サンプルテキスト</text>
  <path stroke="#F00" stroke-width="2" fill="none" d="M40 15 L90 15 L90 35 L40 35 Z" />
</svg>

Canvasを使う

他の方法と比べて柔軟性が高く、様々な効果を実現できます。
JavaScript で Canvas 要素を操作し、テキストと縁取りを直接描画します。

利点

パフォーマンスによっては、描画処理が重くなる可能性があります。
JavaScript の知識が必要となり、難易度が高くなります。
動的な縁取りや、インタラクティブな縁取りを作成できます。
他の方法では実現できないような、高度な縁取りを作成できます。

例

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 100;

ctx.font = '20px Arial';
ctx.fillText('サンプルテキスト', 150, 50);

ctx.strokeStyle = '#F00';
ctx.lineWidth = 2;
ctx.strokeText('サンプルテキスト', 150, 50);

テキスト装飾プロパティを組み合わせる

他の方法と比べてシンプルで、手軽に実装できます。
text-shadow や text-decoration などの CSS プロパティを組み合わせて、疑似的な縁取りを生成できます。

利点

複雑な縁取りや、細かい調整には向いていません。
ブラウザの互換性が高く、安定した動作が期待できます。
コードが比較的シンプルで分かりやすいです。

例

.text-stroke {
  text-shadow: 2px 2px 0px #000; /* 影で縁取りを作る */
  text-decoration: underline 2px #F00; /* 下線で縁取りを作る */
}

どの方法を選択するべきか

それぞれの方法には一長一短があるので、状況に合わせて最適な方法を選択する必要があります。

複雑な縁取りやアニメーションが必要な場合は、Canvas が唯一の選択肢となる可能性があります。
より自由度の高い表現を求める場合は、SVG や Canvas を検討しましょう。
シンプルで汎用性の高い方法を求める場合は、背景画像 や テキスト装飾プロパティ がおすすめです。

いずれの方法を使用する場合も、アクセシビリティ に配慮する必要があります。縁取りが