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
ディスカッション
コメント一覧
まだ、コメントがありません