文字の縁取り・袋文字をCSSだけで｜コピペで使える5種類と、太くしてもやせない書き方

チラシやテレビのテロップでよく見る、文字のまわりを別の色で囲んだ「袋文字」。WEBでも、画像を作らずにCSSだけで作れます。文字のままなので、あとから言葉を書きかえるのも簡単です。

使いどころ

写真や柄の上に文字を置くときと、短い見出しを目立たせたいときに使う。本文や小さな文字には使わない。

使う部品は3つです。文字に縁の線を描く -webkit-text-stroke（ウェブキット・テキスト・ストローク）、縁と文字の塗りの順番を決める paint-order（ペイント・オーダー）、文字に影をつける text-shadow（テキスト・シャドウ）です。

連載「WEBの技術」の5回目です。
3回目のグラデーションの文字に続いて、今回も「文字そのもの」の見せ方を取り上げます。

完成見本：縁取り・袋文字5種類

下の5つは、すべて画像ではなく文字です。スマホで見ている方は、文字を長押しすると選択できます。

WEB DESIGN

OUTLINE1. 中が抜けた文字

新メニュー登場

FUKURO2. 袋文字（外側に縁）

週末セール

POP3. 縁＋ずらした影

思い出を、一枚に

ON PHOTO4. 写真の上でも読める白文字

お問い合わせ

SHADOW5. 影を重ねて作る縁

※ この記事の見本は、ゴシック体のいちばん太い文字で作っています。お使いのフォントや太さによって、縁の見え方が変わります。

コピペ用のコード

見本ごとに、HTMLとCSSを並べました。HTMLは見出しを置きたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。

CSSの前半にある .kd-ts は、5種類に共通する文字の大きさと太さです。同じページで何種類か使うときは、1回だけ入れれば足ります。クラス名の頭の kd-ts- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。見出しとして使うときは、<p> を <h2> などに変えてください。

1. 中が抜けた文字

文字の中を透明にして、縁の線だけを残します。大きな英字の飾りや、背景に薄く敷く文字に向いています。線だけなので、短い言葉に使います。

WEB DESIGN

HTML

<p class="kd-ts kd-ts-outline">WEB DESIGN</p>

CSS

/* 5種類に共通：文字の大きさと太さ */
.kd-ts {
  display: inline-block;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .kd-ts {
    font-size: 32px;
  }
}
.kd-ts-outline {
  color: #0284C7;
}
/* 縁取りが使えるブラウザのときだけ、中を透明にする */
@supports (-webkit-text-stroke: 2px #0284C7) {
  .kd-ts-outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #0284C7;
  }
}

2. 袋文字（外側に縁）

白い文字のまわりを、青い縁で囲みます。線を「文字の外側」にだけ見せるのがポイントで、太くしても文字がやせません。チラシの見出しでおなじみの形です。

新メニュー登場

HTML

<p class="kd-ts kd-ts-fukuro">新メニュー登場</p>

CSS

/* 5種類に共通：文字の大きさと太さ */
.kd-ts {
  display: inline-block;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .kd-ts {
    font-size: 32px;
  }
}
.kd-ts-fukuro {
  color: #FFFFFF;
  -webkit-text-stroke: 8px #0369A1;
  /* 縁を先に塗り、文字をあとから上に塗る＝縁が外側だけに見える */
  paint-order: stroke fill;
}

3. 縁＋ずらした影

黄色の文字に紺の縁、さらに右下へ同じ紺の影をずらして重ねます。立体的に浮き上がって見え、にぎやかなお知らせに向きます。

週末セール

HTML

<p class="kd-ts kd-ts-pop">週末セール</p>

CSS

/* 5種類に共通：文字の大きさと太さ */
.kd-ts {
  display: inline-block;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .kd-ts {
    font-size: 32px;
  }
}
.kd-ts-pop {
  color: #FDE047;
  -webkit-text-stroke: 8px #1E293B;
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 #1E293B;
}

4. 写真の上でも読める白文字

明るい所と暗い所が混ざった背景の上でも、白い文字が読めるように、細い濃い縁と、ぼかした影を足します。縁は細く、目立たせすぎないのがコツです。

思い出を、一枚に

HTML

<div class="kd-ts-photo-bg"><p class="kd-ts kd-ts-photo">思い出を、一枚に</p></div>

CSS

