Webサイト上で文字を目立たせる方法の1つに縁取り文字があり、現在はCSSでもある程度のデザインを再現できるようになってきています。
今回は縁取り文字を作成する方法を2つ解説していきますが、どの程度表現できるのかを含め適切な方法を選択していただければと思っています。
CSSで縁取り文字を作成する2つの方法
CSSで縁取り文字を作成する方法としてtext-strokeプロパティを使用する方法と、text-shadowプロパティを使用する方法があります。それぞれのプロパティについては以下の通りです。
text-strokeプロパティ
テキスト文字の輪郭線の幅と色を指定するプロパティです。
text-strokeプロパティは、線の幅を指定する「text-stroke-width」と線の色を指定する「text-stroke-color」のショートハンドとなっています。
text-shadowプロパティ
テキストに影(シャドウ)を指定するプロパティです。
x軸・y軸・色を指定する事ができ、カンマ区切りで複数の値を指定する事が可能です。
上記のようにCSSで縁取り文字を作成する方法として2つの方法があります。次項ではそれそれの方法について解説していきますが、共通で使用するHTMLは以下となります。
<p>cdg-bloj.jp</p>
<p>あいうえお</p>
<p>縁取り文字</p>text-strokeプロパティを使用する方法
まずは、text-strokeプロパティを使用する方法です。今回指定するCSSは以下となります。
p {
color: #FFF;
-webkit-text-stroke: 1px black;
text-stroke: 1px black;
}colorプロパティで文字色を指定し、縁取る線の太さと色をtext-strokeプロパティで指定します。
これらのCSSを指定した場合以下のようになります。
cdg-bloj.jp
あいうえお
縁取り文字
上記のように文字が縁取りされていますが、文字サイズが小さかったり、線が太い場合には文字が潰れて見えてしまいますので注意してください。
また、CSSのベンダープレフィックス「-webkit-text-stroke」の指定は必須となりますので注意してください。
その他、IEなど旧ブラウザには対応しておりません。text-strokeプロパティの対応状況はこちら(Can I Use)で確認できます。
今回はかなりキレイに縁取られていますが、フォントによって文字の繋ぎ目が被ってしまい不自然な形になる事があります。特にバリアブルフォントでその傾向が強いようです。その場合は次の方法をお試しください。
text-shadowプロパティを使用する方法
次に、text-shadowプロパティを使用する方法です。まずは以下のコードをご覧ください。
p {
color: #FFF;
text-shadow: 1px 1px 0 black, -1px -1px 0 black,
-1px 1px 0 black, 1px -1px 0 black,
1px 0 0 black, -1px 0 0 black,
0 1px 0 black, 0 -1px 0 black;
}text-shadowプロパティはカンマ区切りで複数の値を指定する事ができ、上記例ではそれぞれ8方向に影を指定しています。これらのCSSを指定した場合以下のようになります。
cdg-bloj.jp
あいうえお
縁取り文字
先程のtext-strokeプロパティとは違い文字が太く見えるかと思います。
text-strokeプロパティは文字輪郭の外側と内側の両方に線が付く為少し細く見えますが、text-shadowプロパティで今回指定したのは文字の外側になりますので違って見えます。
text-shadowプロパティで縁取る場合の注意点としては、線を太くすると以下のように線がギザギザしてしまいます。
cdg-bloj.jp
あいうえお
縁取り文字
こういった場合は影を少しぼかしてやるとキレイに見えるかと思いますので工夫してみてください。
text-shadowプロパティは主要ブラウザ全てで使用できます。対応状況はこちら(Can I Use)で確認できます。
さいごに
いかがでしたでしょうか。
今回は、CSSを使って縁取り文字を作成する2つの方法を解説しました。
これらで完全に表現できるわけではなく、場合によっては画像に置き換えが必要な場合もあります。表現の選択肢の一つとして覚えておけたらいいかなと思います。
