過去バージョン

3. コードレビュー / 差分表示

function add(a, b) {
    return a - b;  // ← ここがバグ！
}

4. 注意喚起したい数値・固有名詞

本商品は 2026年6月30日 まで限定価格です。

em / strong / mark / b の使い分け

CSS でカスタマイズ

/* ピンク背景に変更 */
mark {
    background-color: #ffe0e9;
    color: #c2185b;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 蛍光ペン風（より自然な線） */
mark {
    background: linear-gradient(transparent 60%, #ffeb3b 60%);
    padding: 0;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    mark {
        background-color: #ffd54f;
        color: #000;
    }
}

JavaScript で動的に追加

検索フォームのキーワードを記事中に動的にハイライトするなら、テキストノードを置換します。

function highlight(root, keyword) {
    if (!keyword) return;
    const re = new RegExp(`(${keyword})`, 'gi');
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
    const nodes = [];
    while (walker.nextNode()) nodes.push(walker.currentNode);

    nodes.forEach(node => {
        if (re.test(node.nodeValue)) {
            const span = document.createElement('span');
            span.innerHTML = node.nodeValue.replace(re, '$1');
            node.parentNode.replaceChild(span, node);
        }
    });
}

highlight(document.querySelector('article'), 'JavaScript');

アクセシビリティ

スクリーンリーダーの多くは をデフォルトで読み上げません（CSS の見た目だけが変わる扱い）。重要な意味を持つハイライトには、必要に応じて aria-label や前後の補足テキストを併用しましょう。

明日の予定:
   15時 顧客打ち合わせ を厳守してください。

ブラウザサポート

主要ブラウザ（Chrome / Firefox / Safari / Edge）すべて対応済み。IE11 も対応。スタイルが想定通り出ない場合は、リセット CSS で mark { background: yellow; color: black; } 等を補うとよいでしょう。

SEO への影響

Google は 内のテキストを通常の本文としてクロールします。検索結果でのキーワード強調は SEO 順位に直接の効果はないものの、ユーザーエクスペリエンス向上を通じて間接的に評価される可能性があります。

FAQ

Q: でいいのでは？
A: 見た目は同じですが、意味のないただの装飾になります。 は「注目してほしい箇所」という意味を持つ HTML 要素のため、ボイラープレートの可読性 / 保守性が上がります。

Q: 同じテキストを何度も mark してよい？
A: 用途的にはアリですが、多すぎるハイライトは逆に注意を分散させます。1 段落で 1〜2 箇所程度に留めると効果的。

Q: ハイライトのスタイルがブラウザでバラバラ
A: ベンダー間で背景色のトーンに差があります。明示的に mark { background: #ffeb3b; } 等を指定すると統一できます。

HTML 仕様での位置づけ

HTML Living Standard では は「現在のユーザー文脈における関連性のためにマークされた、参照のためのテキスト範囲」と定義されています。重要なのは「現在の文脈」という言葉で、原文に元から含まれる強調ではなく、読み手や別の文脈から見て注目すべき箇所に使うのが正しい使い方です。

避けるべき使い方

• 装飾目的のハイライト — 意味が無いなら CSS と を使う
• 段落全体を mark — どこに注目すべきかわからなくなる
• 原文の強調に使う — それは / の役割
• 新着情報の印 — 「新着」のような意味なら が適切