カテゴリー
お問い合わせ

【CSS】linear-gradient で作る！コピペで使えるテキストの蛍光ペン風マーカー装飾

HTML/CSS
目次

ブログ記事やWebサイトのテキストで、「ここを目立たせたい！」という時に便利なのが蛍光ペン風のマーカー装飾です。 昔は画像を背景に設定したりしていましたが、今のWeb制作ではCSSの background-image: linear-gradient() を使って、たった数行で実装するのが主流です！

グラデーションの色の境界を「同じ位置（%）」に設定することで、ぼやけずに線を引くことができます。 今回は、基本のハーフマーカーから、ドット柄、ホバーアニメーションまで、そのままコピペして使えるデモをご用意しました！

デモ動作

See the Pen Untitled by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>CSS マーカー装飾 デモ</h2>
  <p class="p-desc">テキストにクラスを付与するだけで、様々なマーカーが引けます！</p>
  
  <div class="p-demo-box">
    
    <p class="c-text">
      1. 一番定番のスタイル！テキストの半分を塗りつぶす<span class="c-marker-half">蛍光ペン風のハーフマーカー</span>です。
    </p>

    <p class="c-text">
      2. 細めでスッキリ見せたい時は、<span class="c-marker-line">アンダーライン風のマーカー</span>がおすすめです。
    </p>

    <p class="c-text">
      3. 少しポップにしたい時は、円形グラデーションで作る<span class="c-marker-dot">ドット柄のマーカー</span>も可愛いです！
    </p>

    <p class="c-text">
      4. マウスを乗せると<span class="c-marker-animation">左からスッと引かれるマーカーです。（ホバーしてみてね！）</span>
    </p>

  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap {
  padding: 40px 20px;
  max-width: 700px;
  margin: 0 auto;
  color: #3e3e3e;
  line-height: 2;
}

h2 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #1bb4d4;
  text-align: center;
}

.p-desc {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  text-align: center;
}

.p-demo-box {
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 5%);
}

.c-text {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}

/* =========================================
   💡 1. 蛍光ペン風ハーフマーカー（基本）
========================================= */
.c-marker-half {
  /* 透明が60%まで、60%から黄色 */
  background-image: linear-gradient(transparent 60%, #ff6 60%);
}

/* =========================================
   💡 2. アンダーライン風マーカー
========================================= */
.c-marker-line {
  /* 透明の割合を90%に増やすと、線が細くなります */
  background-image: linear-gradient(transparent 90%, #f9c 90%);
}

/* =========================================
   💡 3. ドット柄マーカー（radial-gradientを使用）
========================================= */
.c-marker-dot {
  /* 円形グラデーションで「点」を作る */
  background-image: radial-gradient(circle, #1bb4d4 3px, transparent 3px);
  background-repeat: repeat-x;

  /* 上端に沿って横方向にだけ繰り返す */
  background-position: 0 0;

  /* 点の大きさと間隔 */
  background-size: 18px 6px;
}

/* =========================================
   💡 4. アニメーションマーカー
========================================= */
.c-marker-animation {
  background-image: linear-gradient(transparent 60%, #a8e6cf 60%);
  background-repeat: no-repeat;

  /* 初期状態は背景の横幅を 0% にしておく */
  background-size: 0% 100%;

  /* 横幅の変化を0.3秒かけて滑らかに */
  transition: background-size 0.3s ease-out;
}

/* ホバー時に横幅を 100% にする */
.c-marker-animation:hover {
  background-size: 100% 100%;
}

コードの解説・仕組み

きれいな線を引く最大のポイント

/* =========================================
   💡 1. 蛍光ペン風ハーフマーカー（基本）
========================================= */
.c-marker-half {
  /* 透明が60%まで、60%から黄色 */
  background-image: linear-gradient(transparent 60%, #ff6 60%);
}

/* =========================================
   💡 2. アンダーライン風マーカー
========================================= */
.c-marker-line {
  /* 透明の割合を90%に増やすと、線が細くなります */
  background-image: linear-gradient(transparent 90%, #f9c 90%);
}

linear-gradient は本来「徐々に色が変わる」グラデーションを作るものですが、透明（transparent）の終わりとカラーの始まりのパーセンテージを同じ数値（例：60%）に設定することで、グラデーションがぼやけず、直線の境目を作ることができます。 パーセンテージの数値を大きくすればするほど、色は下に押しやられて線が細くなります！

アニメーションの仕組み

/* =========================================
   💡 4. アニメーションマーカー
========================================= */
.c-marker-animation {
  background-image: linear-gradient(transparent 60%, #a8e6cf 60%);
  background-repeat: no-repeat;

  /* 初期状態は背景の横幅を 0% にしておく */
  background-size: 0% 100%;

  /* 横幅の変化を0.3秒かけて滑らかに */
  transition: background-size 0.3s ease-out;
}

/* ホバー時に横幅を 100% にする */
.c-marker-animation:hover {
  background-size: 100% 100%;
}

デモの4つ目のアニメーションマーカーでは、background-size: 0% 100%; （横幅0、縦幅100%）を初期値にしています。 ホバーした時に background-size: 100% 100%; に変化させることで、左から右へ伸びていくような演出を作ることができます！

補足：公式ドキュメント

・MDN: linear-gradient() 関数

まとめ

今回はCSSのグラデーションを活用したマーカー線の引き方をご紹介しました。

CSSのクラスを一つ追加するだけで手軽に装飾ができるため、ブログの構築など、テキストコンテンツが多いサイトでは必須のテクニックです。

ぜひ皆さんもご自身のサイトで取り入れてみてください！

Prev
Next

関連記事