横帯 数字ストリップ

このパーツの使いどころと実装ポイント

このパーツは、黒背景の横長ストリップに4つの数字を等間隔で並べた実績アピール用の帯セクションです。display:grid に grid-template-columns:repeat(4,1fr) を指定して均等4分割し、各セルの右に border-right を引いて仕切りを作ります（最後のセルだけ :last-child で線を消す）。数字は 44px のセリフ体、単位の small と説明の span を添えて読み取りやすくしています。

向いている場面

「導入120社」「継続率98%」のような定量実績を一目で見せたいときに向きます。コーポレートサイトの会社概要、SaaSのLP、採用ページの強み紹介などで、信頼の裏付けを数字で押し出す差し込みブロックとして機能します。濃い背景なので明るいセクションの間に置くとメリハリが出ます。

カスタマイズと注意点

• 項目数を変えるなら repeat() の数値も合わせて変更します。3項目なら repeat(3,1fr) に。
• スマホでは4列が潰れるため、メディアクエリで repeat(2,1fr) の2行に折り返す設計が安全です。
• 数字は b タグですが、読み上げや意味付けを重視するなら見出しではなく定義リストにする手もあります。誇大な数値や根拠のない実績は載せないでください。