1. ホーム
  2. HTML

【HTML】mark 要素の使い方｜テキストをハイライト（蛍光ペン）で目立たせる方法

Share

文章の一部を蛍光ペンで引いたように目立たせたいとき、HTML には <mark> という専用の要素があります。<span> に色を付けても見た目は近づけられますが、<mark> は「ここが重要・注目してほしい箇所だ」という意味を持つ点が違います。この記事では、<mark> の基本的な使い方、既定の見た目、CSS での色の変え方、<strong> や <em> との使い分け、そして検索結果のハイライトといった実践例までを、実際に試せるデモとあわせて解説します。

mark 要素とは

<mark> は、テキストの一部を「参照のために目立たせる」ためのインライン要素です。ブラウザの既定では黄色い背景色が付き、蛍光ペンでマーカーを引いたように表示されます。多くのブラウザで囲むだけでハイライトされるので、特別な準備は要りません。

index.html
<p>締め切りは <mark>今週の金曜日</mark> です。</p>

この <mark>今週の金曜日</mark> の部分だけが黄色くハイライトされます。文章の流れの中で「ここに注目」と示したい箇所を囲むのが基本の使い方です。

CSS で色やスタイルを変える

既定の黄色はサイトのデザインに合わないこともあります。<mark> はただの要素なので、background-color や color で自由に見た目を変えられます。クラスを付ければ、用途ごとに色を分けることも可能です。次のデモは、実際に色や余白を変えた例です。コードを書き換えると右側のプレビューがすぐ変わるので、いろいろ試してみてください。

<p>本日は <mark>10時から17時</mark> まで営業しています。</p>
<p>検索キーワード「<mark class="hit">CSS</mark>」が本文中で強調されます。</p>

/* mark の既定は黄色の背景。色は自由に変えられる */
mark {
  background-color: #fff3b0;
  color: #333;
  padding: 0 4px;
  border-radius: 3px;
}

/* クラスを付けて用途ごとに色分けもできる */
mark.hit {
  background-color: #c8f7c5;
  font-weight: bold;
}
Preview

padding と border-radius を少し足すと、蛍光ペンよりも「タグ」や「バッジ」に近い落ち着いた見た目になります。背景色をブランドカラーに合わせたり、クラスで「新着」「一致」などの用途別に色分けしたりと、デザインに合わせて調整できます。

strong・em との使い分け

テキストを目立たせる要素には <strong> や <em> もあり、混同しがちです。これらは意味（なぜ目立たせるのか）が異なります。見た目ではなく「その言葉が持つ役割」で選ぶのが正しい使い方です。

要素意味既定の見た目
<mark>参照のために注目させたい箇所（文脈上の関連性で目立たせる）黄色の背景
<strong>内容としての重要性・緊急性が高い太字
<em>その語を強調して読ませたい（口調の強調）斜体

たとえば、注意書きの中で「必ず」という語そのものが重要なら <strong>、検索結果でキーワードに一致した部分を目立たせるなら <mark> が適しています。<mark> は「本文自体の重要度」ではなく、「読み手の関心・検索語との関連で今この箇所に注目してほしい」というニュアンスだと考えると選びやすくなります。

実践例：検索キーワードをハイライトする

<mark> がもっとも活きるのが、検索結果でヒットした語を強調する場面です。JavaScript で、本文中のキーワードを <mark> で囲む簡単な例を見てみましょう。

highlight.js
function highlight(text, keyword) {
  // 正規表現の特殊文字をエスケープしてから検索
  const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const re = new RegExp(escaped, 'gi');
  return text.replace(re, (match) => `<mark>${match}</mark>`);
}

const result = highlight('CSSとHTMLの基本', 'css');
console.log(result);
// <mark>CSS</mark>とHTMLの基本

一致した箇所を <mark> で囲んだ HTML を作り、それを要素に挿入すれば、キーワードがハイライトされて表示されます。ユーザーが入力した文字列をそのまま正規表現にすると記号が誤作動の原因になるため、上の例では特殊文字をエスケープしてから検索しています。ユーザー入力をページに差し込む際は、キーワード以外の本文も含めて適切にエスケープ・サニタイズし、意図しない HTML が実行されないよう注意してください。

使うときの注意点

<mark> はあくまで意味づけのための要素です。「文字を黄色くしたいから」という見た目だけの理由で使うのは本来の用途から外れます。単に装飾したいだけなら、<span> に CSS を当てるほうが適切です。逆に「この箇所に注目してほしい」という意図があるなら、色を消していても <mark> を使う価値があります。

また、背景色を変えるときは文字色とのコントラストにも気を配りましょう。薄い背景に薄い文字だと読みづらく、アクセシビリティの観点でも好ましくありません。ハイライトの目的は「読みやすく目立たせる」ことなので、十分に読める配色を選んでください。

まとめ

<mark> は、テキストの一部を「参照のために注目させたい」ときに使うインライン要素で、既定では黄色い背景が付きます。background-color や color、クラスを使えば見た目は自由に変えられます。重要性を示す <strong>、口調を強調する <em> とは意味が異なるので、見た目ではなく役割で選びましょう。検索結果のキーワード強調のように「その文脈で注目させたい箇所」に使うと、意味的にも見た目的にもぴったりの要素です。

参考ページ