すべてのカテゴリ

今回はテキストの縁取りです。デザインカンプにこんな縁取りのデザインがありました。結論から言えば、これをCSSのみで忠実に再現するのは困難でした。原因としては・縁取りの線が太めで、さらにくっきりしていることです。現在のCSSで縁取りができるプロパティは2種類あります。・text-strokeで縁取りをする。・text-shadowで影をつけていき、縁取りのように見せる。前者が圧倒的に簡単ですが、比較的新しめのプロパティで、対応ブラウザがまだ少なく、chromeでもベンダープレフィックスが必要なほどです。一つずつ解説していきます。⚫︎text-strokeで縁取りを行う場合こちらは非常に簡単で【HTML】<p>縁取り</p>【CSS】p {  -webkit-text-stroke: 2px #ff0000;  text-stroke: 2px #ff0000;}これだけで縁取りが完成します。縁取りのプロパティなだけあって、しっかり綺麗にできてます。境界線の前後に色をつけるようなので、あまり太くすると文字がつぶれていきますので注意が必要です。そういったこともあり、冒頭のような太めの縁取りは困難です。⚫︎text-shadowで縁取り風に影をつける場合基本的には影をつけるプロパティなので、結構CSSの量が多くなりますし、綺麗な表示にはならないので、ぼかさないと使えないかと思いました。【HTML】<p>縁取り</p>【CSS】p { text-shadow: 3px 3px 0px #ff0000, -3px -3px 0px #ff00