問題 × 解決策

text-shadowでテキストを縁取りする

問題

テキストを縁取りしたい。

解決策

text-shadowをぼかしなしで重複で設定する。

 

テキストの視認性を上げる。

テキストの後ろに背景画像などを置いている場合、見にくくなってしまいます。
しかしテキストに背景色を設定するのも不格好…。
そんな時のためにテキストを縁取りする方法をご紹介します。

DEMOはこちら

テキストが縁取りされます。

HTMLの構築

pタグを用意します。

  • 便宜上、クラス「hemming」を設定しています。
<p class="hemming">テキストが縁取りされます。</p>

CSSの構築

クラス「hemming」に対し、CSSを設定します。

.hemming {
	color:#ffffff;
	text-shadow: 1px 1px 1px #F15A24,-1px 1px 1px #F15A24,1px -1px 1px #F15A24,-1px -1px 1px #F15A24;
}

ポイント!

text-shadowはカンマ(,)で区切ることで、重複で設定することができます。

参考

【IEでもキレイ!ブラウザ上でアウトライン(縁取り)を表現する方法 | 東京上野のWeb制作会社LIG】
https://liginc.co.jp/web/html-css/css/70065

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 + 13 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