ページの先頭へ
トップに戻る
2017年1月24日 Web制作

【CSS】蛍光ペンでマーカーを引いたようなテキストを表現する方法

テキストの下半分のみに背景色を付けるCSSの紹介です。主に強調タグ(strong)に使われているポピュラーな装飾ですね~。
使うのはグラデーションを指定するlinear-gradientだけなので、記述するコードはたったの1行!
2つある60%の部分を大きい数値にすればするほど線が細くなりますが、個人的にはこのくらいがちょうど良いかなーと。 色も自由に決められますが、あまり濃い色を使うとテキストが読みにくくなるので注意が必要です。

それではいくつかサンプルを用意しましたので、色選びの参考にどうぞ。
サンプルテキスト(#EF9A9A)
サンプルテキスト(#CE93D8)
サンプルテキスト(#9FA8DA)
サンプルテキスト(#81D4FA)
サンプルテキスト(#80CBC4)
サンプルテキスト(#C5E1A5)
サンプルテキスト(#FFF59D)
サンプルテキスト(#FFCC80)

あとがき

実装が超簡単な上に視覚効果も抜群なので、ブログにちょっとしたアクセントを加えたい人は是非使ってみてください!
ただ、色の選定に注意するのと多用しすぎると逆に読みにくいというのをお忘れなく。