HPBUILD

Webサイトで目立たせたい言葉があるとき、「マーカーで引いたような演出」があると便利ですよね。 実はこれ、CSSだけで簡単に実装できるんです。この記事では、CSSでマーカー風の文字装飾を作る方法を紹介します。 基本：背景色でマーカー風にする まずは一番シンプルな方法。backgroundプロパティで文字の背景に色をつけます。 コピー .marker { background: yellow; } この方法は簡単ですが、マーカーのような「下線寄りの塗り」は難しく、行の高さによって見た目が不自然になることもあります。 発展：linear-gradientで下部だけ塗る マーカーっぽい下部だけの装飾は、linear-gradientを使うと実現できます。 コピー .marker-gradient { background: linear-gradient(transparent 60%, #fce38a 60%); } 透明部分と色付き部分を60%ずつに区切り、文字の下半分だけを塗るような演出が可能になります。 複数行対応のマーカースタイル 複数行にまたがるテキストでマーカーを使いたい場合、少し工夫が必要です。 コピー .marker-multiline { background: linear-gradient(transparent 60%, #f9f871 60%); background-repeat: no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.2em; } box-decoration-break: cloneを使うことで、行が折り返された場合でもマーカーが綺麗に続きます。 応用：選択時だけマーカー風にする テキスト選択時（ドラッグして反転したとき）にマーカー風の色を出すこともできます。 コピー ::selection { background: #ffe666; color: #000; } デフォルトの青い反転を、自サイトのカラーに合わせたマーカー風にカスタマイズ可能です。 初心者が気をつけたいポイント 背景色とのバランス：背景色と文字色が近すぎると読みにくくなるため、コントラストに注意 多用しすぎない：強調しすぎると読者がどこを見ればいいか迷ってしまう フォントサイズとの調整：小さすぎる文字だとマーカーが強すぎて不自然に見えることも おわりに CSSを使えば、シンプルなテキストでも強調演出や視線誘導が可能です。 マーカー風の装飾は、ちょっとした工夫で印象を変えられる便利なテクニック。ぜひ、見出しや注目キーワードに活用してみてくださいね。