パーツ番号 06-10-11 ・ CSSのみ

横型ステップスケール目盛り読了メーター

定規の目盛りのようなスケールに現在地点を三角マーカーで示す静止メーターです。長文マニュアルや白書のようなコンテンツで、全体に対する現在位置を直感的に伝えられます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-10-11-wrap">
          <p class="d06-10-11-label">読了メーター</p>
          <div class="d06-10-11-scale">
            <div class="d06-10-11-ticks">
              <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
            </div>
            <div class="d06-10-11-fill"></div>
            <div class="d06-10-11-marker"><span class="d06-10-11-marker-tip"></span></div>
          </div>
          <p class="d06-10-11-sub">現在地点：全体の65%</p>
        </div>

CSS

.d06-10-11-wrap{width:100%;max-width:280px;font-family:sans-serif}
        .d06-10-11-label{margin:0 0 12px;font-size:12.5px;font-weight:bold;color:#222}
        .d06-10-11-scale{position:relative;height:26px}
        .d06-10-11-ticks{position:absolute;left:0;right:0;top:10px;height:6px;background:#eef0f7;border-radius:3px;display:flex;justify-content:space-between;padding:0 1px;box-sizing:border-box}
        .d06-10-11-ticks span{width:1px;height:6px;background:#d7dae5}
        .d06-10-11-fill{position:absolute;left:0;top:10px;height:6px;width:65%;background:linear-gradient(90deg,#4a6fd8,#7c93e8);border-radius:3px}
        .d06-10-11-marker{position:absolute;left:65%;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
        .d06-10-11-marker-tip{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #2c3e6b}
        .d06-10-11-sub{margin:10px 0 0;font-size:10.5px;color:#888}

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