• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Accessibility

      Build web projects usable for all

    • Web Technology

      Web technology reference for developers

  • Learn
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 開発者向けのウェブ技術
  2. HTML
  3. リファレンス
  4. 要素
    • English (US)
    • Deutsch
    • Español
    • Français
    • 한국어
    • Português (do Brasil)
    • Русский
    • 中文 (简体)

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

この記事では

  • 試してみましょう
  • 属性
  • 使用上のメモ
  • 例
  • アクセシビリティの考慮
  • 技術的概要
  • 仕様書
  • ブラウザーの互換性
  1. HTML
  2. ガイド
  3. コンテンツカテゴリー
  4. コメント
  5. 日付と時刻の形式
  6. 制約検証
  7. ビューポートの meta 要素
  8. レスポンシブ画像
  9. マイクロデータ
  10. マイクロフォーマット
  11. 後方互換モードと標準モード
  12. HTML 早見表
  13. 手引
  14. HTML で用語を定義する
  15. データ属性の使用
  16. 別オリジンの画像の利用
  17. 画像の上にヒットマップを追加する
  18. 読み込みが速い HTML ページを作成する
  19. JavaScript の追加
  20. リファレンス
  21. 要素
    1. 非推奨;
    2. 非推奨;

    3. 非推奨;
    4. 非推奨;
    5. Experimental
    6. 非推奨;
    7. 非推奨;
    8. 非推奨;

文脈に依存する部分の識別

この例では を使用して一節の中の検索結果をマークしています。

html

It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

検索結果に対する の使用を他の使い方と区別しやすくするように、この例ではそれぞれの一致部分に "match" カスタムクラスを適用しています。

結果は以下のようになります。

アクセシビリティの考慮

mark 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の ::before および ::after 擬似要素と共に content プロパティを使うことでアナウンスさせることができます。

css
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [強調開始] ";
}

mark::after {
  content: " [強調終了] ";
}

スクリーンリーダーを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが強調されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

  • Short note on making your mark (more accessible) | The Paciello Group
  • Tweaking Text Level Styles | Adrian Roselli

技術的概要

コンテンツカテゴリー フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement

仕様書

Specification
HTML
# the-mark-element

ブラウザーの互換性

Help improve MDN

Learn how to contribute.

This page was last modified on 2025年4月12日 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Bluesky
  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.