CSSで袋文字を作成する方法 — -webkit-text-strokeの解説

袋文字（ふくろもじ）は、文字を視認性の高いデザインにするための装飾技法です。通常、文字に縁取りを加えることで、文字が背景に埋もれず、強調された印象を与えます。
この記事では、-webkit-text-strokeプロパティを使用して、袋文字をHTMLとCSSで作成する方法を解説します。

完成したハートの構造

このサンプルコードでは、「袋もじ」という文字に黒色の縁取りを施し、白い文字が浮き上がって見えるようにしています。

HTML & CSSコード

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.hukuro {
  color: #fff;
  -webkit-text-stroke: 5px #F8B62D;
  paint-order: stroke;
  font-size: 30px;
  padding: 0 20px;
}
</style>
<div class="container">
  <div class="hukuro">袋もじ</div>
</div>

各プロパティの解説

1. .container

containerクラスは、文字を表示する親要素に対してflexboxを使ってレイアウトを制御しています。

• display: flex;
  要素をフレックスコンテナに変換し、子要素の配置を柔軟に制御します。
• justify-content: flex-start;
  子要素を水平方向で左揃えにします。
• align-items: center;
  子要素を垂直方向で中央に揃えます。
• overflow: hidden;
  親要素をはみ出すコンテンツを非表示にします。

2. .hukuro

hukuroクラスが袋文字のデザインを実現する部分です。

• color: #fff;
  文字の色を白に設定します。
• -webkit-text-stroke: 14px #000;
-webkit-text-strokeは、文字の輪郭を描画するためのプロパティです。ここでは、14pxの太さで黒い縁取りをしています。ポイント：
  このプロパティはWebKitエンジンを使用するブラウザ（Chrome、Safariなど）でサポートされています。-webkit-プレフィックスがついているため、他のブラウザでは表示されない可能性があります。
• paint-order: stroke;
paint-orderプロパティは、テキストの描画順序を指定します。strokeを最初に指定することで、縁取りを先に描画し、文字本体がその上に重ならないようにします。

応用アイデア

この袋文字デザインは以下のようなシーンで活用できます。

• 見出しデザインの強調
• サイトロゴの装飾
• 広告やポップアップでのインパクトある文字表示

まとめ

このコードを使用することで、CSSだけでシンプルかつきれいなハート形を描画することができます。::beforeと::afterの疑似要素を活用することで、わずかなコードで高度な形状を作成することができるのが魅力です。