パーツ番号 05-04-12 ・ CSSのみ

自社 vs 業界平均バー

自社実績と業界平均を色分けした2本のバーで直接比較します。表示時に左から伸び、優位性を視覚的に訴求できます。WordPressの実績訴求セクションに。

scrollcss

プレビュー

ソースコード

HTML

<div class="d05-04-12-wrap">
          <div class="d05-04-12-row">
            <span class="d05-04-12-lbl">対応速度</span>
            <div class="d05-04-12-vs">
              <i class="d05-04-12-us" style="--w:78%"></i>
              <i class="d05-04-12-avg" style="--w:45%"></i>
            </div>
          </div>
          <div class="d05-04-12-row">
            <span class="d05-04-12-lbl">継続率</span>
            <div class="d05-04-12-vs">
              <i class="d05-04-12-us" style="--w:92%"></i>
              <i class="d05-04-12-avg" style="--w:60%"></i>
            </div>
          </div>
          <div class="d05-04-12-legend"><span><i class="d05-04-12-c1"></i>自社</span><span><i class="d05-04-12-c2"></i>業界平均</span></div>
        </div>

CSS

.d05-04-12-wrap{width:100%;max-width:280px}
        .d05-04-12-row{margin-bottom:16px}
        .d05-04-12-lbl{display:block;font-size:11px;color:#5a6273;margin-bottom:6px}
        .d05-04-12-vs{display:flex;flex-direction:column;gap:4px}
        .d05-04-12-vs i{display:block;height:12px;width:0;border-radius:0 6px 6px 0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
        .d05-04-12-us{background:linear-gradient(90deg,#2b5cff,#5a86ff)}
        .d05-04-12-avg{background:#cbd5e1}
        .d05-04-12.is-in .d05-04-12-vs i{width:var(--w)}
        .d05-04-12-legend{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:10px;color:#5a6273}
        .d05-04-12-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:middle}
        .d05-04-12-c1{background:#2b5cff}.d05-04-12-c2{background:#cbd5e1}

クラス名 .d05-04-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。