丸印強調（手書き風）
重要な語を赤い楕円で囲んで強調する、手書きの丸印を思わせる装飾です。対象語を囲む span を position:relative にし、 ::before 疑似要素で border:3px solid の枠を作って border-radius:50% で楕円に。
解説
重要な語を赤い楕円で囲んで強調する、手書きの丸印を思わせる装飾です。対象語を囲む span を position:relative にし、::before 疑似要素で border:3px solid の枠を作って border-radius:50% で楕円に。top／left／right／bottom をマイナス値にして文字より一回り大きく囲み、transform:rotate(-3deg) でわずかに傾けることで、定規で引いていない手描きのニュアンスを出しています。CSS のみで JS は不要です。
合うシーン
- 「¥0」「無料」など価格・特典の強調
- 問題提起のキーフレーズへの注目集め
- 授業・解説コンテンツでの正解や要点マーク
丸の色は border の色を変えるだけで調整でき、傾き具合は rotate の角度で変わります。枠が文字に近すぎる場合は上下左右のマイナス値を広げてください。注意点として、span は inline-block なので長い文を囲むと枠が縦長になりがちです。短い単語や数語に絞って使うと、丸印らしいリズムが保てます。背景が濃い場面では枠色のコントラストを確認しましょう。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
丸の色や傾きは調整できますか
色は ::before の border の色を、傾きは transform:rotate の角度を変更します。-3deg を 2deg などにすると傾く向きや強さが変わります。
長い文章を囲むとどうなりますか
囲み対象が長いと楕円が縦長や横長に伸びて不自然になります。数文字から数語程度の短いフレーズに使うのがおすすめです。