• CSS

CSSで蛍光ペン風のマーカー線を引く方法【初心者にもわかりやすく解説】

投稿日:2022年01月15日（最終更新日:2022年02月12日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

蛍光ペン風マーカー線とは？

「印刷物の重要な箇所に対して、蛍光ペンで線を引いて見やすく強調する」

これと同じことをWEBサイト上でもできれば、読み手によりわかりやすく文章を伝えることができます。

このページでは、CSSを使って蛍光ペンでマーカーを引いたような文字装飾を表現する方法を説明します。

マーカー線の効果

私たちは教科書など紙での印刷物において蛍光ペンでマーカーを引いた箇所は重要であるという下地が刷り込まれています。

他にもテキスト装飾の方法はいくつもありますが、印刷物で慣れ親しんだマーカー線を使うことで、WEBサイト上でも重要な箇所や強調したい箇所をわかりやすく印象付けることができます。

しかしページ内でやたらと使いすぎると見づらくなり逆効果になってしまいます

重要度を意識してマーカー線を引くようにしてください。

CSSの記述方法

テキストに線を引くというと、「text-decoration」プロパティが思い浮かぶと思います。

確かにtext-decorationでもアンダーラインは引けます

今回実現したい蛍光ペン風マーカー線とは少しイメージが異なります。

backgroundを使用してマーカー線を引く

文字全体にマーカーを引きたい場合は、対象の文字をspanで囲みbackgroundプロパティで好きな色を指定します。

.sample span{
    background:#df2353;
}

<p class="sample"><span>background</span>による蛍光ペン風マーカー線</p>

プレビュー

少し下にずらしたマーカー線を引く

アンダーラインとの中間のような、文字の下の部分にだけかかるようなマーカー線も表現可能です。

.sample span{
    background:linear-gradient(transparent 50%, #df2353 50%);
}

<p class="sample"><span>background</span>による蛍光ペン風マーカー線</p>

プレビュー

マーカー線の幅は「％」の数値によって任意に変更できます。

「linear-gradient」を指定するとbackgroundを複数の色でグラデーション化できます。

これを利用して文字の一部分は透明になるようにしてマーカー線を表現しています。

まとめ

とても簡単に利用できますので、文字装飾のアイデアの一つとして活用してみて下さい。