0

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

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

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

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

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

DEMO

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

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

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

私は天才になれない。

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

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




CSSでテキスト装飾

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

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

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

1.赤い下線の場合

赤い下線の場合

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

青いダッシュ線の場合

3.黄色の点線の場合

黄色の点線の場合

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

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

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

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

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

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

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

蛍光ペンでマークしたような感じにしたい場合(黄色)

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

蛍光ペンでマークしたような感じにしたい場合(ピンクで赤文字)

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

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

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

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

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

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

 

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

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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