ブログ記事などでよく見かける、蛍光ペンっぽい下線処理。実はたった数行のシンプルなCSSで、初心者でも簡単に作れてしまうので紹介したいと思います。
蛍光ペンっぽいCSSを作る
CSSをコピペするだけで蛍光ペンっぽい処理はできるのですが、CSS初心者さんのために順を追って説明していきたいと思います。
マーカーのデフォルトCSS
まずは、要素の背景色に色を設定します。サンプルでは便宜上、黄色を指定しています。
現状はマーカーで引いた下線のようには見えないですが、とりあえずは気にしないでください。
1 2 3 4 | .ymarker { background:#ffff7d; padding:0 2px; } |
黄色いマーカーサンプル
黄色マーカーのCSSをカスタマイズ
次に、もう少しマーカーっぽい雰囲気を出すために、CSSのlinear-gradientを使ってスタイリングします。
linear-gradientは元々グラデーションを描画するCSSですが、グラデーションの開始位置から50%までを透明色、残りの50%を黄色という指定にすることで、境界のぼかし部分が無くなりマーカーのような表現になります。
1 2 3 4 | .ymarker { padding: 0 2px; background: linear-gradient(transparent 50%, #ffff7d 50%); } |
黄色いマーカーサンプル
マーカーを付けたい箇所にクラスを指定する
スタイリングができたら、マーカー処理をしたい部分を<span>で囲みクラス属性を指定します。
1 2 3 | <p> 最後は<span class="ymarker">マーカー処理をしたい部分</span>にクラス属性をつけますよ。 </p> |
最後はマーカー処理をしたい部分にクラス属性をつけますよ。
これでマーカーっぽい下線の処理は完成です。
<span>でマーカーをつけたい箇所だけ囲めばよいので、文章内の一部分や単語だけに処理をすることも手軽にできます。
サイトのデザインや文字の大きさなどによって処理の強弱を変えたい場合もあるので、以下ではマーカーの太さや色の変更などのカスタマイズについて説明していきます。
マーカーの太さを変更する
linear-gradientの開始位置と終了位置を変更すればマーカーの太さが変更できます。
1 2 3 4 | .ymarker { padding: 0 2px; background: linear-gradient(transparent 90%, #ffff7d 10%); } |
細めののマーカーサンプル
カラーバリエーションを作る
もちろんlinear-gradientの色を変更すれば、いろんなカラーバリエーションが作れます。
1 2 3 4 | .ymarker { padding: 0 2px; background: linear-gradient(transparent 50%, #ffd7f7 50%); } |
ピンクのマーカーサンプル
1 2 3 4 | .ymarker { padding: 0 2px; background: linear-gradient(transparent 50%, #87d7ff 50%); } |
ブルーのマーカーサンプル
1 2 3 4 | .ymarker { padding: 0 2px; background: linear-gradient(transparent 50%, #90da7f 50%); } |
グリーンのマーカーサンプル
まとめ
数行で簡単に作れるマーカーっぽい処理の作り方を紹介しました。
普通のサイトではあまり使わないかもですが、知っていて損はありません。
記事内でも書きましたが、WordPressでブログを書く際に使用する場合はショートコード化してしまうことをオススメします。
その都度記述するのは面倒だし、そもそもクラス名を忘れてしまいます…（泣）
「CSSで蛍光マーカーっぽい下線を作る方法」でした。
