【CSS】テキストに重ねるマーカーペンで引いたような下線をつける方法

6月 6, 2022 6月 6, 2022

こた

こんにちは！静岡県浜松市でホームページ制作をしているフリーランスWEBデザイナーのこたです。

皆さんWeb制作をしているときに重要なテキストや強調したいテキストにマーカー線を引きたいときはありませんか？

マーカーを引きたいけど、「border-bottom」だとなんかうまくいかない。。

そんな経験はありませんか？

マーカーペンは学校の授業でノートに引いたことがあるように、重要な文にはマーカーを引くという文化があります。

今回はCSSでテキストにマーカーペンで引いたような下線をつける方法をご紹介します。

CSSでマーカーペンを引く

テキストに重ねるマーカーペンの下線は「border-bottom」プロパティで引くことができません。

「border-bottom」を引くと、テキストの真下に引かれてしまうため、テキストに重ねたようなマーカー線は引けません。

そこで、背景にグラデーションを適用する「linear-gradient」を使用します！

「linear-gradient」の値を工夫することで、下線のような表現をすることが可能です。

サンプルでは<strong>タグで囲まれたテキストを、太い下線を引いて目立たせるようにしています。

太い下線を引きたいときは「linear-gradient」に次のような設定をします。

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

background:linear-gradient(①transparent 50%, ②#fafa00 ③50%, ④#fafa00  ⑤100%);

「linear-gradient」には3つの値を指定します。

それぞれ「開始色」「中間色」「終了色」になります。

太い下線を引く場合、線の色は②と④に設定します。

開始色の「transparent」は透明を指定します。

また、線の太さを変えたいときは①と③の値を変更します。ただし、①と③には同じ値を指定し、⑤の「100％」は変えないようにしましょう。

マーカーペンの配色例

赤いマーカー

サンプルテキスト

background:linear-gradient(transparent 50%,#fafa00 50%,#fafa00 100%);

青いマーカー

サンプルテキスト

background:linear-gradient(transparent 50%,#fafa00 50%,#fafa00 100%);

ホバーに合わせてマーカーCSSをつける

次に応用で「ホバーに合わせてマーカー線を引く」方法についてご紹介します。

まず、「background-size: 0 50%; 」でマーカーを見えないようにします。

ホバーした段階で「background-size: 100% 50%;」に変化させて、マーカー線を見せるようにします。

See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

/* アニメーション前のスタイル */
.marker {
  position: relative;
  background-image: linear-gradient(90deg, #fafa00, #fafa00);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 50%; /* '50%'の部分にマーカーの太さを記入 */
  transition: all 1s ease-in-out; /* マーカーを引く速度を調整 */
  font-weight: bold;
}

/* アニメーション発火時 */
.marker:hover {
  background-size: 100% 50%; /* '50%'の部分は上で設定した太さに合わせる */
}