CSSで手軽に作れる！蛍光ペンでマーカーを引いて強調部分を魅せるデザインテクニック【CSS】

蛍光ペンマーカーのデザインパターンデモ

以下のデモでは、CSSを使用して作成した様々な蛍光ペンマーカーのスタイルを確認できます。
各スタイルは、Webデザインにおける視覚的な強調手法として効果的に活用できます。
デモを確認し、それぞれのマーカースタイルがテキストにどのような印象を与えるか確認してください。

See the Pen CSSで作る蛍光ペンマーカー by Muhiro (@muhiro) on CodePen.

基本的な蛍光ペンマーカーの実装

最も基本的な蛍光ペンマーカーの実装方法から解説していきます。

HTML

<p>これは<span class="highlight">強調したい</span>テキストです。</p>

CSS

.highlight {
    background-color: #ffff00;
}

この方法では、span要素にbackground-colorプロパティを使用して背景色を設定しています。
黄色（#ffff00）を使用していますが、任意の色に変更可能です。
しかし、この方法では文字全体が背景色で覆われてしまいます。より自然な蛍光ペンの効果を得るには、文字の下部だけに色を付ける方法が効果的です。

文字だけでなく、要素全てに蛍光ペンマーカーが引かれてしまう

ブロックレベル要素（例えば、<p> や <div> タグ）に背景色（background-color）を指定すると、その要素全体（横幅いっぱい）に背景色が適用されます。
これでは、通常の蛍光ペンマーカーで文字をなぞるようなデザインとは少し異なり、背景色が要素全体を覆ってしまいます。

蛍光ペンマーカーのように文字のみに色を付けたい場合は、インライン要素に背景色を設定するのが効果的です。

文字の下部だけに蛍光ペンマーカーを引く

より自然な蛍光ペンマーカーに見せるためには、“linear-gradient”を使用します。

CSS

.highlight {
    background: linear-gradient(180deg, transparent 60%, #ffff00 60%);
}

この方法では、上部60%を透明（transparent）に、下部40%を黄色に設定しています。これにより、文字の下部だけにマーカーが引かれたようなデザインにすることができます。

linear-gradientの解説

180deg・・・グラデーションの方向を上から下へ指定してます。
透明（transparent）・・・0%（最初のカラーストップは省略可能） → 60% で指定してます。
マーカー色（#ffff00）・・・60% → 100%（最後のカラーストップは省略可能） で指定してます。

省略しないと以下の記述になります。

CSS

.highlight {
    background: linear-gradient(180deg, transparent 0%, transparent 60%, #ffff00 60%, #ffff00 100%);
}

linear-gradientとは

CSSのlinear-gradient関数で、主に線形のグラデーションを作成するために使用されます。

transparentとは

要素の色を完全に透明にするためのキーワードです。

transparentを指定した要素は、視覚的には見えなくなりますが、実際にはその要素自体は存在し続けます。このため、マージンやパディングなどの余白も保持されます。

マーカーの太さを調整する

細いマーカー

透明部分を80%に指定することで細いマーカーにできます。

CSS

.highlight {
    background: linear-gradient(180deg, transparent 80%, #ffff00 80%);
}

太いマーカー

透明部分を20%に指定することで太いマーカーにできます。

CSS

.highlight {
    background: linear-gradient(180deg, transparent 20%, #ffff00 20%);
}

微妙にかすれた（グラデーション）ようにみせる場合

以下の記述の場合、透明部分と蛍光ペンマーカー部分が微妙にかすれた（グランデーション）のように見えます。

CSS

.highlight {
    background: linear-gradient(180deg, transparent 40%, #ffff00 60%);
}

180deg・・・グラデーションの方向を上から下へ指定してます。
透明（transparent）・・・0%（最初のカラーストップは省略可能） → 40% で指定してます。
かすれ（グラデーション）・・・40% → 60% の間に色の遷移領域（色の変化）が生じます。
マーカー色（#ffff00）・・・60% → 100%（最後のカラーストップは省略可能） で指定してます。

グラデーションを使った蛍光ペンマーカー

より洗練された見た目を求める場合、グラデーションを使用することも効果的です。

CSS

.highlight {
    background: linear-gradient(180deg, transparent 40%, #ffff00 30%, #ffa500);
}

180deg・・・グラデーションの方向を上から下へ指定してます。
透明（transparent）・・・0%（最初のカラーストップは省略可能） → 40% で指定してます。
マーカー色1（#ffff00）・・・40% → 70%
マーカー色1とマーカー色2がグラデーションになります。
マーカー色2（#ffa500）・・・70% → 100%（最後のカラーストップは省略可能） で指定してます。

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、CSSを使用した蛍光ペンマーカーのテクニックを紹介しました。

今回のポイントをまとめますと、次のとおりです。

これらのテクニックを適切に使用することで、ユーザーの注目を集め、重要な情報を効果的に伝えることができます！
ただし、過度の使用は逆効果になる可能性があるため、適度に使用することが重要です。
CSSの蛍光ペンマーカーテクニックを活用して、読者を魅了する魅力的なウェブデザインを作成してください！

最後までお読みいただきありがとうございました！