Guinguette Marais Poitevin

Webページのテキストをハイライトすることで、重要な情報をすぐに読者の目に留めることができます。 例えば、このテキストは黄色でハイライトされており、おそらく最初に目に入ったのではないでしょうか。 テキストをハイライトするにはいくつかの方法があります。 以下のリストから方法を選択して、指示に従ってください。

HTML5の<mark>タグを使ってハイライトする

HTML5のページを作成している場合、<mark>タグを使うと、テキストをすばやくハイライトすることができます。 以下は、markタグの使い方とその結果の例です。 ブラウザが<mark>タグをサポートしていれば、「ハイライトされたテキスト」の背景が黄色になるはずです。

サンプルコード

Here is an example of <mark>highlighted text</mark> using the &lt;mark&gt; tag.

サンプル結果

以下は、<mark>タグを使用したハイライトテキストの例です。

HTMLコードだけでテキストを強調表示する

HTMLコードだけでテキストを強調表示し、すべてのブラウザをサポートするには、<span> HTMLタグを使って、以下の例のようにbackground-colorスタイルを設定します。

サンプルコード

<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>

サンプル結果

このテキストは黄色でハイライトされたテキストです。

CSSでテキストを強調する & HTML

以下の例のように、CSSクラスを作成して「background-color」属性を設定することもできます。

「highlightme」クラスを使用してテキストを強調したい場合は、CSSクラスを参照する<span>タグをHTML内に作成してください。

サンプルコード

<span class="highlightme">test</span>

段落全体を強調表示する方法

上記のCSSクラスやstyleクラスは、段落全体を強調表示したい場合、以下のように段落タグにも適用することができます。

サンプルコード

<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>

サンプル結果

この段落全体のテキストが黄色でハイライトされます。