記事の中で、絶対に読んでもらいたい重要なキーワード。 そこへ視線を集めるのに最適なのが「マーカー（ハイライト）」の装飾です。
この記事では、CSSだけで実装できる動的なハイライトアニメーションを5つ紹介します。 ただ色が塗られているだけでなく、呼吸するように動いたり、マウスを乗せるとスッと線が引かれたりする、シンプルで効果的なコードです。SWELLにコピペするだけで、記事のクオリティが一段とアップします。
Smooth Swipe Marker（スムース・スワイプ）
左から右へ、蛍光ペンでスーッと線を引くような王道のアニメーションです。待機中はマーカーの端が短く出たり入ったりして視線を誘い、ホバーするとテキスト全体を綺麗に塗りつぶします。
See the Pen Smooth Swipe Marker by BaseKENT (@basekent) on CodePen.
調整方法
- マーカーの色:
#ffeb3bをお好みの色（例：ピンクなら#ffc0cb、水色なら#b3e5fc）に変更してください。 - マーカーの太さ:
transparent 50%と#ffeb3b 50%の数値を60%に変更すると、線の高さが下から40%分の細いマーカーになります。
Bottom-Up Fill Marker（ボトムアップ・フィル）
最初はアンダーラインのようにテキストの下に細く引かれていますが、待機中は水面のように波打ちながら少し上下します。ホバーすると、下から上へインクが染み込むように全体をハイライトします。
See the Pen Bottom-Up Fill Marker by BaseKENT (@basekent) on CodePen.
調整方法
- ハイライトのカラー:
#81d4faをサイトのテーマカラーに合わせて変更してください。 - 待機中の高さ:
@keyframes fillIdleの%を変更することで、待機中の線の太さ（水位）を調整できます。
Shimmer Gloss Marker（シマー・グロス）
すでにハイライトが引かれた状態ですが、その表面をツヤやかな光沢（シマー）が走り続けます。強調したい部分に高級感を持たせることができ、ホバーで光沢が止まり、マーカーの色が一段階濃くなります。
See the Pen Shimmer Gloss Marker by BaseKENT (@basekent) on CodePen.
調整方法
- 光沢のスピード:
animation: markerShine 3sの秒数を短くすると、光が高速で通り過ぎます。 - 背景色との相性:
display: inline-block;を指定しているため、文章の中で使う場合はspanタグで使用し、前後の文字との間隔にご注意ください。
Skew Tape Marker（スキュー・テープ）
マスキングテープを少し斜めに貼ったような、遊び心のあるハイライトです。待機中はテープの角度がシーソーのように微細に揺れ、ホバーするとテープが真っ直ぐに直立して文字にピタッとフィットします。
See the Pen Skew Tape Marker by BaseKENT (@basekent) on CodePen.
調整方法
- テープの太さ:
.skew-bgのheight: 80%;を変更します。100%にすると文字全体を最初から覆います。 - 斜め具合:
@keyframes tapeSwayのskewXとrotateの数値を調整することで、テープの傾き具合を変更できます。
Step Drawing Marker（ステップ・ドローイング）
インクが「トントンッ」と段階的に染み出していくような、少しレトロで可愛らしいマーカー表現です。待機中は細かくカクカクと線が伸び縮みし、ホバーすると滑らかに100%まで線が引かれます。
See the Pen Step Drawing Marker by BaseKENT (@basekent) on CodePen.
調整方法
- コマ数（カクカク具合）:
animation: stepDraw 4s steps(4)のsteps(4)をsteps(2)にするとより粗く、steps(8)にすると細かく進みます。 - 線の太さ:
transparent 60%を変更することで、アンダーラインの太さを調整できます。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
