開発 2024.04.26

CSSでテキストに蛍光ペン効果を！明るく目立つハイライトスタイルの作り方

ウェブページ上で特定のテキストを強調表示する方法として、「蛍光ペン」効果は非常に効果的です。このスタイルは、背景色を鮮やかにしてテキストを目立たせることで、読者の注意を引きやすくします。CSSを使用して、この魅力的なハイライト効果を簡単に実装する方法をご紹介します。

1 蛍光ペンスタイルの基本
2 HTMLでの使用例
3 効果をカスタマイズする
4 視認性の向上
5 まとめ

蛍光ペンスタイルの基本

蛍光ペン効果をテキストに適用するには、主にbackground-colorプロパティを使用します。明るく鮮やかな色を背景に設定し、テキストが浮き出るようにします。

.highlight {
    background-color: yellow; /* 蛍光黄色 */
    color: black; /* 文字色を黒に設定 */
    padding: 0.2em 0.4em; /* パディングでテキスト周りに余白を作る */
}

このCSSクラスをHTMLのテキスト要素に適用するだけで、簡単に蛍光ペン効果が再現できます。

HTMLでの使用例

<p>
    通常のテキストと<mark class="highlight">強調されたテキスト</mark>を区別できます。
</p>

効果をカスタマイズする

蛍光ペン効果は、色の選択によってさまざまにカスタマイズ可能です。例えば、以下のように異なる色を試してみましょう。

.highlight-green {
    background-color: limegreen; /* 明るい緑色 */
    color: navy; /* 濃紺色でコントラストを高める */
    padding: 0.2em 0.4em;
}

.highlight-pink {
    background-color: fuchsia; /* 鮮やかなピンク色 */
    color: white; /* 白色文字 */
    padding: 0.2em 0.4em;
}

視認性の向上

テキストの視認性をさらに向上させるためには、フォントの太さやサイズも調整してみましょう。font-weightやfont-sizeを調整することで、ハイライト部分の読みやすさを高めることができます。

.highlight {
    background-color: yellow;
    color: black;
    padding: 0.2em 0.4em;
    font-weight: bold; /* フォントを太く */
    font-size: 1.2em; /* フォントサイズを大きく */
}