A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/mark below:

<mark>: テã‚ã‚¹ãƒˆãƒžãƒ¼ã‚¯è¦ç´ - HTML | MDN

<mark>: テキストマーク要素

Baseline Widely available

<mark> は HTML の要素で、周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します。

試してみましょう 
<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>

/* stylelint-disable-next-line block-no-empty */
mark {
}
属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

<mark> のよくある利用方法は以下のようなものです。

メモ: <mark> 要素と <strong> 要素を混同しないよう注意してください。 <mark> は関連性のあるコンテンツを表すために使用されますが、 <strong> は重要性のある文字列の区間を表します。

例 関心のある文字列のマーク

最初の例では <mark> 要素を使用して、引用の中でユーザーに特定の関心を引く部分の文字列をマークしています。

<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

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

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

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

<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>

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

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

アクセシビリティの考慮

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

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: " [強調終了] ";
}

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

技術的概要 仕様書 ブラウザーの互換性

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4