左側カラーバー付き見出し

解説

左側カラーバー付き見出しは、テキストの左に太い縦線を添えて視線を引き込むベーシックな見出し装飾です。実装は border-left に 5px solid の色を指定し、padding-left で線とテキストの間隔を空けるだけ。画像も JS も不要で、どんな見出しタグにもすぐ適用できます。縦線がインデントのアクセントになり、本文の中でも小見出しとして自然に目立ちます。

使いどころと調整

ブログのカテゴリ見出しや、記事中の段落を区切る小見出しに特に向きます。線の太さや色を変えるだけで印象が大きく変わるのが扱いやすいところです。

• 線の太さは border-left の 5px を増減
• 色はブランドカラーやカテゴリ別の色に変更
• 線とテキストの距離は padding-left で調整

CSS だけで完結し、見出しの階層（h2 や h3）を問わず流用できます。複数カテゴリで色を出し分ければ、記事内の構造が直感的に伝わります。動きのない静的な装飾なので表示も軽く、可読性を損なわずにメリハリを付けられる定番のスタイルです。

使用例・適したシーン

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