テキスト(文字)にマーカーをつけて強調する
テキスト(文字)にマーカーをつけて強調するにはmark要素を使用します。文章の強調したい部分を蛍光ペンで塗るみたいな感じですね。span要素でcss書くのと一緒ですがデフォルトで背景が黄色になっています。細かい表現をしたい場合は、span要素で擬似要素を使う方法などありますが単純にこれだけで良いというときには使えますね。
[HTML]
1 2 3 |
テキストをマーカーで強調する。 |
[ブラウザ表示]
テキストをマーカーで強調する。
色を変更する
色を変更するにはspan要素を使用するときと同様にclassを追加してcssで定義します。
[HTML]
1 2 3 4 5 |
テキストをマーカーで強調する。 テキストをマーカーで強調する。 テキストをマーカーで強調する。 |
[CSS]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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でマーカーの左右にスペースを入れています。赤・青は文字色が黒だと見づらいので文字色を白に変更しています。