• HOME > 
  • CSS > 
  • CSSで蛍光ペン風のマーカー線を引く方法【初心者にもわかりや...

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

投稿日:

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

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年01月15日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

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

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

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

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

マーカー線の効果

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

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

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

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

CSSの記述方法

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

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

text-decorationによる下線

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

マーカーで引いたような装飾を行うためには、「background」プロパティを利用します。

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

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

CSS

.sample span{
    background:#df2353;
}

HTML

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

プレビュー

backgroundによるマーカー線

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

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

CSS

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

HTML

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

プレビュー

backgroundによるマーカー線2

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

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

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

まとめ

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

広告
広告

関連する記事

サムネイル

【SCSS入門】@extendでスタイルを継承させる方法

2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】@mixinでスタイルのまとまりを再利用する

2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】入れ子(ネスト)の使い方【アンパサンド】

2025年09月01日
最終更新日:2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】SCSSにおける変数の使い方【グローバルスコ……

2025年09月01日
最終更新日:2025年09月02日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

【SCSS入門】VSCodeの拡張機能で即時コンパイルする方……

2025年09月01日
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つま […]
サムネイル

CSSのbackground-clipによるテキスト装飾【切……

2025年03月06日
background-clipプロパティを活用して文字の形に画像を切り抜いたり、文字にグラデーションを掛ける方法について備忘録としてまとめます。 backgro […]
サムネイル

CSS内で独自の変数を定義・参照する方法【カスタムプロパティ……

2025年02月06日
今更ながらCSSで変数を使えることを知ったので、今回はカスタムプロパティの使い方について備忘録としてまとめてみます。 CSSのカスタムプロパティとは? CSSの […]