HTML･CSSで蛍光ペンのようなアンダーラインマーカーを引く方法

他の方のブログを見ていると、きれいなラインが目につきます。蛍光ペンでアンダーラインを書いたような、あれです！　あれをやってみたい！　ということでチャレンジしてみました。

この記事はライブドアブログ時代に書いたものです。今はWordPressでピピッとクリックするだけで勝手にマーカー装飾してくれるのでこれは使っていません。無料ブログで自分で実装したい！CSSを学びたい！という人はぜひ読んでください。

HTMLの書き方

①　クラス名です。任意のわかりやすい名前にしましょう。
②　太字にしたいときは「strong」、そうでないときは「span」にします。

CSSの書き方

①　クラス名です。HTMLのクラス名と同名にしてリンクさせます。
③　マーカーの太さです。
注）０％が一番太いです。50％で半分の太さ。
➃　マーカーの色です。カラーピッカーなどで選ぶと選びやすいです。
その後の数字はグラデーションの設定です。

表示例

実際にこの設定でマーカーをつけると、こんな感じになります。（strong）

いい感じですね！　色や太さを変えてCSSに登録しておくと、HTML上でクラス名を変更するだけでマーカーの色や太さなどの種類を変えることができます。