CSS で蛍光ペン風の線を書く方法

CSS で蛍光ペン風の線を書く方法を紹介します。
例えば、テキストを強調したい時に蛍光ペンで線を引いたような表現をしたい時に便利な方法です。

1. CSS で蛍光ペン風の線を書く方法
2. 蛍光ペンの線の太さを変える方法

CSS で蛍光ペン風の線を書く方法

テキストを強調したい時に蛍光マーカーで線を引いたようにするには、グラデーションの指定で使われる CSS のプロパティ background: linear-gradient() を使います。
対象のテキストは inline 要素であることが必須。他の場合は適用範囲が異なるので注意が必要です。
ベースの HTML は次のように指定します。

<span class="hl-yellow">強調したいテキスト</span>

以下のような蛍光ペンで文字をなぞったようにするには、次のように CSS を指定します。

CSSを使って蛍光イエロー風表現

.hl-yellow {

  background: linear-gradient(transparent 35%, #ffff66 35%);

}

CSSを使って蛍光ピンク風表現

.hl-fuchsia {

  background: linear-gradient(transparent 35%, #FF82B2 35%);

}

CSSを使って蛍光オレンジ風表現

.hl-orange {

  background: linear-gradient(transparent 35%, #FF8856 35%);

}

CSSを使って蛍光グリーン風表現

.hl-lime {

  background: linear-gradient(transparent 35%, #2DFF57 35%);

}

CSSを使って蛍光水色風表現

.hl-aqua {

  background: linear-gradient(transparent 35%, #00ECFF 35%);

}

transparent は透明を指定しています。透明の位置を指定した後に色の指定をすることで、蛍光ペンで線を引いたような表現をしています。

蛍光ペンの線の太さを変える方法

蛍光ペンの線の太さを変えるときは、 CSS のプロパティ background: linear-gradient() のグラデーションの開始位置を調整します。
線を太くする場合はグラデーションの値を低くします。

蛍光ペンを太くする

.hl-fuchsia_futo {

  background: linear-gradient(transparent 10%, #FF82B2 10%);

}

逆に線を細くする場合は、グラデーションの値を高くします。

蛍光ペンを細くする

.hl-fuchsia_hoso {

  background: linear-gradient(transparent 85%, #FF82B2 85%);

}

まとめ

CSS で蛍光ペン風の線を書く方法を紹介しました。