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

左右2カラムの分析画面構成

左に棒グラフ、右に項目リストを並列配置する分析画面の骨格。売上分析ページやレポート画面のレイアウトサンプルに適する。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-04-wrap">
          <div class="d01-10-04-graph">
            <span class="d01-10-04-gtitle"></span>
            <div class="d01-10-04-bars">
              <i style="height:40%"></i><i style="height:70%"></i><i style="height:55%"></i><i style="height:90%"></i><i style="height:35%"></i><i style="height:65%"></i>
            </div>
          </div>
          <div class="d01-10-04-list">
            <span class="d01-10-04-ltitle"></span>
            <div class="d01-10-04-row"><i></i><span></span></div>
            <div class="d01-10-04-row"><i></i><span></span></div>
            <div class="d01-10-04-row"><i></i><span></span></div>
            <div class="d01-10-04-row"><i></i><span></span></div>
          </div>
        </div>

CSS

.prev.d01-10-04{padding:16px;align-items:stretch}
        .d01-10-04-wrap{display:flex;gap:12px;width:100%;font-family:sans-serif}
        .d01-10-04-graph{flex:1.4;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}
        .d01-10-04-gtitle{display:block;width:100px;height:10px;border-radius:4px;background:#334155}
        .d01-10-04-bars{flex:1;display:flex;align-items:flex-end;gap:8px}
        .d01-10-04-bars i{flex:1;background:#38bdf8;border-radius:4px 4px 0 0;display:block}
        .d01-10-04-list{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px}
        .d01-10-04-ltitle{display:block;width:70px;height:10px;border-radius:4px;background:#334155;margin-bottom:2px}
        .d01-10-04-row{display:flex;align-items:center;gap:8px}
        .d01-10-04-row i{width:16px;height:16px;border-radius:4px;background:#a78bfa;display:block}
        .d01-10-04-row span{flex:1;height:8px;border-radius:4px;background:#e2e8f0;display:block}

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