CSSで、文字の影付けを利用して文字にアウトラインをつける方法

以前、css で文字にアウトラインをつける方法を紹介しました。
-webkit-text-strokeを利用する方法なのですが、これは、標準化された方法ではないため、将来は振る舞いを変える可能性があります。

そこで、今回は text-shadow を利用して文字にアウトラインをつけてみます。

text-shadow

通常、text-shadow は、文字に影をつけることを目的としていますが、これをうまく活用すれば文字にアウトラインをつけることができます。

対応状況

Can I Use… によると text-shadow はほとんど全てのブラウザで使用できます。

実装方法

text-shadow は下記のように記述できます。

text-shadow: {x}px {y}px {blurRadius}px {color}

x: x方向のオフセット
y: y方向のオフセット
blurRadius: 影のぼかし量
color: 色コード

さらに、下記のように複数の影をつけることができます。

text-shadow: {x1}px {y1}px {blurRadius1}px {color1},
             {x2}px {y2}px {blurRadius2}px {color2},
             {x3}px {y3}px {blurRadius3}px {color3},
             {x4}px {y4}px {blurRadius4}px {color4},
             ....

この、複数の影を付けることができる点を利用して文字にアウトラインを付けます。

HTML

<p class="outline">文字にアウトラインをつけます</p>

CSS

p.outline{
  text-shadow:  1px  0px 0 black, 
          0px  1px 0 black,
         -1px  0px 0 black,
                0px -1px 0 black,
}

文字に対して4つの影を付けます。
その影はぼかしを 0 を指定し、ソリッドな影にします。
さらに、影を4方向にオフセットさせることで、文字にアウトラインがついているように見せています。

実装結果

アウトライン
アウトラインを付けます。
アウトラインを付けます。

文字の外側にアウトラインが引かれるので、文字サイズが小さくても文字が潰れずにアウトラインをつけることができます。

cssだけで文字をアウトラインで縁取りをする方法

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。