プログラミングの独学サイトです。

CSS

CSS文字装飾集｜マーカー線・下線・縁取り・グラデーション文字

CSSで文字を装飾するコピペサンプル集です。蛍光ペン風マーカー、下線、波線、縁取り文字、グラデーション文字、注目テキストなど、ブログやLPで使いやすい例を20個紹介します。

更新 2026.07.12公開 2026.07.08 9分で読めます
この記事の目次
  1. 1. 蛍光ペン風マーカー
  2. 2. 太めのマーカー線
  3. 3. シンプルな下線
  4. 4. 色付きの下線
  5. 5. 点線の下線
  6. 6. 波線の下線
  7. 7. リンクの下線を少しおしゃれにする
  8. 8. 背景が伸びるリンク風下線
  9. 9. 取り消し線
  10. 10. グラデーション文字
  11. 11. 縁取り文字
  12. 12. 文字に影を付ける
  13. 13. 小さなラベル風テキスト
  14. 14. 注目テキストのボックス
  15. 15. 先頭だけ大きくするドロップキャップ
  16. 16. 数字を目立たせる
  17. 17. インラインコード風の文字
  18. 18. レスポンシブな大きい文字
  19. 19. CSS変数で色を変えやすい文字装飾
  20. 20. 文字装飾の最小テンプレート
  21. 文字装飾で失敗しやすいポイント
  22. まとめ

CSSで文字を装飾すると、本文中の重要な部分、リンク、注釈、数字、キャッチコピーなどを目立たせられます。

この記事では、CSSで使える文字装飾を20個まとめました。蛍光ペン風マーカー、下線、波線、縁取り、グラデーション文字、テキスト影など、ブログやLPでコピーしやすい形にしています。

1. 蛍光ペン風マーカー

本文中の一部を自然に目立たせたいときに使いやすい装飾です。

<p>ここは<span class="text-marker">重要なポイント</span>です。</p>
.text-marker {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #fef08a 60%);
}

文章全体ではなく、短い語句だけに使うと読みやすくなります。

2. 太めのマーカー線

より強く目立たせたい場合は、マーカーの高さを増やします。

.text-marker-bold {
  font-weight: 700;
  background: linear-gradient(transparent 35%, #fde68a 35%);
}

マーカーが太いほど強調が強くなるため、使いすぎに注意します。

3. シンプルな下線

下線は text-decoration で指定できます。

.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

text-underline-offset を入れると、文字と下線の間に余白ができます。

4. 色付きの下線

本文色はそのままに、下線だけ色を変える例です。

.text-underline-color {
  text-decoration-line: underline;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

リンクではない文字に下線を使うときは、リンクと混同しないようにします。

5. 点線の下線

補足や用語説明を示したいときに使いやすい下線です。

.text-dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #64748b;
  text-underline-offset: 4px;
}

点線は控えめな強調に向いています。

6. 波線の下線

注意書きや校正っぽい表現に使える波線です。

.text-wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #f97316;
  text-underline-offset: 4px;
}

波線は目立つため、短い語句に限定すると使いやすいです。

7. リンクの下線を少しおしゃれにする

リンクらしさを残しつつ、下線の位置を整えます。

