実績数字 4 列セクション
導入企業数や継続率などの実績を、濃い背景の帯に横一列で並べて信頼感を出すセクションです。レイアウトは grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) で組まれ、画面幅に応じて 4 列から 2 列・1 列へ自動で折り返します。
解説
導入企業数や継続率などの実績を、濃い背景の帯に横一列で並べて信頼感を出すセクションです。レイアウトは grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) で組まれ、画面幅に応じて 4 列から 2 列・1 列へ自動で折り返します。数字は background-clip:text でグラデーションを文字に流し込み、単位（%・年など）は small で別の色に分けています。桁ぞろえには font-variant-numeric:tabular-nums を使い、数字の幅を揃えています。JavaScript は使わず、CSS のみで成立します。
使う場面
- LP やコーポレートサイトの実績・信頼セクション
- サービスの利用者数や満足度の提示
- 製品ページの主要スペックを数値で見せる帯
項目は HTML の div を足し引きするだけで増減でき、auto-fit が幅を均します。グラデーション文字は表示できない古い環境では透明になり得るため、単位側に -webkit-text-fill-color で実色を指定して保険をかけています。背景色と数字のグラデーションを差し替えるだけで雰囲気が変わります。数字だけでは意味が伝わらないので、ラベル（導入企業など）は必ず添えてください。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
数字のグラデーションが効かない環境があります。
background-clip:text は一部の古いブラウザで未対応で、文字が透明になることがあります。最新 2 世代のブラウザでは問題ありませんが、心配な場合は単位側のように -webkit-text-fill-color で実色を指定しておくと、未対応時も読める色で表示されます。
項目数を 4 から 3 に減らせますか？
はい。HTML 内の div を 1 つ削除するだけで構いません。auto-fit のグリッドが残りの 3 項目を均等幅に並べ直します。CSS の列指定を書き換える必要はありません。