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

メール登録欄付きフッター

ロゴ・コピーライトと並べてメールアドレス入力欄風の登録フォームを配置した構成です。WordPressのメルマガ購読導線をフッターに常設したい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<footer class="d01-08-11-ft">
          <div class="d01-08-11-row">
            <div class="d01-08-11-copy-block">
              <span class="d01-08-11-logo">News Letter Co.</span>
              <span class="d01-08-11-copy">&copy; 2026 News Letter Co.</span>
            </div>
            <div class="d01-08-11-form">
              <span class="d01-08-11-input">example@mail.com</span>
              <span class="d01-08-11-btn">登録</span>
            </div>
          </div>
        </footer>

CSS

.prev.d01-08-11{padding:0;display:block}
        .d01-08-11-ft{height:100%;box-sizing:border-box;background:#101828;color:#cbd5e1;padding:0 22px;display:flex;align-items:center}
        .d01-08-11-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
        .d01-08-11-copy-block{display:flex;flex-direction:column;gap:4px}
        .d01-08-11-logo{color:#fff;font-weight:700;font-size:13px}
        .d01-08-11-copy{color:#8a97a6;font-size:10px}
        .d01-08-11-form{display:flex;gap:6px}
        .d01-08-11-input{padding:8px 12px;background:#1e293b;border-radius:6px;font-size:11px;color:#94a3b8}
        .d01-08-11-btn{padding:8px 16px;background:#6366f1;border-radius:6px;font-size:11px;font-weight:700;color:#fff}

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