パーツ番号 01-10-10 ・ CSSのみ

縦積みモバイル向けダッシュボード構成

カードが縦一列に並ぶシンプルな構成。スマートフォン幅の会員マイページで数値情報を上から順に確認させたい場合に適する。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-10-phone">
          <div class="d01-10-10-bar"></div>
          <div class="d01-10-10-card"><span></span><b></b></div>
          <div class="d01-10-10-card"><span></span><b></b></div>
          <div class="d01-10-10-card"><span></span><b></b></div>
        </div>

CSS

.prev.d01-10-10{padding:20px;align-items:center;background:#f4f5f7}
        .d01-10-10-phone{width:150px;display:flex;flex-direction:column;gap:10px;font-family:sans-serif}
        .d01-10-10-bar{height:14px;width:70%;border-radius:4px;background:#334155;margin-bottom:4px}
        .d01-10-10-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:6px}
        .d01-10-10-card span{width:50%;height:7px;border-radius:4px;background:#cbd5e1;display:block}
        .d01-10-10-card b{width:40%;height:12px;border-radius:4px;background:#38bdf8;display:block}

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