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

接続エラー・オフラインイラスト(静止)

雲と断線した線でネットワーク未接続の状態を伝える静止イラスト。オフライン時のエラー画面や通信失敗の案内に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-06-wrap">
          <svg class="d09-08-06-svg" viewBox="0 0 120 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M32 58 a18 18 0 1 1 4-35.6 A22 22 0 0 1 78 34 a16 16 0 0 1 -2 32 H32 a16 16 0 0 1 0-8" stroke="#c7ccd6" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"/>
            <line x1="26" y1="70" x2="42" y2="54" stroke="#c7ccd6" stroke-width="5" stroke-linecap="round"/>
            <line x1="46" y1="70" x2="62" y2="54" stroke="#c7ccd6" stroke-width="5" stroke-linecap="round"/>
          </svg>
          <p class="d09-08-06-text">接続できません</p>
          <p class="d09-08-06-sub">ネットワーク環境をご確認ください</p>
        </div>

CSS

.d09-08-06-wrap{ text-align:center; }
        .d09-08-06-svg{ width:96px; height:72px; margin:0 auto 12px; display:block; }
        .d09-08-06-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-06-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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