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

170323_seven_08

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

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

ジャンプできる目次

HTMLの書き方

HTMLの書き方

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

CSSの書き方

CSSの書き方

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

表示例

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

ジャンプできる目次
閉じる