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

ログイン選択肢付き起動画面(静止)

ロゴ下にメール・Google・Appleの3つのログイン導線ボタンを並べた起動直後の画面です。会員制WordPressサイトの初回起動〜ログイン誘導の流れを検討する際の見本に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-12-wrap">
          <div class="d11-12-12-logo">M</div>
          <p class="d11-12-12-name">Machiko</p>
          <div class="d11-12-12-btns">
            <span class="d11-12-12-btn d11-12-12-btn-main">メールで始める</span>
            <span class="d11-12-12-btn">Googleで続ける</span>
            <span class="d11-12-12-btn">Appleで続ける</span>
          </div>
        </div>

CSS

.d11-12-12{ background:#0f172a; padding:0; }
        .d11-12-12-wrap{ width:100%; max-width:220px; text-align:center; }
        .d11-12-12-logo{ width:50px; height:50px; margin:0 auto; border-radius:14px; background:#f59e0b; color:#1f2937; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; }
        .d11-12-12-name{ margin:10px 0 18px; font-size:14px; font-weight:700; color:#f1f5f9; }
        .d11-12-12-btns{ display:flex; flex-direction:column; gap:8px; }
        .d11-12-12-btn{ font-size:11px; font-weight:700; color:#e2e8f0; background:#1e293b; border:1px solid #334155; border-radius:9px; padding:9px 0; }
        .d11-12-12-btn-main{ background:#f59e0b; color:#1f2937; border-color:#f59e0b; }

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