パーツ番号 11-12-08 ・ CSSのみ

イラスト付きウェルカムスプラッシュ(静止)

やわらかい色のイラストと短い挨拶文だけを配置した起動画面。地域コミュニティサイトなど親しみやすさを重視するPWAの初回表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-08-wrap">
          <svg viewBox="0 0 120 90" width="120" height="90">
            <circle cx="60" cy="40" r="30" fill="#fef3c7"/>
            <path d="M32 66c4-18 12-26 28-26s24 8 28 26" fill="#fde68a"/>
            <circle cx="60" cy="32" r="12" fill="#f59e0b"/>
            <path d="M46 66h28" stroke="#fbbf24" stroke-width="4" stroke-linecap="round"/>
          </svg>
          <p class="d11-12-08-t">ようこそ</p>
        </div>

CSS

.d11-12-08{ background:#fffbeb; padding:0; }
        .d11-12-08-wrap{ text-align:center; }
        .d11-12-08-t{ margin:6px 0 0; font-size:14px; font-weight:700; color:#92400e; }

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