HTML | テキストをハイライト表示にする
HTMLでテキストを改行する方法とサンプルコードを紹介しています。
HTMLで テキストをハイライト表示にする
HTMLで テキストをハイライト表示にするにはstyle属性にてハイライトしたい部分をspanタグで囲い「background-color」プロパティでハイライトする色を指定します。
コンテンツの背景色が濃い色の場合、文字色も変更しておくと良いかも知れません。
また、そのままですと横幅が文字サイズピッタリになり余白はなく、隣接するテキストとも引っ付いてしまいます。
気になる場合は「margin」プロパティと「padding」プロパティで横方向のみ余白を付けます。
<p>テキストを<span style="color: black; background-color: yellow; margin:auto 2px; padding:0 2px;">ハイライト</span>する</p>テキストをハイライトする
以下は、ハイライトに合う色をまとめています。
| 名前 | 16進コード | RGBコード |
|---|---|---|
| yellow | #FFFF00 | 255, 255, 0 |
| pink | #FFC0CB | 255, 192, 203 |
| green | #00FF00 | 0, 255, 0 |
| orange | #FFA500 | 255, 165, 0 |
| blue | #0000FF | 0, 0, 255 |
| purple | #800080 | 128, 0, 128 |
| red | #FF0000 | 255, 0, 0 |
| cyan | #00FFFF | 0, 255, 255 |
| magenta | #FF00FF | 255, 0, 255 |
| lime | #00FF00 | 0, 255, 0 |
また、以下のページでCSSを使って蛍光ペン風のハイライトを作成するサンプルを紹介しています。