ブログやホームページで文字だけがずらずらと並べられていると凄く読みづらいと感じることはありませんか？黒い文字以外に少し装飾が加わるだけでかなり読みやすいページへと変わります。
今回はCSSのみで簡単に導入できる蛍光ペン（マーカー）風のアンダーラインの作成方法について説明します。アンダーラインが加わるだけで強調したい箇所が一目で分かり非常に見やすいページへと変わります！
どんなものを作成できるの？
まずは、この記事で作成するサンプルをお見せします。
サンプル１（塗りつぶし）
特に重要な箇所に使用すると目立ってよさそうですね！
黄色のアンダーラインです。
青色のアンダーラインです。
緑色のアンダーラインです。
赤色のアンダーラインです。
ピンク色のアンダーラインです。
サンプル２（マーカー風）
個人的にこれがお気に入り！おしゃれでいい感じですね！
黄色のアンダーラインです。
青色のアンダーラインです。
緑色のアンダーラインです。
赤色のアンダーラインです。
ピンク色のアンダーラインです。
サンプル３（下線風）
派手なのは嫌だけど少しだけおしゃれに！っていう人にピッタリですね！
黄色のアンダーラインです。
青色のアンダーラインです。
緑色のアンダーラインです。
赤色のアンダーラインです。
ピンク色のアンダーラインです。
Advertisement実装方法
それでは、実装方法を説明します。まずは、HTMLの記述方法から！
HTML記述方法
HTMLには以下のように記述してください。「span id=”○○”」の○○の部分は各自でお好きな物に
<span id="StY">黄色のアンダーラインです。</span> <span id="StB">青色のアンダーラインです。</span> <span id="StG">緑色のアンダーラインです。</span> <span id="StR">赤色のアンダーラインです。</span> <span id="StP">ピンク色のアンダーラインです。</span>
CSS記述方法
サンプル１
サンプル１（塗りつぶし）のCSS
/*黄色のマーカー*/
#StY{background: linear-gradient(transparent 0%, #ffff66 0%);}
/*青色のマーカー*/
#StB{background: linear-gradient(transparent 0%, #66ccff 0%);}
/*緑色のマーカー*/
#StG{background: linear-gradient(transparent 0%, #66FFCC 0%);}
/*赤色のマーカー*/
#StR{background: linear-gradient(transparent 0%, #ff9494 0%);}
/*ピンク色のマーカー*/
#StP{background: linear-gradient(transparent 0%, #f0aeeb 0%);}
サンプル２
サンプル２（マーカー風）のCSS
/*黄色のマーカー*/
#StY{background: linear-gradient(transparent 40%, #ffff66 40%);}
/*青色のマーカー*/
#StB{background: linear-gradient(transparent 40%, #66ccff 40%);}
/*緑色のマーカー*/
#StG{background: linear-gradient(transparent 40%, #66FFCC 40%);}
/*赤色のマーカー*/
#StR{background: linear-gradient(transparent 40%, #ff9494 40%);}
/*ピンク色のマーカー*/
#StP{background: linear-gradient(transparent 40%, #f0aeeb 40%);}
サンプル３
サンプル３（下線風）のCSS
/*黄色のマーカー*/
#StY{background: linear-gradient(transparent 80%, #ffff66 80%);}
/*青色のマーカー*/
#StB{background: linear-gradient(transparent 80%, #66ccff 80%);}
/*緑色のマーカー*/
#StG{background: linear-gradient(transparent 80%, #66FFCC 80%);}
/*赤色のマーカー*/
#StR{background: linear-gradient(transparent 80%, #ff9494 80%);}
/*ピンク色のマーカー*/
#StP{background: linear-gradient(transparent 80%, #f0aeeb 80%);}
まとめ
初心者の方々へ！
HTMLとかCSS全く分からない！という方の為にほんとにコピペのみで使用できるように記述しておきます。
<span id="StY">アンダーラインしたい文章を入力</span>
<style type="text/css">
/*黄色のマーカー*/
/*上のCSS記述から好きなものをコピーして貼り付け*/
#StY{background: linear-gradient(transparent 0%, #ffff66 0%);}
</style>
まとめ
以上のように簡単にアンダーラインを表現することが可能です！ぜひやってみてくださいね。
ご質問がありましたら是非コメントしてください！
background: linear-gradient(transparent 好きな数字%, 好きなカラーコード 好きな数字%);
