パーツ番号 06-03-02 ・ CSSのみ

スキルバー(横棒)

各スキルの習熟度を横バーで表示。画面内に入ると左から伸びます(io-reveal)。プロフィールページの得意分野の可視化に。

scrollcss

プレビュー

ソースコード

HTML

<div class="d06-03-02-wrap io-reveal">
          <div class="d06-03-02-row"><span class="d06-03-02-lbl">JavaScript</span><span class="d06-03-02-track"><i style="--w:92%"></i></span></div>
          <div class="d06-03-02-row"><span class="d06-03-02-lbl">CSS / HTML</span><span class="d06-03-02-track"><i style="--w:88%"></i></span></div>
          <div class="d06-03-02-row"><span class="d06-03-02-lbl">UIデザイン</span><span class="d06-03-02-track"><i style="--w:75%"></i></span></div>
          <div class="d06-03-02-row"><span class="d06-03-02-lbl">WordPress</span><span class="d06-03-02-track"><i style="--w:83%"></i></span></div>
        </div>

CSS

.d06-03-02-wrap{width:230px;display:flex;flex-direction:column;gap:14px}
        .d06-03-02-row{display:flex;flex-direction:column;gap:6px}
        .d06-03-02-lbl{font-size:13px;color:#3a4666;font-weight:600}
        .d06-03-02-track{height:9px;background:#e6eaf3;border-radius:99px;overflow:hidden}
        .d06-03-02-track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#5ac8fa,#6a8dff);transition:width 1s cubic-bezier(.2,.8,.2,1)}
        .d06-03-02-wrap.is-in .d06-03-02-track i{width:var(--w)}

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