← 静的パーツギャラリーへ戻る

パーツ番号 05-12-02 ・ CSSのみ

折れ線グラフ(SVGポリラインの静止ビジュアル)

SVGのpolylineとcircleだけで描いた固定表示の折れ線グラフです。週間推移のイメージを伝える装飾グラフィックとして紹介ページのサンプル表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-02-wrap">
          <svg class="d05-12-02-svg" viewBox="0 0 300 140" preserveAspectRatio="none">
            <line x1="0" y1="35" x2="300" y2="35" stroke="#eef1f5" stroke-width="1"></line>
            <line x1="0" y1="70" x2="300" y2="70" stroke="#eef1f5" stroke-width="1"></line>
            <line x1="0" y1="105" x2="300" y2="105" stroke="#eef1f5" stroke-width="1"></line>
            <line x1="0" y1="139" x2="300" y2="139" stroke="#cbd5e1" stroke-width="1.5"></line>
            <polyline points="10,110 65,80 120,95 175,45 230,60 290,20" fill="none" stroke="#3b82f6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>
            <circle cx="10" cy="110" r="4" fill="#3b82f6"></circle>
            <circle cx="65" cy="80" r="4" fill="#3b82f6"></circle>
            <circle cx="120" cy="95" r="4" fill="#3b82f6"></circle>
            <circle cx="175" cy="45" r="4" fill="#3b82f6"></circle>
            <circle cx="230" cy="60" r="4" fill="#3b82f6"></circle>
            <circle cx="290" cy="20" r="4" fill="#3b82f6"></circle>
          </svg>
          <div class="d05-12-02-axis"><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span></div>
        </div>

CSS

.d05-12-02{padding:20px;align-items:stretch}
        .d05-12-02-wrap{width:100%;display:flex;flex-direction:column;gap:6px}
        .d05-12-02-svg{width:100%;height:150px;display:block}
        .d05-12-02-axis{display:flex;justify-content:space-between;padding:0 4px}
        .d05-12-02-axis span{font-size:10px;color:#94a3b8;font-weight:600}

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