<a class="link-line" href="#">詳しく見る</a>
.link-line {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

リンクは装飾を消しすぎず、クリックできることが伝わる見た目にします。

8. 背景が伸びるリンク風下線

本文リンクやCTA前の短いテキストに使いやすい装飾です。

.link-bg-line {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(#bfdbfe, #bfdbfe) 0 100% / 100% 35% no-repeat;
}

リンクとして使う場合は、ホバー状態も用意すると親切です。

9. 取り消し線

旧価格や削除済みの表現には、取り消し線を使います。

<span class="text-strike">3,000円</span>
.text-strike {
  color: #64748b;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

取り消し線だけでなく、新しい価格も近くに表示します。

10. グラデーション文字

短いキャッチコピーやラベルに向いた装飾です。

.text-gradient {
  color: transparent;
  background: linear-gradient(90deg, #2563eb, #0f766e);
  background-clip: text;
  -webkit-background-clip: text;
}

グラデーション文字は短い文字に使うと効果的です。

11. 縁取り文字

画像の上に置く文字など、背景に負けないようにしたいときに使います。

.text-outline {
  color: #fff;
  text-shadow:
    1px 1px 0 #111827,
    -1px 1px 0 #111827,
    1px -1px 0 #111827,
    -1px -1px 0 #111827;
}

画像上の文字は、CSS画像の上に文字を重ねる方法 と関連します。

12. 文字に影を付ける

軽い影を付けると、背景から文字が少し浮いて見えます。

.text-shadow-soft {
  color: #111827;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

本文全体に影を付けると読みにくくなるため、短い文字に使います。

13. 小さなラベル風テキスト

カテゴリや補足に使いやすい、背景付きの短いテキストです。

<span class="text-label">POINT</span>
.text-label {
  display: inline-block;
  padding: 3px 8px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
  background: #ccfbf1;
  border-radius: 4px;
}

バッジとして使う場合は、CSSバッジ・ラベル・タグデザイン集 に分けられます。

14. 注目テキストのボックス

短い注意文やポイントを、インラインの箱で目立たせます。

.text-box {
  display: inline-block;
  padding: 4px 9px;
  color: #92400e;
  font-weight: 700;
  background: #fef3c7;
  border-radius: 4px;
}

長文ではなく、短いキーワード向けの装飾です。

15. 先頭だけ大きくするドロップキャップ

読み物系の記事で、本文の先頭を印象的に見せる方法です。

<p class="drop-cap">CSSで文字を装飾すると、文章にメリハリが出ます。</p>
.drop-cap::first-letter {
  float: left;
  margin-right: 8px;
  color: #2563eb;
  font-size: 3em;
  font-weight: 700;
  line-height: 1;
}

装飾的な表現なので、通常の記事では使いどころを絞ります。

16. 数字を目立たせる

実績数値や価格など、数字だけを強調する例です。

<p><span class="text-number">98%</span> のユーザーが満足</p>
.text-number {
  color: #2563eb;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1;
}

数字を強調するときも、何の数字かを近くに書きます。

17. インラインコード風の文字

CSSプロパティ名や短いコードを本文中で見せる装飾です。

<p><span class="text-code">display: flex;</span> を指定します。</p>
.text-code {
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: #f1f5f9;
  border-radius: 4px;
}

技術記事では、本文とコードの区別がつきやすくなります。

18. レスポンシブな大きい文字

キャッチコピーなどは、画面幅に合わせて文字サイズを変えます。

.text-fluid {
  font-size: clamp(24px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.25;
}

ビューポートだけに頼らず、最小値と最大値を決めると崩れにくくなります。

19. CSS変数で色を変えやすい文字装飾

マーカー色を使い回す場合は、CSS変数にします。

.text-marker-variable {
  --marker-color: #fde68a;

  font-weight: 700;
  background: linear-gradient(transparent 60%, var(--marker-color) 60%);
}

ページごとに --marker-color を変えれば、同じ装飾を使い回せます。

20. 文字装飾の最小テンプレート

本文中で使いやすい強調の最小セットです。

<p>
  通常の文章の中で
  <span class="text-highlight">ここだけ強調</span>
  します。
</p>
.text-highlight {
  color: #111827;
  font-weight: 700;
  background: linear-gradient(transparent 58%, #bfdbfe 58%);
}

迷ったら、太字と薄いマーカーだけの装飾が読みやすいです。

文字装飾で失敗しやすいポイント

  • 本文全体を装飾しすぎて、どこが重要かわからなくなる
  • 色だけで重要度を伝えている
  • グラデーション文字や縁取り文字を長文に使っている
  • 背景とのコントラストが低く、文字が読みにくい
  • 見出し装飾と本文装飾の役割が混ざっている

まとめ

CSS文字装飾は、マーカー、下線、波線、縁取り、グラデーション文字を使い分けると便利です。

本文中の強調は控えめに、見出し全体のデザインは CSS見出しデザイン集 に分けると、記事同士の役割が明確になります。

RELATED

あわせて読みたい記事