パーツ番号 09-08-04 ・ CSSのみ

データなしグラフイラスト

点線の棒グラフ枠で集計データが未取得であることを伝える静止イラスト。ダッシュボードやレポート画面の空状態に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-04-wrap">
          <div class="d09-08-04-chart">
            <span class="d09-08-04-axis-y"></span>
            <span class="d09-08-04-axis-x"></span>
            <span class="d09-08-04-bar b1"></span>
            <span class="d09-08-04-bar b2"></span>
            <span class="d09-08-04-bar b3"></span>
          </div>
          <p class="d09-08-04-text">データがまだありません</p>
        </div>

CSS

.d09-08-04-wrap{ text-align:center; }
        .d09-08-04-chart{ position:relative; width:100px; height:70px; margin:0 auto 14px; }
        .d09-08-04-axis-y{ position:absolute; left:0; top:0; bottom:0; width:2px; background:#d7dbe3; }
        .d09-08-04-axis-x{ position:absolute; left:0; right:0; bottom:0; height:2px; background:#d7dbe3; }
        .d09-08-04-bar{ position:absolute; bottom:2px; width:16px; border:2px dashed #d7dbe3; border-bottom:none; background:transparent; }
        .d09-08-04-bar.b1{ left:16px; height:28px; }
        .d09-08-04-bar.b2{ left:42px; height:44px; }
        .d09-08-04-bar.b3{ left:68px; height:18px; }
        .d09-08-04-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }

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