テキスト（文字）にマーカーをつけて強調する

2018年5月7日

テキスト（文字）にマーカーをつけて強調するにはmark要素を使用します。文章の強調したい部分を蛍光ペンで塗るみたいな感じですね。span要素でcss書くのと一緒ですがデフォルトで背景が黄色になっています。細かい表現をしたい場合は、span要素で擬似要素を使う方法などありますが単純にこれだけで良いというときには使えますね。

[HTML]

<body>
    <p>テキストを<mark>マーカーで強調</mark>する。</p>
</body>

[ブラウザ表示]

テキストをマーカーで強調する。

色を変更する

色を変更するにはspan要素を使用するときと同様にclassを追加してcssで定義します。

[HTML]

<body>
    <p>テキストを<mark class="red">マーカーで強調</mark>する。</p>
    <p>テキストを<mark class="yello">マーカーで強調</mark>する。</p>
    <p>テキストを<mark class="blue">マーカーで強調</mark>する。</p>
</body>

[CSS]

mark.red {
    color: #fff;
	background-color: #f00;
	padding-left: 5px;
	padding-right: 5px;
}
mark.yello {
	background-color: #ff0;
	padding-left: 5px;
	padding-right: 5px;
}
mark.blue {
	color: #fff;
	background-color: #00f;
	padding-left: 5px;
	padding-right: 5px;
}

[ブラウザ表示]

テキストをマーカーで強調する。

※paddingでマーカーの左右にスペースを入れています。赤・青は文字色が黒だと見づらいので文字色を白に変更しています。