パーツ番号 03-03-12 ・ CSSのみ

検索ボックス付きヘッダーナビ

ロゴ・メニューに加えて右端に検索欄風の要素を配置したヘッダー見本です。WordPressのECサイトやメディアサイトの商品・記事検索導線に向いています。

staticcss

プレビュー

ソースコード

HTML

<header class="d03-03-12-bar">
          <span class="d03-03-12-logo">SHOPLOGO</span>
          <nav class="d03-03-12-nav">
            <a href="#" onclick="return false">ホーム</a>
            <a href="#" onclick="return false">商品一覧</a>
            <a href="#" onclick="return false">お知らせ</a>
          </nav>
          <div class="d03-03-12-search">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span>検索...</span>
          </div>
        </header>

CSS

.prev.d03-03-12{padding:0;display:block}
        .d03-03-12-bar{
          display:flex;align-items:center;gap:24px;
          width:100%;height:100%;min-height:260px;padding:0 20px;
          background:#fff;border-bottom:1px solid #e5e7eb;
        }
        .d03-03-12-logo{font-weight:800;font-size:15px;color:#111827;letter-spacing:.06em}
        .d03-03-12-nav{display:flex;gap:18px;flex:1}
        .d03-03-12-nav a{color:#334155;text-decoration:none;font-size:12.5px;font-weight:600}
        .d03-03-12-search{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#f1f5f9;color:#94a3b8;font-size:11.5px}

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