蛍光マーカーラインタイトル

解説

見出しの重要キーワードに、蛍光ペンで線を引いたような半透明ラインを敷くタイトルです。<mark> タグで囲んだ部分に linear-gradient(transparent 55%, rgba(245,87,108,.45) 55%) を背景指定し、上 55% を透明・下 45% を半透明色にすることで、文字の下側だけにマーカーを引いた見た目を作っています。rgba の透明度により下の文字がうっすら透けて、手で引いたペンらしい自然さが出ます。

こんなページに向きます

• 学習・教育系サイトの大切なポイントの強調
• ノート風・手書き風の親しみやすいブログ見出し
• キャッチコピーの一語だけ目立たせたいとき

マーカーの色は rgba 値、濃さは末尾の .45（不透明度）、高さは 55% の境界で調整できます。半透明にしておくと 文字の可読性を保ったまま強調できるのが利点です。意味的にも <mark> は「強調・該当箇所」を表す適切なタグなので、検索エンジンやスクリーンリーダーにも文脈が伝わります。CSS のみで軽量、動きはありません。

使用例・適したシーン

• ヒーローセクションのキャッチコピー
• セクション見出し
• 記事タイトル・ブログのリード
• コーポレートサイトのキービジュアル