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

ヘッドラインなどを、アウトラインで縁取りするとポップでオシャレに見えます。
また、画像などの上に文字を配置する場合、その文字の視認性をあげる役割も果たします。

デザイン性をあげる、アクセシビリティをあげるために覚えておくと便利な、文字をアウトラインで装飾する方法を紹介します。

-webkit-text-stroke

対応状況や注意点

対応ブラウザはCan I Use…から確認できます。

Can I Use…によると、 Firefox や Edge ブラウザで使用する場合も、chrome や safari 同様に-webkit-text-stroke-のプレフィックスをつける必要があります。

また、プレフィックスを付けないtext-strokeではどのブラウザでも反映されないようです。必ずプレフィックスを付けた -webkit-text-strokeを使用しましょう。

MDN web docs

-webkit-text-strokeは標準ではなく、標準化される予定はありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

MDN web docs -webkit-text-stroke

実装方法

実装はいたって簡単です。

HTML
<p class="outline">文字をアウトラインで装飾</p>

CSS
.outline{ -webkit-text-stroke: 1px yellow; }

実装結果

文字をアウトラインで装飾

上記文字がアウトラインで装飾されているのではないでしょうか。

-webkit-text-strokeでは、文字の内側にアウトラインを加えます。
サイズの小さい文字にこのcssを適用すると、文字が潰れてしまうので気をつける必要がありますが、簡単に文字をアウトラインで装飾できて便利です。

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

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

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

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

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

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

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

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