背景ボックス付き強調見出し
文字の下半分に色帯が走る、雑誌のキャッチコピー風の強調タイトルです。仕組みはシンプルで、 span の background に linear-gradient(transparent 60%, #fbb034 60%) を指定し、上 60% を透明・下 40% を不透明色にすることで、文字の後ろにベタ塗りではなく…
解説
文字の下半分に色帯が走る、雑誌のキャッチコピー風の強調タイトルです。仕組みはシンプルで、span の background に linear-gradient(transparent 60%, #fbb034 60%) を指定し、上 60% を透明・下 40% を不透明色にすることで、文字の後ろにベタ塗りではなく「下だけ帯」を敷いています。display:inline なので、行が折り返しても帯がテキストに追従します。
向いている用途
- 記事のリード文や見出しの重要フレーズの強調
- LP のキャッチコピーで視線をピン留めしたい箇所
- ブログのアイキャッチ的な大見出し
帯の色は linear-gradient の色コードを変えるだけで差し替えられ、帯の高さは 60% の境界値を上下させて調整します（数値を下げると帯が太くなります）。padding:0 6px で文字の左右に帯のはみ出しを作っています。背景色とのコントラストを確保すれば 読みやすさを保ったまま強調できます。CSS のみで動き軽量、prefers-reduced-motion の配慮も不要です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
帯の色や太さは変えられますか？
色は linear-gradient の色コード（例 #fbb034）を、太さは透明と色の境界 60% の数値を変えれば調整できます。数値を小さくすると帯が太く、大きくすると細くなります。
複数行に折り返しても帯は崩れませんか？
崩れません。span を display:inline にしているため、テキストが折り返しても各行の文字背景に帯が追従します。蛍光ペンで線を引いたような自然な見た目を保てます。