【HTML】markタグでテキストの一部をマークする方法

このページについて

このページではHTMLで使えるmarkの使い方を解説しています。

markはその名の通り、テキストの一部をマークするために使用されます。意味合いとしては「マークしつつ、強調表示する」という感じです。

他の類似タグとの違いはやはり見た目です。他のタグは基本的には太字にしたり、斜め表示にしたりすることでテキストに差をつけていますが、markはこうなります。

markは他の装飾系タグと同様に、強調したいテキストを囲むだけでOKです。

<p>強欲な壺は<mark>禁止カード</mark>です。</p>

これをブラウザで実行すると

強欲な壺は禁止カードです。

先ほど同様、マークアップされます。ちなみにこの黄色はデフォルトで設定されている色なので、ブラウザを変えても大体は黄色だと思います。

他の色にするにはmarkに対してCSSで色を上書きするのが簡単かなと思います。その際はクラスを付与してやるのが簡単かなと思います。

<p><mark class="bluem">背景を青にマーク</mark></p>

.bluem{
background-color: blue;
color:white;
}

背景を青にマーク

こんな感じで背景色を個別に上書きすることも可能です。サイトの色合いに合わせて変更してみるのも面白そうですね。

markで使える固有の属性は無く、グローバル属性・イベント属性をサポートしています。今回の例で紹介したclass属性はグローバル属性です。後からCSSで色を変えるとか、JavaScriptで操作するとか、そういう時にグローバル属性は大いに役立つので設定しておくのもいいかと思います。

markは文字をマークしつつ、強調表示する機能を持っています。CSSで後から色を変更することもできるので、サイトの色合いに合わせてみるとかもできます。