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

スマホ用検索結果一覧画面モック

検索バーの下にサムネイル付きの結果行を並べた静止画面です。検索ページのレイアウト確認用の見本として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-06-08-frame">
          <div class="d11-06-08-search"><span class="d11-06-08-mag"></span><span class="d11-06-08-ph">キーワードを検索</span></div>
          <div class="d11-06-08-row"><span class="d11-06-08-thumb"></span><div class="d11-06-08-txt"><p class="d11-06-08-t">検索結果A</p><p class="d11-06-08-s">説明テキストのサンプル</p></div></div>
          <div class="d11-06-08-row"><span class="d11-06-08-thumb"></span><div class="d11-06-08-txt"><p class="d11-06-08-t">検索結果B</p><p class="d11-06-08-s">説明テキストのサンプル</p></div></div>
          <div class="d11-06-08-row"><span class="d11-06-08-thumb"></span><div class="d11-06-08-txt"><p class="d11-06-08-t">検索結果C</p><p class="d11-06-08-s">説明テキストのサンプル</p></div></div>
        </div>

CSS

.d11-06-08-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; padding:12px; display:flex; flex-direction:column; gap:8px; }
        .d11-06-08-search{ display:flex; align-items:center; gap:6px; background:#f1f4f8; border-radius:8px; padding:6px 10px; }
        .d11-06-08-mag{ width:10px; height:10px; border:1.5px solid #9aa1ab; border-radius:50%; position:relative; }
        .d11-06-08-mag::after{ content:""; position:absolute; width:5px; height:1.5px; background:#9aa1ab; right:-4px; bottom:-1px; transform:rotate(45deg); }
        .d11-06-08-ph{ font-size:9px; color:#9aa1ab; }
        .d11-06-08-row{ display:flex; align-items:center; gap:8px; padding-top:6px; border-top:1px solid #f0f2f5; }
        .d11-06-08-thumb{ width:26px; height:26px; border-radius:6px; background:#dbe4f5; flex:0 0 auto; }
        .d11-06-08-t{ margin:0; font-size:10px; font-weight:700; color:#1f2328; }
        .d11-06-08-s{ margin:1px 0 0; font-size:8.5px; color:#8792a2; }

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