CSSで蛍光ペンっぽい下線を作る方法

CSSで蛍光マーカーを引いたような処理






ブログ記事などでよく見かける、蛍光ペンっぽい下線処理。実はたった数行のシンプルなCSSで、初心者でも簡単に作れてしまうので紹介したいと思います。

蛍光ペンっぽいCSSを作る

CSSをコピペするだけで蛍光ペンっぽい処理はできるのですが、CSS初心者さんのために順を追って説明していきたいと思います。

マーカーのデフォルトCSS

まずは、要素の背景色に色を設定します。サンプルでは便宜上、黄色を指定しています。
現状はマーカーで引いた下線のようには見えないですが、とりあえずは気にしないでください。

黄色いマーカーサンプル

黄色マーカーのCSSをカスタマイズ

次に、もう少しマーカーっぽい雰囲気を出すために、CSSのlinear-gradientを使ってスタイリングします。

linear-gradientは元々グラデーションを描画するCSSですが、グラデーションの開始位置から50%までを透明色、残りの50%を黄色という指定にすることで、境界のぼかし部分が無くなりマーカーのような表現になります。

黄色いマーカーサンプル

マーカーを付けたい箇所にクラスを指定する

スタイリングができたら、マーカー処理をしたい部分を<span>で囲みクラス属性を指定します。

最後はマーカー処理をしたい部分にクラス属性をつけますよ。

これでマーカーっぽい下線の処理は完成です。
<span>でマーカーをつけたい箇所だけ囲めばよいので、文章内の一部分や単語だけに処理をすることも手軽にできます。

サイトのデザインや文字の大きさなどによって処理の強弱を変えたい場合もあるので、以下ではマーカーの太さや色の変更などのカスタマイズについて説明していきます。

記事を書いている時に、その都度<span>で囲ってクラス名を指定するのはかなり面倒なので、WordPressを使用している方はAddQuicktagというプラグインを使用してショートコード化しておくことをオススメいたします。

マーカーの太さを変更する

linear-gradientの開始位置と終了位置を変更すればマーカーの太さが変更できます。


細めののマーカーサンプル

カラーバリエーションを作る

もちろんlinear-gradientの色を変更すれば、いろんなカラーバリエーションが作れます。

ピンクのマーカーサンプル

ブルーのマーカーサンプル

グリーンのマーカーサンプル

まとめ

数行で簡単に作れるマーカーっぽい処理の作り方を紹介しました。
普通のサイトではあまり使わないかもですが、知っていて損はありません。

記事内でも書きましたが、WordPressでブログを書く際に使用する場合はショートコード化してしまうことをオススメします。
その都度記述するのは面倒だし、そもそもクラス名を忘れてしまいます…(泣)

「CSSで蛍光マーカーっぽい下線を作る方法」でした。

CSSで作るストライプ

縦・横・斜めも自由自在!CSSで作るストライプは意外とカンタン!

2018年12月25日






CSSで蛍光マーカーを引いたような処理