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

縦書き風サイドナビ(静的)

writing-modeを使い、文字を縦に流したサイド固定メニューの静止見本です。和風テイストを打ち出したいWordPressサイトの側面ナビに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-03-10-stage">
          <nav class="d03-03-10-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>
        </div>

CSS

.prev.d03-03-10{padding:0;display:block}
        .d03-03-10-stage{
          width:100%;height:100%;min-height:260px;
          display:flex;justify-content:flex-end;
          background:#f8fafc;
        }
        .d03-03-10-nav{
          writing-mode:vertical-rl;
          display:flex;gap:26px;align-items:center;justify-content:center;
          height:100%;padding:20px 14px;
          background:#fff;border-left:1px solid #e5e7eb;
        }
        .d03-03-10-nav a{
          color:#1f2937;
          text-decoration:none;
          font-size:13px;
          font-weight:600;
          letter-spacing:.15em;
        }

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