パーツ番号 11-09-05 ・ CSSのみ

オフライン表示ページ

斜線入りの雲アイコンで通信断を表現した静止のオフライン画面。PWA化したWordPressサイトのオフライン表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-05-wrap">
          <svg class="d11-09-05-cloud" width="64" height="44" viewBox="0 0 64 44" fill="none">
            <path d="M18 34a11 11 0 0 1-2-21.8A14 14 0 0 1 43 10a10 10 0 0 1 3 19.5" stroke="#cbd5e1" stroke-width="2.2" fill="#f8fafc"/>
            <line x1="12" y1="6" x2="48" y2="38" stroke="#f87171" stroke-width="2.4" stroke-linecap="round"/>
          </svg>
          <div class="d11-09-05-title">接続がありません</div>
          <p class="d11-09-05-text">インターネット接続を確認してください</p>
        </div>

CSS

.d11-09-05-wrap{ text-align:center; }
        .d11-09-05-cloud{ display:block; margin:0 auto 14px; }
        .d11-09-05-title{ font-size:16px; font-weight:700; color:#374151; }
        .d11-09-05-text{ margin-top:8px; font-size:12px; color:#9ca3af; }

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