/* 5種類に共通：文字の大きさと太さ */
.kd-ts {
  display: inline-block;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .kd-ts {
    font-size: 32px;
  }
}
.kd-ts-photo-bg {
  padding: 28px 16px;
  border-radius: 12px;
  /* 写真のかわりの背景。実際は写真を置く */
  background: linear-gradient(120deg, #FDE68A, #38BDF8 45%, #0F172A);
}
.kd-ts-photo {
  font-size: 30px;
  color: #FFFFFF;
  -webkit-text-stroke: 3px rgba(15, 23, 42, .85);
  paint-order: stroke fill;
  text-shadow: 0 2px 8px rgba(15, 23, 42, .6);
}

5. 影を重ねて作る縁

縁取りの指定を使わず、ぼかさない影を8つの向きにずらして重ね、縁に見せる昔からのやり方です。線が細いうちはきれいに見えます。太くした場合の弱点は、後半で比べます。

お問い合わせ

HTML

<p class="kd-ts kd-ts-shadow">お問い合わせ</p>

CSS

/* 5種類に共通：文字の大きさと太さ */
.kd-ts {
  display: inline-block;
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .kd-ts {
    font-size: 32px;
  }
}
.kd-ts-shadow {
  color: #FFFFFF;
  text-shadow:
    2px 0 0 #0369A1, -2px 0 0 #0369A1,
    0 2px 0 #0369A1, 0 -2px 0 #0369A1,
    2px 2px 0 #0369A1, -2px -2px 0 #0369A1,
    2px -2px 0 #0369A1, -2px 2px 0 #0369A1;
}

仕組み：縁の線は「文字の輪郭の真ん中」に引かれる

-webkit-text-stroke で、文字に縁の線を描く

-webkit-text-stroke は、文字の輪郭に沿って線を描く指定です。-webkit-text-stroke: 2px #0284C7; のように、太さと色を続けて書きます。頭に -webkit- と付いていますが、MDNでは2017年4月から主要なブラウザで使える機能と示されています。

気をつけたいのは、線が文字の輪郭の「真ん中」に引かれることです。8pxの線なら、4pxは文字の外側に、残りの4pxは文字の内側にかかります。そのため、線を太くするほど文字の中が線に埋もれ、細い画や「は」「ぬ」のような込み入った形がつぶれます。

paint-order で、縁を「文字の後ろ」に回す

そこで使うのが paint-order: stroke fill; です。「縁（stroke）を先に描き、文字の塗り（fill）をあとから上に描く」という順番の指定です。内側にかかった線が塗りで隠れるので、縁は外側の半分だけが見えるようになります。チラシで見る袋文字は、この形です。

paint-order は、もともとSVG（線や図形で描く画像の形式）のための指定で、MDNではHTMLの文字では「縁と塗りの順番」だけを変えられると説明されています。主要なブラウザで使えるようになったのは2024年3月からと、比較的新しい機能です。

-webkit-text-fill-color で、文字の中を透明にする

1番目の「中が抜けた文字」は、-webkit-text-fill-color: transparent; で文字の塗りを透明にし、縁の線だけを残しています。ここで注意したいのは、縁取りが使えないブラウザでこの指定だけが効くと、文字が見えなくなることです。そこで、@supports（サポーツ＝ブラウザが対応しているときだけ中の指定を効かせる書き方）で囲み、ふだんは color の青で文字が出るようにしています。

text-shadow を重ねると、影が縁に見える

5番目は、ぼかさない影（3つ目の数値が0）を、上下左右とななめの8方向へ2pxずつずらして重ねています。8つの影が文字のまわりをすき間なく囲むので、縁のように見えます。-webkit-text-stroke が広く使えるようになる前からある方法で、影は文字の後ろに描かれるので、最初から「外側だけの縁」になります。

使うもの	得意なこと	弱いところ
-webkit-text-stroke だけ	線の太さを1か所で決められる	太くすると文字の中に食い込む
＋ paint-order: stroke fill	太くしても文字がやせない	2024年3月より前のブラウザでは食い込む形で出る
text-shadow を8つ重ねる	昔からあるブラウザでも同じ形で出る	太くすると角がギザギザになる

数値を変えるとどうなるか

縁の太さ

袋文字（paint-order あり）の縁の太さを変えて並べました。

文字

2px

文字

8px
（見本）

文字

16px

2pxだと、縁があることに気づきにくくなります。16pxまで太くすると、文字どうしの縁がくっつき、すき間が埋まって読みにくくなります。外側に見えるのは指定の半分なので、文字の大きさの1/6前後（44pxの文字なら8px前後）が、縁がはっきり見えて文字も読める、というのがKAKERUの判断です。

paint-order の、あり・なし

文字

paint-order なし
（縁が中に食い込む）

文字

paint-order: stroke fill
（見本）

同じ8pxの縁でも、paint-order がないと、縁が文字の内側まで入り込み、白い部分がやせて読みにくくなります。袋文字を作るときは、paint-order をセットで書きます。

影で作る縁と、縁取りの指定

文字

影を8つ・1px

文字

影を8つ・4px

文字

縁取り 8px
（外側に4px）

影で作る縁は、1pxならきれいですが、4pxまでずらすと、文字の角や丸い部分で、8つの影のすき間がギザギザに見えます。太い縁を付けたいときは、-webkit-text-stroke と paint-order の組み合わせのほうが、なめらかな縁になります。

中が抜けた文字は、線の太さと文字の大きさで決まる

WEB

1px

WEB

2px
（見本）

WEB

2px・小さな文字

中が抜けた文字は、線だけで形を見せるので、1pxでは細すぎて形が追いにくくなります。小さな文字では、2pxの線でも文字の中のすき間がつぶれます。大きな見出し・短い言葉だけに使います。

スマホと、見る人への配慮

読みやすさは「縁の色」と背景の差で決まる

WCAG（ウェブのアクセシビリティの国際的な基準）では、文字と背景の色の差（コントラスト比）を、ふつうの文字は4.5:1以上、大きな文字は3:1以上にすることが求められています。袋文字では、背景と接しているのは縁の線なので、縁の色と背景の差を見ます。

たとえば2番目の見本は、白い文字を白い背景に置いていますが、縁の #0369A1 と白の差は約5.9:1あるので、形がはっきり分かります。4番目の背景のいちばん明るい黄色 #FDE68A と白い文字の差は約1.25:1で、縁と影がなければ、白い文字は背景に溶けてしまいます。

中が抜けた文字は、大事な言葉に使わない

中が抜けた文字は、細い線だけで形を見せています。この記事の見本の青 #0284C7 と白の差は約4.1:1で、大きな文字の基準（3:1）は満たしますが、線が細いぶん、ふつうの文字より読みにくく感じる人がいます。電話番号やボタンの言葉など、読めないと困る場所には使いません。

文字のままなので、読み上げと検索にそのまま届く

画像で作った袋文字は、画像の説明（alt）を書かないと、画面の読み上げソフトに中身が伝わりません。CSSの縁取りは文字のままなので、読み上げにも検索エンジンにも、そのまま文字として届きます。翻訳の機能や、文字の拡大にもついていきます。

スマホでは、縁も一緒に小さくする

スマホで文字を小さくしたとき、縁の太さがそのままだと、縁ばかりが目立ちます。見本では、文字の大きさだけを小さくしています。縁を太めにしている場合は、@media (max-width: 600px) の中で、-webkit-text-stroke の太さも一緒に小さくします。

袋文字は、目立たせる力が強いぶん、使う場所を間違えるとページ全体が騒がしくなります。
「この文字は、写真や柄の上にあるか」「短い言葉か」を先に確かめてから使います。

AIに頼むなら

同じような文字は、Claudeなどの生成AIに頼んでもすぐ作れます。そのときは、見た目だけでなく、置き場所・数値・配慮まで伝えると、直す回数が減ります。

写真の上に置く見出しを、白い文字＋紺の縁の袋文字にしたい。HTMLとCSSだけで。
縁は -webkit-text-stroke で8px、paint-order: stroke fill で外側だけに見せて。
スマホ幅（600px以下）では文字と縁を小さくして。画像にはしないで。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

paint-order が入っているか。入っていないと、縁が文字の中に食い込み、太い縁ほど文字がやせます
中を透明にする指定が、対応を確かめる書き方（@supports）の中にあるか。外にあると、縁取りが使えない環境で文字が消えます
スマホの幅で、縁どうしがくっついていないか。画数の多い漢字ほどつぶれやすいので、実際の言葉で確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

写真の上に文字を置くメインビジュアルには「写真の上でも読める白文字」。写真のどこに文字がかかっても読めるよう、細い縁と、ぼかした影を足します
キャンペーンやセールの短い見出しには「袋文字」か「縁＋ずらした影」。ページの中で1か所だけにします
背景に大きく薄く敷く英字の飾りには「中が抜けた文字」。読ませる文字ではなく、模様として使います

使わない場面

本文や、16px前後の小さな文字。縁が文字のすき間を埋めて、かえって読みにくくなります
落ち着いた印象にしたい会社案内や、士業・医療のサイトの見出し。袋文字はにぎやかな印象が強く、伝えたい雰囲気とずれます
縁取りした文字を、画像にして書き出すこと。文字のままなら、書きかえ・読み上げ・検索のどれにも困りません

KAKERUなら、袋文字はまず「写真の上の文字を読めるようにする道具」として考えます。
飾りとして使うのは、イベントやセールのページのように、にぎやかさが合う場所だけです。

Illustratorで縁取りを付ける方法は、別の記事「イラストレーターで文字に縁取りをつける」にまとめています。印刷物とWEBで同じ見出しを作るときは、あわせてどうぞ。

まとめ

文字の縁取り・袋文字は、CSSだけで作れる。画像にしないので、言葉の書きかえも簡単
-webkit-text-stroke の線は、文字の輪郭の真ん中に引かれる。太くすると文字に食い込む
paint-order: stroke fill を足すと、縁が外側だけに見え、太くしても文字がやせない
中を透明にするときは @supports で囲み、縁取りが使えない環境で文字が消えないようにする
読みやすさは、縁の色と背景の差で確かめる。本文や小さな文字には使わない

まずは「袋文字」のコードをコピーして、paint-order の1行を消したり戻したりしてみてください。縁の見え方が変わるのが分かります。

参考にした資料

いずれも2026年10月10日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。コントラスト比は、WCAGの計算式で計算した値です。

MDN「-webkit-text-stroke」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-stroke
※文字の縁の太さと色の指定、ブラウザの対応状況
MDN「-webkit-text-fill-color」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-fill-color
※文字の塗りの色の指定、対応状況
MDN「paint-order」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/paint-order
※塗りと縁を描く順番、HTMLの文字では塗りと縁の順番だけ変えられること、対応状況
MDN「text-shadow」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-shadow
※影の書き方、影を複数書いたときの重なり順、対応状況
MDN「@supports」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports
※ブラウザが対応しているときだけ指定を効かせる書き方
MDN「色のコントラスト」
https://developer.mozilla.org/ja/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast
※文字は4.5:1、大きな文字は3:1

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事【初心者向け】イラストレーターで文字に縁取りをつける

2019.07.10

グラデーションの文字をCSSだけでコピペで使える5種類と、読みやすさを守る使い方

2026.10.08

下線が伸びるリンクをCSSだけでコピペで使える5種類と、文章の中のリンクの注意点

2026.10.09

文字の縁取り・袋文字をCSSだけで｜コピペで使える5種類と、太くしてもやせない書き方

完成見本：縁取り・袋文字5種類

コピペ用のコード

1. 中が抜けた文字

2. 袋文字（外側に縁）

3. 縁＋ずらした影

4. 写真の上でも読める白文字

5. 影を重ねて作る縁

仕組み：縁の線は「文字の輪郭の真ん中」に引かれる

-webkit-text-stroke で、文字に縁の線を描く

paint-order で、縁を「文字の後ろ」に回す

-webkit-text-fill-color で、文字の中を透明にする

text-shadow を重ねると、影が縁に見える

数値を変えるとどうなるか

縁の太さ

paint-order の、あり・なし

影で作る縁と、縁取りの指定

中が抜けた文字は、線の太さと文字の大きさで決まる

スマホと、見る人への配慮

読みやすさは「縁の色」と背景の差で決まる

中が抜けた文字は、大事な言葉に使わない

文字のままなので、読み上げと検索にそのまま届く

スマホでは、縁も一緒に小さくする

AIに頼むなら

KAKERUならこう使う／使わない

使う場面

使わない場面

まとめ

参考にした資料

関連記事

コメントを残すコメントをキャンセル

「あの資料、どこ？」が、なくなる。

カタログを”読むだけ”で終わらせない。

いつものコピペをもっと自由に。

人気記事

オススメリンク

完成見本：縁取り・袋文字5種類

コピペ用のコード

1. 中が抜けた文字

2. 袋文字（外側に縁）

3. 縁＋ずらした影

4. 写真の上でも読める白文字

5. 影を重ねて作る縁

仕組み：縁の線は「文字の輪郭の真ん中」に引かれる

-webkit-text-stroke で、文字に縁の線を描く

paint-order で、縁を「文字の後ろ」に回す

-webkit-text-fill-color で、文字の中を透明にする

text-shadow を重ねると、影が縁に見える

数値を変えるとどうなるか

縁の太さ

paint-order の、あり・なし

影で作る縁と、縁取りの指定

中が抜けた文字は、線の太さと文字の大きさで決まる

スマホと、見る人への配慮

読みやすさは「縁の色」と背景の差で決まる

中が抜けた文字は、大事な言葉に使わない

文字のままなので、読み上げと検索にそのまま届く

スマホでは、縁も一緒に小さくする

AIに頼むなら

KAKERUならこう使う／使わない

使う場面

使わない場面

まとめ

参考にした資料

関連記事

コメントを残す コメントをキャンセル

「あの資料、どこ？」が、なくなる。

カタログを”読むだけ”で終わらせない。

いつものコピペをもっと自由に。

人気記事

オススメリンク

コメントを残すコメントをキャンセル