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を使えば、シンプルなテキストでも強調演出や視線誘導が可能です。
マーカー風の装飾は、ちょっとした工夫で印象を変えられる便利なテクニック。ぜひ、見出しや注目キーワードに活用してみてくださいね。