ドット下線アクセント見出し

解説

ドット下線アクセント見出しは、テキストの下に点線を引いて親しみやすさを出す見出し装飾です。実装は border-bottom に 3px dotted を指定するだけで、ブラウザが等間隔の丸い点を自動で描きます。点線とテキストの間隔は padding-bottom で確保し、暖色のアクセントカラーで柔らかい雰囲気を作っています。画像も JS も使わず、CSS だけで軽快に表示できるのが利点です。

調整のポイント

• 点の大きさは線の太さ（3px）で変わる
• 色は border-bottom のカラー指定を変更
• 点の間隔はブラウザ依存のため、細かく制御したい時は linear-gradient 等の代替手法を検討

教育・キッズ・カフェなど、堅すぎず親しみやすい印象を出したいサイトのセクション見出しに向きます。dotted の点の密度はブラウザによって多少見え方が変わるため、複数ブラウザで確認しておくと安心です。動きのない静的な装飾なので、視覚的な負担やパフォーマンスの心配がほとんどなく、初心者でも扱いやすいスタイルです。

使用例・適したシーン

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