[En][CSS]蛍光ペン風マーカーを表現するCSSで可読性アップでリッチなブログにしよう!

slooProImg_20150103000228.jpg

ブログなどで強調したい文章を装飾するのに太字を使うのも良いですが、蛍光ペン風のマーカーで表わすとちょっとおしゃれで見やすいので紹介します。

エンディ
お手軽なのに見た目がリッチになる蛍光ペン風マーカーです。
style.cssに追記するだけなのでぜひとも使ってみてください!

蛍光ペン風マーカーの作り方

蛍光ペン風マーカーは、簡単なCSSを記載するだけでOKです。

CSS

CSSにはlinear-gradient()関数を使います。

linear-gradient()関数は、色の線形グラデーションを表す画像を作ることができます。といっても難しいですよね・・・以下のような記載をすると、素敵な蛍光ペン風マーカーが使えるようになります!

この例だと、文字の高さに対して上から60%の領域を透明色で塗りつぶし、上から0%の領域を#xxxxxxで指定した色でグラデーションをかけるという記載になっているため、結果的に領域に対して下40%の領域を蛍光ペンで線を引いたような見た目で表現することができます。

transparent は、内部的に rgb(0, 0, 0, 0) の透明を表わすおまじないです。

HTML

実行結果

CSSを使えば女の子のサイトによさそうな赤いラインやこんな感じのさわやかな緑のライン青いラインも簡単に再現できます。

蛍光ペン風マーカーのメリット

このマーカーなら単純に文字を太くするよりも可読性にすぐれ、さらに色もつくのでリッチなサイトになります。

しかし、多用しすぎると逆に読みづらくなりますのでご注意ください。

おわりに

このような小技を使うと、少ない労力でリッチな見た目になりますので、積極的に取り入れていきましょう!