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

スマホ設定画面リスト風モック

アイコン・ラベル・矢印を横並びにした設定項目リストの静止画面です。マイページの設定メニュー構成の見本にできます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-06-03-frame">
          <div class="d11-06-03-title">設定</div>
          <div class="d11-06-03-row"><span class="d11-06-03-ic"></span><span class="d11-06-03-label">アカウント</span><span class="d11-06-03-chev">›</span></div>
          <div class="d11-06-03-row"><span class="d11-06-03-ic"></span><span class="d11-06-03-label">通知</span><span class="d11-06-03-chev">›</span></div>
          <div class="d11-06-03-row"><span class="d11-06-03-ic"></span><span class="d11-06-03-label">プライバシー</span><span class="d11-06-03-chev">›</span></div>
          <div class="d11-06-03-row"><span class="d11-06-03-ic"></span><span class="d11-06-03-label">ヘルプ</span><span class="d11-06-03-chev">›</span></div>
        </div>

CSS

.d11-06-03-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; padding:14px 12px; }
        .d11-06-03-title{ font-size:13px; font-weight:700; color:#1f2328; margin-bottom:8px; }
        .d11-06-03-row{ display:flex; align-items:center; gap:8px; padding:8px 2px; border-top:1px solid #f0f2f5; }
        .d11-06-03-ic{ width:16px; height:16px; border-radius:5px; background:#dbe4f5; flex:0 0 auto; }
        .d11-06-03-label{ flex:1; font-size:11px; color:#334155; }
        .d11-06-03-chev{ color:#c7cbd1; font-size:13px; }

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