テキストに縁取りを設定することで、デザインにアクセントを加えることができます。この記事では、CSSを使用してテキストに縁取りを設定する3つの方法を紹介します。
text-shadow を使用する方法
text-shadow プロパティを使って、テキストの周りに影を重ねることで縁取り効果を作成します。この方法はシンプルで実装が容易です。
.outlined-text {
color: white; /* テキストの色 */
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}上記のコードでは、4つの text-shadow を使ってテキストの周りに黒い縁取りを追加しています。
重ねてテキストを配置する方法
同じテキストを重ねて配置し、片方のテキストに縁取りを設定する方法です。この方法は多少手間がかかりますが、カスタマイズ性が高いです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキスト縁取り</title>
<style>
.outlined-text-container {
position: relative;
display: inline-block;
}
.outlined-text {
position: absolute;
top: 0;
left: 0;
z-index: -1;
color: black;
}
.main-text {
color: white;
position: relative;
}
</style>
</head>
<body>
<div class="outlined-text-container">
<span class="outlined-text">縁取りテキスト</span>
<span class="main-text">縁取りテキスト</span>
</div>
</body>
</html>この方法では、黒い縁取りのテキストを背面に配置し、白いテキストを前面に重ねています。
SVG を使用する方法
SVG（Scalable Vector Graphics）を使用して、テキストに縁取りを追加する方法です。SVGは解像度に依存せず、どのサイズでも美しく表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGで縁取り</title>
</head>
<body>
<svg width="500" height="100">
<text x="50" y="50" font-family="Arial" font-size="40" fill="white" stroke="black" stroke-width="3">
縁取りテキスト
</text>
</svg>
</body>
</html>この方法では、text 要素に stroke と stroke-width 属性を使用して縁取りを追加しています。
まとめ
テキストに縁取りを設定する方法はいくつかあります。簡単に実装できる text-shadow の方法から、カスタマイズ性の高い重ねてテキストを配置する方法、解像度に依存しないSVGの方法まで、用途に応じて使い分けることができます。どの方法を選ぶかは、デザインや実装の要件に応じて決めてください。
