先頭ドット付き見出し
テキストの左に小さな円のドットを添えた見出しです。 ::before 疑似要素で width ／ height 10px の正円を作り、 border-radius:50% で丸めています。本体は display:inline-flex と align-items:center で文字とドットを縦中央に揃え、 ga…
解説
テキストの左に小さな円のドットを添えた見出しです。::before 疑似要素で width／height 10px の正円を作り、border-radius:50% で丸めています。本体は display:inline-flex と align-items:center で文字とドットを縦中央に揃え、gap で間隔を確保。ドットには box-shadow:0 0 0 4px の薄いリングを重ね、ステータスランプのような印象を出しています。画像も JS も使わず CSS だけで完結します。
使いどころ
- SaaS ダッシュボードの「Active Users」など指標ラベルの先頭
- 「オンライン」「稼働中」といった状態を示す小見出し
- カード上部のセクションタイトル
ドットの background を変えれば緑＝正常・赤＝異常など状態色に対応できます。box-shadow のリング色はドットと同系の薄い値に揃えると自然です。色だけで状態を伝えると色覚特性のある人に伝わりにくいため、隣接テキストでも状態が分かるようにしておくと安心です。text-transform:uppercase と letter-spacing を外せば日本語見出しにも馴染みます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
ドットの色や大きさは変えられますか
変えられます。色は ::before の background を、大きさは width と height の値を編集してください。リング部分は box-shadow の 4px とその色を調整します。
JavaScript は必要ですか
不要です。疑似要素とインラインフレックスだけで描画しているため、CSS のみで動作します。