このページの中身

実績数字の帯

LPの節 ／ パターン集トップ

実績数字の帯。桁を揃え、単位とラベルは小さく添える

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="stats-band" id="results" aria-label="実績">
  <dl class="stats-band__list page">
    <div class="stats-band__item">
      <dt>焙煎歴</dt>
      <dd><span class="stats-band__num">18</span><span class="stats-band__unit">年</span></dd>
    </div>
    <div class="stats-band__item">
      <dt>年間の提供数</dt>
      <dd><span class="stats-band__num">28,000</span><span class="stats-band__unit">杯</span></dd>
    </div>
    <div class="stats-band__item">
      <dt>取り扱う産地</dt>
      <dd><span class="stats-band__num">9</span><span class="stats-band__unit">か国</span></dd>
    </div>
  </dl>
</section>
.stats-band {
  background: color-mix(in srgb, var(--color-accent) var(--stats-mix, 12%), var(--color-bg));
  border-block: 1px solid var(--color-border);
}
.stats-band__list {
  margin: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding-block: var(--space-7);
  text-align: center;
}
.stats-band__item {
  display: flex;
  flex-direction: column-reverse;   /* DOMはラベルが先、見た目は数字が先 */
  gap: var(--space-1);
}
.stats-band__item dt {
  font-size: var(--text-sm);
  color: var(--color-text);
}
.stats-band__item dd {
  margin: 0;
}
.stats-band__num {
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stats-band__unit {
  font-size: var(--text-base);
  font-weight: 700;
  margin-inline-start: var(--space-1);
}

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。