CSSで文字に縁取りをつけたい。誰もが一度はぶつかる壁だ。
そして多くの人が遠回りする。text-shadowを重ねたり、SVGに逃げたり、最悪画像化する。
正直、それは遠回りだ。
今のフロントエンドはもうそこまで原始的じゃない。
text-strokeとpaint-order、この2つを理解すれば、一気に視界が開ける。
ただし。
この2つは「知っているだけ」では使えない。順序、描画の仕組み、ブラウザ事情。ここを理解していないと、すぐ破綻する。
text-strokeとは何か。見た目は単純、中身は罠だらけ
text-strokeは文字に輪郭線をつけるプロパティだ。
いわばIllustratorの「線」そのまま。
基本はこれだけ。
h1 {
-webkit-text-stroke: 2px black;
color: white;
}これで白文字に黒い縁取りがつく。シンプルだ。
だが、ここで違和感を感じたことはないか？
「文字が太くなって潰れる」
「内側が削られる」
「思ったよりダサい」
原因は単純。
strokeは「文字の中心から外と内の両方に広がる」。
つまり、内側に侵食してくる。
これがtext-stroke単体の限界だ。
paint-order: stroke がすべてを解決する
ここで登場するのがpaint-order。
描画順を制御するプロパティだ。
デフォルトの描画順はこうなっている。
fill → stroke → markers
つまり塗りが先、輪郭が後。 [oai_citation:0‡MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/paint-order?utm_source=chatgpt.com)
この順番が問題を生む。
strokeが後から描かれることで、内側にも被さる。だから潰れる。
じゃあどうするか。
h1 {
color: white;
-webkit-text-stroke: 4px black;
paint-order: stroke;
}これで描画順が変わる。
stroke → fill
つまり輪郭が先、塗りが後。
結果どうなるか。
内側が塗りで上書きされる。
つまり「外側だけの綺麗な縁取り」になる。
これが本質だ。
なぜこれが重要か。デザインのクオリティが一段上がる
縁取り文字は派手な装飾だと思われがちだ。
でも実際は「可読性」を上げるための武器でもある。
例えばヒーローセクション。
背景が写真。文字が白。普通に置いたら埋もれる。
そこでstrokeを使う。
だが潰れた文字なら意味がない。
paint-orderを理解しているかどうか。
ここで差が出る。
雑に言うと。
「素人の縁取り」と「プロの縁取り」の違いだ。
実務で使えるパターン集
1. 王道の袋文字
.outline-text {
color: white;
-webkit-text-stroke: 3px black;
paint-order: stroke;
}最も使う。迷ったらこれ。
2. グラデーション文字＋縁取り
.gradient-text {
background: linear-gradient(45deg, #ff0000, #00ffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px black;
paint-order: stroke;
}これ、ヒーローで使うと強い。
ただしやりすぎると一気に安っぽくなる。
3. 太いアウトラインロゴ風
.logo-text {
color: #fff;
-webkit-text-stroke: 6px #000;
paint-order: stroke;
font-weight: 900;
letter-spacing: 0.05em;
}海外っぽいデザインになる。
でも日本語だと一気にダサくなる場合もある。フォント選びが重要。
4. 影＋縁取りの組み合わせ
.shadow-outline {
color: white;
-webkit-text-stroke: 2px black;
paint-order: stroke;
text-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}立体感が出る。
ただし影とstrokeが喧嘩することもある。調整は必須。
ブラウザ対応の現実。ここを知らないと事故る
ここ、逃げずに見るべきだ。
text-strokeは正式仕様ではない。
ほぼ-webkit依存。 [oai_citation:1‡Front-end Reference](https://www.frontendreference.com/css/text-stroke.html?utm_source=chatgpt.com)
つまり。
- Chrome OK
- Safari OK
- Edge OK
- Firefox 微妙
じゃあどうするか。
フォールバックを書く。
.text {
color: white;
}
/* 対応ブラウザ */
@supports (-webkit-text-stroke: 1px black) {
.text {
-webkit-text-stroke: 2px black;
paint-order: stroke;
}
}
/* 非対応ブラウザ */
@supports not (-webkit-text-stroke: 1px black) {
.text {
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
}正直、ここまでやる人は少ない。
だから差がつく。
よくあるミス。あなたもやっている可能性が高い
text-shadowで代用する
悪くないが、ぼやける。
シャープさが出ない。
strokeだけで満足する
内側が潰れている。
本人は気づいていない。
太くしすぎる
8pxとかやりがち。
結果、子供っぽいデザインになる。
フォントを考えない
これが一番ヤバい。
細いフォントに太いstrokeを乗せると崩壊する。
一度自分のデザインを疑ってみた方がいい。
その縁取り、本当に必要か？
応用。アニメ・ゲームUIで使われる理由
なぜこの技術が重要か。
答えはアニメとゲームUIだ。
キャラ名、必殺技、字幕。
背景が激しく変わる。
その中で読ませるには、縁取りが必須。
つまりこれは装飾ではない。
情報設計だ。
あなたのサイトでも同じことが起きている。
ヒーロー、バナー、OGP画像。
見た目ではなく、伝達のためのCSS。
そこに気づけるかどうか。
さらに一歩。疑似要素で外側だけstrokeする
もう一段上に行く。
.advanced {
position: relative;
color: white;
}
.advanced::before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
-webkit-text-stroke: 4px black;
color: transparent;
z-index: -1;
}これで完全に外側だけのstrokeになる。
背景透過も可能。
ここまでやると「それっぽさ」が一気に消える。
プロの領域。
これを理解していない人は多い。だから差になる
text-strokeは知っている人が増えた。
paint-orderはまだ知られていない。
ここにギャップがある。
フロントエンドは細部で差がつく。
このレベルの知識が積み重なる。
なんとなく実装する人と、意図して実装する人。
その差は確実に出る。
最後に。あなたに問いかけたい
その見出し、本当に読ませたいと思っているか？
それとも、なんとなく置いているだけか？
CSSはただの装飾じゃない。
伝えるための設計だ。
もう一つ。
あなたのサイト、1秒で「読みたい」と思わせられるか？
それとも流されて終わっているか？
text-strokeとpaint-orderは小さな技術だ。
でも、こういう小さな積み重ねが全体のクオリティを決める。
軽視するか、武器にするか。
その差は大きい。