ブログやお知らせの文章で、「ここだけは読んでほしい」という部分を目立たせたい時に便利なのが、マーカーや下線などの文字装飾です。

この記事では、コピペするだけで使えるテキストマーカー・文字装飾を20個まとめました。
定番の蛍光ペン風マーカーから、波線、手書き風の斜めマーカー、マウスを乗せると引かれるマーカー、傍点、キーボードのキー風まで、場面ごとに使い分けられる種類を用意しています。

これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、強調したい言葉を<span class=”〇〇”>と</span>ではさみます。

サンプルの「〇〇-wrap」は、文章全体の見た目を確認するための枠です。実際に使う時は、spanタグの部分だけを文章の中に入れれば動きます（19番のネオン文字は、暗い背景の上で使ってください）。

01. 蛍光ペンの下半分マーカー

文字の下半分だけに色を塗る、もっとも定番のマーカーです。

実際の見た目

HTMLコード

<div class="kts-mark01-wrap">この記事で一番伝えたいのは、<span class="kts-mark01">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark01-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark01 { background: linear-gradient(transparent 60%, #FDE047 60%); font-weight: 700; }

02. 全体を塗る蛍光マーカー

文字全体に淡い色を敷く、目立たせたい時のマーカーです。

実際の見た目

HTMLコード

<div class="kts-mark02-wrap">この記事で一番伝えたいのは、<span class="kts-mark02">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark02-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark02 { padding: 2px 4px; background: #FEF08A; font-weight: 700; }

03. 太めの下線

文字の下に太い線を引く、すっきりとした強調です。

実際の見た目

HTMLコード

<div class="kts-mark03-wrap">この記事で一番伝えたいのは、<span class="kts-mark03">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark03-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark03 { border-bottom: 3px solid #EF4444; font-weight: 700; }

04. 波線の下線

波打つ線を引いた、やわらかい印象の強調です。

実際の見た目

HTMLコード

<div class="kts-mark04-wrap">この記事で一番伝えたいのは、<span class="kts-mark04">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark04-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark04 { text-decoration: underline wavy #F97316; text-decoration-thickness: 2px; text-underline-offset: 5px; }

05. 点線の下線

点線を引いた、控えめな強調です。

実際の見た目

HTMLコード

<div class="kts-mark05-wrap">この記事で一番伝えたいのは、<span class="kts-mark05">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark05-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark05 { border-bottom: 2px dotted #3B82F6; }

06. 二重線の下線

二重の線を引いた、少しかしこまった印象の強調です。

実際の見た目

HTMLコード

<div class="kts-mark06-wrap">この記事で一番伝えたいのは、<span class="kts-mark06">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark06-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark06 { border-bottom: 4px double #111827; font-weight: 700; }

07. グラデーションのマーカー

色がなめらかに変わる、華やかなマーカーです。

実際の見た目

HTMLコード

<div class="kts-mark07-wrap">この記事で一番伝えたいのは、<span class="kts-mark07">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark07-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark07 { background: linear-gradient(90deg, rgba(236,72,153,.35), rgba(139,92,246,.35)) 0 100% / 100% 45% no-repeat; font-weight: 700; }

08. 手書き風の斜めマーカー

少し傾けて引いた、手でペンを走らせたようなマーカーです。

実際の見た目

HTMLコード

<div class="kts-mark08-wrap">この記事で一番伝えたいのは、<span class="kts-mark08">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark08-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark08 { position: relative; z-index: 0; font-weight: 700; }
.kts-mark08::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 45%; background: #86EFAC; transform: rotate(-2deg); border-radius: 3px; z-index: -1; }

09. マウスを乗せると引かれるマーカー

マウスを乗せると、左から右へマーカーが引かれる動きのあるタイプです。

実際の見た目

HTMLコード

<div class="kts-mark09-wrap">この記事で一番伝えたいのは、<span class="kts-mark09">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark09-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark09 { background: linear-gradient(transparent 60%, #FDE047 60%) no-repeat 0 0 / 0% 100%; transition: background-size .5s; font-weight: 700; cursor: default; }
.kts-mark09:hover { background-size: 100% 100%; }

10. 背景色のボックス強調

言葉を色付きの箱で囲む、ラベルのような強調です。

実際の見た目

HTMLコード

<div class="kts-mark10-wrap">この記事で一番伝えたいのは、<span class="kts-mark10">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark10-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark10 { padding: 2px 8px; background: #1E40AF; color: #fff; border-radius: 4px; font-weight: 700; }

11. 文字グラデーション

文字そのものにグラデーションをかけた、目を引く強調です。

実際の見た目

HTMLコード

<div class="kts-mark11-wrap">この記事で一番伝えたいのは、<span class="kts-mark11">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark11-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark11 { background: linear-gradient(90deg, #F97316, #DB2777); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }

12. 縁取り文字

文字のまわりを線で縁取った、ポップな強調です。

実際の見た目

HTMLコード

<div class="kts-mark12-wrap">この記事で一番伝えたいのは、<span class="kts-mark12">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark12-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark12 { color: #fff; font-weight: 800; -webkit-text-stroke: 1px #2563EB; text-shadow: 2px 2px 0 #2563EB; }

13. 影付きの文字

文字に色付きの影を付けた、立体感のある強調です。

実際の見た目

HTMLコード

<div class="kts-mark13-wrap">この記事で一番伝えたいのは、<span class="kts-mark13">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark13-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark13 { font-weight: 800; color: #111827; text-shadow: 2px 2px 0 #FCD34D; }

14. 傍点（ぼうてん）

文字の上に点を打つ、日本語らしい強調です。

実際の見た目

HTMLコード

<div class="kts-mark14-wrap">この記事で一番伝えたいのは、<span class="kts-mark14">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark14-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark14 { -webkit-text-emphasis: filled sesame #DC2626; text-emphasis: filled sesame #DC2626; }

15. 丸く囲む強調

言葉を丸い線で囲んだ、メモに書き込んだような強調です。

実際の見た目

HTMLコード

<div class="kts-mark15-wrap">この記事で一番伝えたいのは、<span class="kts-mark15">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark15-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark15 { padding: 2px 10px; border: 2px solid #DC2626; border-radius: 999px; }

16. 赤字＋太字の定番強調

赤い太字にするだけの、シンプルで伝わりやすい強調です。

実際の見た目

HTMLコード

<div class="kts-mark16-wrap">この記事で一番伝えたいのは、<span class="kts-mark16">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark16-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark16 { color: #DC2626; font-weight: 700; }

17. ストライプのマーカー

斜めの縞模様を敷いた、遊び心のあるマーカーです。

実際の見た目

HTMLコード

<div class="kts-mark17-wrap">この記事で一番伝えたいのは、<span class="kts-mark17">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark17-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark17 { background: repeating-linear-gradient(-45deg, #BAE6FD 0 4px, transparent 4px 8px) 0 100% / 100% 50% no-repeat; font-weight: 700; }

18. キーボードのキー風

「Ctrl」などのキー名を、キーボードのボタンのように見せる装飾です。

実際の見た目

HTMLコード

<div class="kts-mark18-wrap">保存したい時は、<span class="kts-mark18">Ctrl</span> ＋ <span class="kts-mark18">S</span> を押します。</div>

CSSコード

.kts-mark18-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark18 { display: inline-block; padding: 0 8px; line-height: 1.6; background: #F9FAFB; border: 1px solid #D1D5DB; border-bottom-width: 3px; border-radius: 6px; font-size: 14px; font-family: monospace; }

19. 光るネオン文字

文字のまわりがぼんやり光る、夜の看板のような強調です。

実際の見た目

HTMLコード

<div class="kts-mark19-wrap">この記事で一番伝えたいのは、<span class="kts-mark19">ここが大事なポイント</span>です。</div>

CSSコード

.kts-mark19-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark19-wrap { padding: 12px 16px; background: #0F172A; color: #CBD5E1; border-radius: 8px; }
.kts-mark19 { color: #fff; font-weight: 700; text-shadow: 0 0 4px #22D3EE, 0 0 10px #22D3EE, 0 0 18px #22D3EE; }

20. 取り消し線と訂正

古い内容に線を引き、新しい内容を並べて見せる装飾です。セール価格などに使えます。

実際の見た目

HTMLコード

<div class="kts-mark20-wrap">通常価格 <span class="kts-mark20-old">5,000円</span><span class="kts-mark20-new">3,980円</span></div>

CSSコード

.kts-mark20-wrap { font-size: 16px; line-height: 2; color: #1F2937; font-family: sans-serif; }
.kts-mark20-old { color: #9CA3AF; text-decoration: line-through; text-decoration-color: #EF4444; text-decoration-thickness: 2px; }
.kts-mark20-new { margin-left: 6px; color: #DC2626; font-size: 20px; font-weight: 800; }

カスタマイズの小ワザ

• 01番のマーカーの太さは、「60%」の数字で変えられます。数字を小さくすると太く、大きくすると細くなります。
• 強調を使いすぎると、どこが大事なのかが伝わらなくなります。1つの段落に1〜2か所までにしましょう。
• 色の意味をそろえると読みやすくなります。たとえば、大事なことは黄色、注意は赤、のようにルールを決めておくのがおすすめです。
• WordPressのブロックエディタでは、文字を選んで「HTMLとして編集」からspanタグを書き足すと、記事の中で使えます。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当する装飾
定番のマーカー	01, 02, 08
下線で強調したい	03, 04, 05, 06
華やかに見せたい	07, 11, 17
動きを付けたい	09
ラベル風・囲み	10, 15
ポップに見せたい	12, 13
日本語らしく	14
シンプルに伝える	16
操作説明	18
夜・ネオン風	19
セール価格	20

20個のテキストマーカー・文字装飾は、強調したい言葉をspanタグではさんで使う。強調は1つの段落に1〜2か所までにし、色の意味をそろえると読みやすくなる。