【CSS】文字にマーカー風のラインを引く方法｜グラデーション・アニメーション・複数行対応

【CSS】文字にマーカー風のラインを引く方法｜グラデーション・アニメーション・複数行対応 HTML/CSS
2022.09.06

CSSで文字にマーカー風（蛍光ペン風）のラインを引く方法を解説します。

もっとも使われている linear-gradient を使った方法に加え、太さ・色の調整、text-decoration による方法、複数行での途切れ防止、アニメーション効果、手書き風マーカーまで、実務で使えるパターンを網羅します。

スポンサーリンク

linear-gradient でマーカーラインを引く（基本）

もっとも広く使われている方法は、background に linear-gradient を指定することです。

.marker {
  background: linear-gradient(transparent 60%, #fff6b8 60%);
}
<p>ここは通常のテキストです。<span class="marker">マーカーを引いた部分</span>です。</p>

仕組み：上から60%までを透明（transparent）、60%以降を色付きにすることで、テキストの下部にだけ色が表示されます。2つの値が同じ（60%と60%）なので、グラデーションは発生せずくっきりした境界になります。

太さを調整する

transparent のパーセンテージを変えることで、マーカーの太さを自由に調整できます。

指定 太さ 見た目
transparent 0% 全面 背景色のように文字全体を覆う
transparent 30% 極太 文字の大部分にラインが重なる
transparent 50% 太め 文字の下半分にライン
transparent 60% 標準 よく使われるバランス
transparent 80% 細め アンダーラインに近い 
/* 太めのマーカー */
.marker-thick {
  background: linear-gradient(transparent 30%, #fff6b8 30%);
}

/* 細めのマーカー */
.marker-thin {
  background: linear-gradient(transparent 80%, #fff6b8 80%);
}

色を変える

カラーコードを変更するだけで、さまざまな色のマーカーを作れます。

色 カラーコード 用途の例
黄色 #fff6b8 一般的な強調
ピンク #ffd0d1 重要ポイント
水色 #a8dafb 補足情報
黄緑 #c8f7c5 ヒント・ポイント
オレンジ #ffd8a8 注意・警告 
.marker-yellow { background: linear-gradient(transparent 60%, #fff6b8 60%); }
.marker-pink   { background: linear-gradient(transparent 60%, #ffd0d1 60%); }
.marker-blue   { background: linear-gradient(transparent 60%, #a8dafb 60%); }
.marker-green  { background: linear-gradient(transparent 60%, #c8f7c5 60%); }
.marker-orange { background: linear-gradient(transparent 60%, #ffd8a8 60%); }

CSS変数で色と太さを一元管理する

CSS カスタムプロパティを使うと、色と太さをまとめて管理できます。

:root {
  --marker-color: #fff6b8;
  --marker-position: 60%;
}

.marker {
  background: linear-gradient(
    transparent var(--marker-position),
    var(--marker-color) var(--marker-position)
  );
}

/* 色変更はCSS変数だけで済む */
.marker-pink {
  --marker-color: #ffd0d1;
}
.marker-thick {
  --marker-position: 40%;
}

テーマカラーの変更やダークモード対応が容易になります。

text-decoration でマーカーを再現する

text-decoration 系プロパティを組み合わせると、linear-gradient を使わずにマーカー風の表現ができます。

.marker-deco {
  text-decoration: underline;
  text-decoration-color: rgba(255, 228, 0, 0.4);
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.15em;
  text-decoration-skip-ink: none;
}
プロパティ 役割
text-decoration-color 線の色（半透明にすると蛍光ペンらしくなる）
text-decoration-thickness 線の太さ
text-underline-offset 線の位置（マイナス値で文字に重ねる）
text-decoration-skip-ink none にしないと文字と重なる部分が途切れる

注意：text-decoration-skip-ink: none を忘れると、「g」や「y」などの下に突き出す文字の部分でラインが途切れてしまい、マーカーらしさがなくなります。

2つの方法の比較

比較項目 linear-gradient text-decoration
実装の手軽さ 1行で記述可能 5つのプロパティが必要
太さの自由度 ○（パーセンテージで自在） ○（thickness で指定）
位置の調整 パーセンテージで簡単 offset で調整
複数行の対応 display: inline が必要 標準で対応
ブラウザ対応 すべてのブラウザ 主要ブラウザ（IE非対応）
アニメーション background-size で可能 トランジション不可

複数行テキストで途切れないようにする

マーカーが複数行にわたる場合、行の折り返し部分でスタイルが途切れることがあります。

display: inline を使う（基本）

linear-gradient 方式の場合、対象要素がインライン要素である必要があります。<span> はデフォルトでインライン要素なのでそのまま使えます。

/* NG: ブロック要素では横幅いっぱいに色がつく */
p.marker {
  background: linear-gradient(transparent 60%, #fff6b8 60%);
}

/* OK: インライン要素なら複数行でも正常 */
span.marker {
  background: linear-gradient(transparent 60%, #fff6b8 60%);
}

見出し（<h2>）などブロック要素にマーカーを適用したい場合は、テキストを <span> で囲むか、display: inline を指定します。

box-decoration-break で行ごとに装飾を独立させる

box-decoration-break: clone を指定すると、改行で分割されたボックスそれぞれに同じ装飾が適用されます。

.marker-multiline {
  background: linear-gradient(transparent 60%, #fff6b8 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.3em;
}

padding を追加すると、マーカーが文字の左右に少しはみ出して、よりリアルな見た目になります。

手書き風のマーカー表現

実際のマーカーペンは均一ではなく、端の濃さやはみ出しに個性があります。CSS で再現するとこうなります。

.marker-handdrawn {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
テクニック 効果
不均等な border-radius 角度の違うペン先を再現
グラデーションの濃淡（10% → 70% → 30%） ペンの筆圧の変化を再現
ネガティブマージン + パディング 文字の外側へ自然にはみ出す
box-decoration-break: clone 複数行でも各行に効果を適用

アニメーションでマーカーを引く

スクロールやホバー時に、左から右へマーカーが引かれるようなアニメーションを加えられます。

ホバーでマーカーが引かれるアニメーション

.marker-anime {
  background-image: linear-gradient(transparent 60%, #fff6b8 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease;
}
.marker-anime:hover {
  background-size: 100% 100%;
}

background-size を 0% から 100% に変化させることで、左から右へマーカーが引かれるようなアニメーションになります。

ページ読み込み時に自動で引かれるアニメーション

.marker-auto {
  background-image: linear-gradient(transparent 60%, #fff6b8 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  animation: draw-marker 1s ease forwards;
  animation-delay: 0.5s;
}

@keyframes draw-marker {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}

animation-delay でページ読み込み後に少し遅れてマーカーが引かれるようにすると、ユーザーの目を引きやすくなります。

mark 要素でセマンティックにマークアップする

HTML にはテキストのハイライトを意味する <mark> 要素があります。<span> の代わりに使うと、セマンティクスの面で正しいマークアップになります。

mark {
  background: none; /* ブラウザのデフォルト背景色をリセット */
  background-image: linear-gradient(transparent 60%, #fff6b8 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
<p>この文章の<mark>重要なポイント</mark>をハイライトしています。</p>

<mark> にはブラウザのデフォルトで黄色い背景が適用されるため、background: none でリセットしてから linear-gradient を指定します。

実践パターン

パターン1：見出しにマーカーで装飾

h2 span.marker-heading {
  background: linear-gradient(transparent 50%, rgba(255, 246, 184, 0.6) 50%);
  padding-bottom: 0.1em;
}
<h2><span class="marker-heading">セクションの見出し</span></h2>

見出しのテキストを <span> で囲み、インライン要素にすることがポイントです。

パターン2：リンクにホバーマーカー

a.marker-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(transparent 60%, #a8dafb 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
a.marker-link:hover {
  background-size: 100% 100%;
}

通常時は下線なしで、ホバー時にマーカーが引かれるインタラクティブなリンク装飾です。

パターン3：ストライプ模様のマーカー

.marker-stripe {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    rgba(255, 200, 0, 0.3) 2px,
    rgba(255, 200, 0, 0.3) 4px
  );
  padding: 0.1em 0.2em;
}

repeating-linear-gradient で斜めのストライプパターンを作ります。通常のマーカーとは異なるアクセントになります。

マーカーが効かないときのチェックリスト

症状 原因 対処法
マーカーが横幅いっぱいに広がる ブロック要素に適用している <span> で囲むか display: inline を指定
複数行で途切れる・崩れる box-decoration-break が未指定 box-decoration-break: clone を追加
text-decoration で文字部分が途切れる text-decoration-skip-ink がデフォルトのまま text-decoration-skip-ink: none を追加
mark 要素の背景が二重になる ブラウザのデフォルト背景色が残っている background: none でリセットしてから指定
行間でマーカーが離れて見える line-height が大きすぎる line-height を 1.6〜1.8 程度に調整

まとめ

方法 特徴 おすすめの用途
linear-gradient 1行で記述可能。太さ・色の調整が簡単 汎用的な強調表現
text-decoration 標準プロパティで意味的に正しい アンダーライン寄りのマーカー
手書き風 不均等な border-radius とグラデーションでリアルな質感 デザイン性を重視するサイト
アニメーション付き background-size のトランジションで動きを追加 LP・ポートフォリオ
ストライプ repeating-linear-gradient でパターン模様 個性的なアクセント

ポイント：

  • 基本形は background: linear-gradient(transparent 60%, 色 60%)
  • パーセンテージの数値を大きくすると細く、小さくすると太くなる
  • ブロック要素には直接適用せず、<span> で囲むか display: inline を指定する
  • 複数行は box-decoration-break: clone で途切れを防止
  • アニメーションは background-size を 0% → 100% にトランジションさせる
  • セマンティクスを考慮するなら <mark> 要素を使う

あわせて読みたい