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

空の検索結果イラスト(静止)

虫眼鏡モチーフで検索結果が0件だったことを伝える静止イラスト。サイト内検索やフィルター結果の空状態表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-01-wrap">
          <svg class="d09-08-01-svg" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="52" cy="50" r="30" stroke="#c7ccd6" stroke-width="6"/>
            <line x1="74" y1="72" x2="98" y2="96" stroke="#c7ccd6" stroke-width="7" stroke-linecap="round"/>
            <line x1="40" y1="50" x2="64" y2="50" stroke="#e1e4ea" stroke-width="5" stroke-linecap="round"/>
          </svg>
          <p class="d09-08-01-text">検索結果が見つかりませんでした</p>
          <p class="d09-08-01-sub">別のキーワードでお試しください</p>
        </div>

CSS

.d09-08-01-wrap{ text-align:center; }
        .d09-08-01-svg{ width:88px; height:88px; margin:0 auto 14px; display:block; }
        .d09-08-01-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-01-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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