HTML | テキストを縁取り文字にする

HTML テキスト,HTML

HTML | テキストを縁取り文字にする

HTMLだけでテキストを縁取りデザイン(アウトライン文字、袋文字)にする方法とサンプルコードを紹介しています。

HTMLでテキストを縁取りにする

HTMLでテキストを改行するにはstyle属性にて「-webkit-text-stroke」プロパティで縁取りの色と太さを指定します。

サンプルでは縁取りの太さは「1px」を指定していますが、「em」など他の寸法での指定も可能です。

ベースのテキストの色と、ある程度の大きさを指定、太字にしておくと良い感じになります。

<p><span style="font-size: 40px; font-weight: bold; color: black; -webkit-text-stroke: 1px pink;">text-decoration:line-through</span></p>

text-decoration:line-through

より細かな指定をする場合は、やはりCSSでの指定のほうが楽になるかもしれません。
関連:CSS | text-strokeを使った縁取り文字のサンプル集 | ONE NOTES