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

センター配置ナビ

ロゴを置かず、メニュー項目だけを画面中央に整列させた構成です。WordPressのシンプルなランディングページのヘッダーに適した見た目です。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-03-04-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>
          <a href="#" onclick="return false">お問い合わせ</a>
        </nav>

CSS

.prev.d03-03-04{padding:0;display:block}
        .d03-03-04-nav{
          display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
          width:100%;height:100%;min-height:260px;background:#fff;
          border-bottom:1px solid #e5e7eb;
        }
        .d03-03-04-nav a{
          color:#334155;
          text-decoration:none;
          font-size:13px;
          font-weight:700;
          letter-spacing:.05em;
        }

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