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

左ロゴ+右メニューナビ

左にロゴ、右にメニュー項目を配置する定番構成の静止見本です。WordPressのヘッダーテンプレートとして最も採用されやすい基本形です。

staticcss

プレビュー

ソースコード

HTML

<header class="d03-03-05-bar">
          <span class="d03-03-05-logo">LOGO</span>
          <nav class="d03-03-05-nav">
            <a href="#" onclick="return false">ホーム</a>
            <a href="#" onclick="return false">サービス</a>
            <a href="#" onclick="return false">実績</a>
            <a href="#" onclick="return false">お問い合わせ</a>
          </nav>
        </header>

CSS

.prev.d03-03-05{padding:0;display:block}
        .d03-03-05-bar{
          display:flex;align-items:center;justify-content:space-between;
          width:100%;height:100%;min-height:260px;padding:0 22px;
          background:#fff;border-bottom:1px solid #e5e7eb;
        }
        .d03-03-05-logo{
          font-weight:800;
          letter-spacing:.12em;
          color:#111827;
          font-size:16px;
        }
        .d03-03-05-nav{display:flex;gap:22px}
        .d03-03-05-nav a{
          color:#334155;
          text-decoration:none;
          font-size:13px;
          font-weight:600;
        }

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