文字に色を付けたり、大きくしたり、飾りをつけたりして、抑揚やアクセントをつけると読みやすくなりますよね！

私は、長文が苦手な方です。
苦手なだけに、私と同じような気持ちの人に、ストレスなく読んでもらえるように、日々コソコソと考えています。

ということで、今回は、アクセント代わりに蛍光ペンで線を引いたような効果を中心に文字周りで使えそうなコードをメモっていきたいと思います。

See the Pen ラインマーカー by webfeelfree (@webfeelfree) on CodePen.4259

文字と同じ色の下線を引く

HTML

<p>【demo1】<span class="demo1">文字と同じ色で線を引く</span></p>

CSS

.demo1{
  text-decoration: underline;
}

よくリンク部分で見られる組み合わせですね。
文字の色と同じ色の下線が引かれます。

普通の文字に使用する場合、リンクと混同されないように注意が必要です。

文字と違う色の線を引く

HTML

<p>【demo2】<span class="demo2">文字と別の色で下線を引く</span></p>

CSS

.demo2{
  border-bottom: 1px solid #f00;
}

下線の太さや色、破線とか二重線などの線種をカスタマイズできます。
線種のバリエーションが増えることにより、よりリッチに表現することができます。

「下線＝リンク」と思う人が多い気もするので、こちらもできれば普通の文字ではなく、リンクで使うことを私的に推奨します。

蛍光ペンの効果

HTML

<p>【demo3】<span class="demo3">文字に合わせて蛍光ペン</span>で引いた</p>

CSS

.demo3{
  background: #ff0;
}

文字の幅に合わせて蛍光ペンを引いた効果になります。
基本の形ですね。
文字の背景に色を設定しています。

太い蛍光ペンの効果

HTML

<p>【demo4】<span class="demo4">太い蛍光ペン</span>で引いた</p>

CSS

.demo4{
  background-color: #ff0;
  padding-top: 5px;
  padding-bottom: 5px;
}

今度は、幅広の太い蛍光ペンで線を引いたような効果を出しています。

padding属性を使って上下に余白を取っています。
単位を「px」で指定しましたが、「em」で指定する方が一般的のようです、こちらは、お好みで。

蛍光ペンラインが他の行と被ってしまう場合は、line-height属性を使って、全体の行間を見直しましょう。

細い蛍光ペンの効果

HTML

<p>【demo5】<span class="demo5">細い蛍光ペン</span>で引いた</p>

CSS

.demo5 {
  background: linear-gradient(transparent 60%, #ff0 0%);
}

CSS3のlinear-gradient属性を使います。
もともとグラデーションを設定するコードですが、グラデーションの透明色を利用して線を引きます。

linear-gradient属性は、なかなか難しいコードなので必要最小限の説明にとどめておきます。

linear-gradient(transparent 線の太さ, 線の色 0%)

「線の太さ」は、値が小さくするほど太くなります。
今回は、60%と設定していますが、40%に設定するともっと太くなります。

最後の0%の部分は、線の太さの数値（%）を超えないように設定しましょう。

CSS3なので、対応していないブラウには、画像背景で対応するか、demo3などで代替する必要があります。

デモ

See the Pen ラインマーカー by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

簡単に実装できて、非常に効果のあるコードではないでしょうか？
使い過ぎると逆に見えづらくもなってしまうので注意が必要です。

効果的に利用して、より見やすい文章でストレスフリーなブログを目指したいと思います。

参考
テキスト周りで使えるCSSの小技いろいろ | Webクリエイターボックス