CSSでテキストに蛍光マーカーをひいて可読性をアップする方法！

記事内のテキストを強調して、可読性をアップしたい場合に便利な「蛍光マーカーでラインをひいたような」テキストにする場合に使うCSSです。
大昔にテスト勉強や参考書などに蛍光マーカーをひきまくってあたかも勉強したつもりになっていた時のことを思い出します。
適度に使うのなら可読性があがり、ユーザーの離脱率も低くなる可能性がありますが、逆に、わたしの「勉強したつもり」の参考書のように使いすぎにはご注意です。

CSSコードのサンプルです。

下記サンプルは当サイトで実際に使用しているものです。
font-wightで太字にし、font-sizeで文字を少し大きくし、蛍光マーカーを引いています。

.marker_pink {
      background: linear-gradient(transparent 60%, #f3def3 60%);
      font-weight: bold;
      font-size: 110%;
      color: #8C0C0C;
}

いろんな色をそろえたい。

今回の例では、ピンク色の蛍光マーカーにしたので、htmlのclass属性名をmarker_pinkとしました。
筆箱に何色もの蛍光マーカーをそろえておくように、CSSでいろんな色の蛍光マーカーをあらかじめ用意しておくこともできます。
marker_blueやmarker_yellowなどです。
色を変更したい場合は、#後の6桁の英数が色の指定になりますので、カラーチャートなどを参考にお好みで変えてください。

CSS例のちょっと説明。

backgroundがプロパティーになります。
transparentは値で透明化する場合に使います。
font-weightで文字を太字にしました。
font-sizeで文字を少し大きくしてみました。
colorで文字色も指定してみました。

html側での蛍光マーカー指定方法。

html側では、蛍光マーカーでラインを引きたいテキストをclass属性で指定します。

<span class="marker_pink">ここは蛍光マーカーをひきたいテキスト</span>

上記のようにCSSに記載して、htmlでクラスを指定すると「こんな感じに！！」なります。

まとめ

ページを開いた瞬間に大量のテキストが目に飛び込んで来たらそれだけで疲れてしまうことがあります。
蛍光マーカーでテキストに色をつけるだけで可読性が大幅にアップします。
でもやたらめったらに蛍光マーカーすると逆に可読性が悪くなりますのでご注意を。