パーツ番号 11-06-07 ・ CSSのみ

スマホ用フォーム入力画面モック

ラベルと入力欄を縦に並べた問い合わせフォーム風の静止画面です。プラグイン導入前のフォームレイアウト検討に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-06-07-frame">
          <div class="d11-06-07-title">お問い合わせ</div>
          <label class="d11-06-07-field"><span>お名前</span><span class="d11-06-07-input"></span></label>
          <label class="d11-06-07-field"><span>メールアドレス</span><span class="d11-06-07-input"></span></label>
          <label class="d11-06-07-field"><span>内容</span><span class="d11-06-07-input tall"></span></label>
          <span class="d11-06-07-btn">送信する</span>
        </div>

CSS

.d11-06-07-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; padding:14px; display:flex; flex-direction:column; gap:7px; }
        .d11-06-07-title{ font-size:12px; font-weight:700; color:#1f2328; margin-bottom:2px; }
        .d11-06-07-field{ display:flex; flex-direction:column; gap:3px; }
        .d11-06-07-field span:first-child{ font-size:9px; color:#8792a2; }
        .d11-06-07-input{ height:18px; border-radius:6px; background:#f1f4f8; border:1px solid #e2e8f0; }
        .d11-06-07-input.tall{ height:34px; }
        .d11-06-07-btn{ margin-top:auto; text-align:center; background:#2f6fed; color:#fff; font-size:11px; font-weight:700; border-radius:8px; padding:8px; }

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