こんにちは、阿久梨絵です！
Webページやブログ記事で「ここ、読者に強調して伝えたい！」という場面、ありますよね。そんなときに便利なのが、 蛍光ペン風 の色彩表現。この記事では、HTMLとCSSを使って簡単に蛍光ペンのようなハイライトを再現する方法を紹介します。
蛍光ペン風の色彩とは？
蛍光ペンの特徴は以下の3点
・彩度が高く、明度も高い（目立つ）
・半透明で下の文字が透ける
・ 発光しているような印象
この特徴をWeb上で再現するには、CSSのrgba()やbox-shadowを活用するのがポイントです。
※以下記載の半角< は、全角＜で表示しています。
HTML＋CSSで蛍光ペン風を再現する方法
① 基本のハイライト（半透明）
html
＜p>
この文章の ＜span class=”highlight”>重要な部分＜/span> を蛍光ペン風に強調します。
＜/p>
＜style>
.highlight {
background-color: rgba(255, 255, 0, 0.5); /* 蛍光イエロー */
padding: 0.2em;
}
＜/style>
インラインCSSで使う場合
＜span style=”background-color: rgba(255, 255, 0, 0.5);”>・・・・＜/span>
・rgba(255, 255, 0, 0.5) は黄色の半透明
・paddingで塗った感を演出
② 発光感を加える（box-shadow）
css
.highlight {
background-color: rgba(255, 255, 0, 0.5);
padding: 0.2em;
box-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
}
・box-shadowで周囲にぼかしを加えることで、光っているような印象に
③ 複数色でバリエーション
css
.pink { background-color: rgba(255, 51, 204, 0.5); }
.green { background-color: rgba(153, 255, 0, 0.5); }
.blue { background-color: rgba(0, 255, 255, 0.5); }
読者の目線誘導やカテゴリ分けにも使えます。
実用シーンと応用アイデア
・記事内の重要ポイントの強調
・チェックリストやToDoの視認性アップ
・SNS投稿やLPでの視覚的インパクト
さらに、JavaScriptと組み合わせれば、クリックで蛍光ペン風に変化するインタラクションも可能です。
まとめ
蛍光ペン風 の色彩は、読者の目線を自然に誘導し、情報の優先度を視覚的に伝える強力な手法です。HTML＋CSSで簡単に実装できるので、ぜひあなたのブログやWebサイトにも取り入れてみてください。
阿久梨絵でした！
