【コピペあり】CSSで蛍光ペン風の下線を引く方法を簡単解説！

文章の一部を強調したい時、手書きのノートなどに蛍光ペンを使うことはありませんか。ブログなどでも強調したい文言を他のものとは違うをフォントサイズやカラーによって強調させることがあると思います。そんな文章を強調させるテクニックの中から今回はCSSを使ってWebページ内に蛍光ペンで下線を引き、文章の一部を強調させる方法を解説していきます。

結論：CSSで『linear-gradient』と『transparent』を組み合わせて指定する

蛍光ペン風の下線を引くには、『linear-gradient』と『transparent』を組み合わせて指定することによって、任意の太さの蛍光ペン風の下線を引くことが可能になります。今回はそれぞれの役割やコードの書き方について詳しく解説していきます。

準備：蛍光ペン風の下線を引くテキストを準備する

蛍光ペン風の下線はテキストにCSSを指定することで、引くことが可能になります。そのため、まずはテキストを用意しましょう。

<p>
    この文章に<span class="line-marker-yellow">蛍光ペン風の下線</span>を引いていきます。
</p>

今回は上記画像の文章を使い、『蛍光ペン風の下線』の部分にデザインを反映させていきます。

蛍光ペン風の下線を引くためのCSSを指定するために『蛍光ペン風の下線』の部分をspanタグで囲う必要があります。

spanタグについてはspanタグの意味、使い方を簡単解説で詳しく解説していますので、参考にしてみてください。

今回は先述したように蛍光ペン風の下線を引くためのCSSを指定するためにspanタグで囲う必要があるということだけ理解していただければ問題ありません。

それでは次から蛍光ペン風の下線を引くためのCSSについて解説していきます。

1：セレクタとしてspanタグ、プロパティとして『background』を指定する

蛍光ペン風の下線を引くためにまずはセレクタとしてspanタグ、プロパティとして『background』を指定しましょう。下記のコードを見てください。

.line-marker-yellow {
  background:;
}

今回はセレクタであるspanタグに『line-marker-yellow』のclass属性が指定されているので、セレクタとして『line-marker-yellow』を選びます。実際もspanタグにはclass属性を指定して使用しましょう。

次にプロパティとして『background』を指定します。プロパティとしての『background』はそのタグの背景を装飾するためのプロパティとなります。

ここで蛍光ペン風の下線のイメージができるといいでしょう。蛍光ペン風の下線は背景に任意の色を装飾することで、デザインすることができる方法になります。

そのイメージを持ちながら、次は『linear-gradient』と『transparent』を指定していきます。

2：値として『linear-gradient』と『transparent』を指定する

先述したコードに値として『linear-gradient』と『transparent』のコードを追記していきます。

.line-marker-yellow {
  background:linear-gradient(transparent 60%, #ff6 60%);
}

『linear-gradient』はグラデーションがかかったような下線デザインにしたい時に使用する値になります。これを使用することで、下線がかすれたようなデザインになり、より一層蛍光ペン風の下線を引くことが出来ます。

『transparent』は指定された要素を透明にするための値になります。これを使用することで、蛍光ペン風の下線を任意の太さに変えることが出来ます。『transparent』は0％だとどこも透明化されず、上部から徐々に透明化が適応され、100％で全てが透明化されます。

これら二つに色を追記することで蛍光ペン風の下線を引くことが可能になります。

『transparent』の値やカラーコードは任意のものですので、自分自身がしたいようなデザインを選択する必要がありますが、今回は私が実際に使用しているコードを紹介させていただきました。

また、これ以外にも

赤系の蛍光ペン風の下線の場合は

.line-marker-red {
    background:linear-gradient(transparent 60%, #ffb6c1 60%);
}

青系の蛍光ペン風の下線の場合は

.line-marker-blue {
    background:linear-gradient(transparent 60%, #99CCFF 60%);
}

を実際に使用しています。是非、試してみてください。

今回は蛍光ペン風の下線を引く方法を解説していきました。文章の一部を強調させるデザインとしては実際のサイトでも重宝される方法の一つです。初めはコピペをしながら使用していき、慣れてきてから自分の思い通りにカスタマイズをすることで、更にデザイン性に富んだサイトを制作してみてください。