蛍光ペン風やアンダーラインなどのテキスト装飾をCSSで実現する

ブログ記事などでよく見かける、強調表現のひとつ「蛍光ペン」や「アンダーライン」。

ランディングページでもよく見かける手法ですが、背景に画像を使ってリピートさせたりすることで表現するやり方もありますが、今回はCSSのみでテキストの装飾をしてみたいと思います。

▼デモサンプルを用意しましたので、まずはそちらを確認してみてください。

DEMO

それでは見ていきましょう。

<storong>や<b>で強調した場合

まずは、デフォルトの<strong>タグと<b>タグを確認しておきます。通常は下のような表示になりますね。

私は天才になれない。

 

<strong>タグで囲った「天才」という文字だけ、太文字で強調されます。

CSSでテキスト装飾

さて、ここからは強調したい部分を<span>タグで囲い、その<span>要素にCSSで装飾していきます。

▼まずはHTMLを確認しておきます。

これをベースに「任意のクラス名」に対して、CSSを記述していきます。ちなみに強調したい箇所（ここでは<span>タグ）に「margin:0 5px;」程度のマージンをかけておくと文字が詰まった感じが解消されます。

1.赤い下線の場合

2.青いダッシュ線の場合

3.黄色の点線の場合

4.背景に黄色のマーカー線を入れるの場合

5.背景に黄色のマーカー線を入れて赤文字にする場合

6.背景に灰色のマーカー線と赤い下線を入れて赤文字にする場合

7.蛍光ペンでマークしたような感じにしたい場合（黄色）

8.蛍光ペンでマークしたような感じにしたい場合（ピンクで赤文字）

9.赤い下線で文字を大きくする場合

10.背景に黄色のマーカー線を入れて赤文字にして文字を大きくする場

11.赤い下線を入れて影を入れる場合

 

いかがでしょうか？ちょっとしたCSSの記述だけで簡単に装飾ができるものですね。手間もかからないので是非取り入れてみてください。