パーツ番号 03-13-02 ・ CSSのみ

下部固定水平タブバー

スマートフォンアプリのような画面下部に固定される水平アイコンタブバーの静止見本です。WordPressのモバイル向けフッターナビに応用できます。

staticcss

プレビュー

ソースコード

HTML

<nav class="d03-13-02-bar">
          <a href="#" onclick="return false" class="active" aria-label="ホーム">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l8-8 8 8M6 10v10h12V10"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="検索">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="投稿">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="3"/><path d="M12 9v6M9 12h6"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="通知">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 004 0"/></svg>
          </a>
          <a href="#" onclick="return false" aria-label="マイページ">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg>
          </a>
        </nav>

CSS

.prev.d03-13-02{padding:0;display:flex;align-items:flex-end;justify-content:center}
        .d03-13-02-bar{
          width:100%;display:flex;align-items:center;justify-content:space-around;
          padding:14px 10px;background:#fff;border-top:1px solid #e5e7eb;
          box-shadow:0 -2px 8px rgba(0,0,0,.04);
        }
        .d03-13-02-bar a{
          display:flex;align-items:center;justify-content:center;
          color:#94a3b8;text-decoration:none;
        }
        .d03-13-02-bar a.active{color:#2563eb}

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