パーツ番号 11-06-02 ・ CSSのみ

ボトムタブナビ(固定・アクティブ表示)

画面下部に固定した4項目のタブバーで、1項目のみを選択中の色で示した静止状態です。アプリ風サイトの下部ナビ見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-06-02-frame">
          <div class="d11-06-02-body">
            <div class="d11-06-02-line"></div>
            <div class="d11-06-02-line short"></div>
          </div>
          <div class="d11-06-02-tabs">
            <div class="d11-06-02-tab on"><i></i><span>ホーム</span></div>
            <div class="d11-06-02-tab"><i></i><span>検索</span></div>
            <div class="d11-06-02-tab"><i></i><span>お気に入り</span></div>
            <div class="d11-06-02-tab"><i></i><span>マイページ</span></div>
          </div>
        </div>

CSS

.d11-06-02-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
        .d11-06-02-body{ flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:8px; }
        .d11-06-02-line{ height:9px; border-radius:4px; background:#e6e9ee; width:100%; }
        .d11-06-02-line.short{ width:55%; }
        .d11-06-02-tabs{ display:flex; border-top:1px solid #eceef1; background:#fafbfc; }
        .d11-06-02-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 9px; color:#9aa1ab; }
        .d11-06-02-tab i{ width:14px; height:14px; border-radius:4px; background:#c7cbd1; }
        .d11-06-02-tab span{ font-size:8px; }
        .d11-06-02-tab.on{ color:#2f6fed; }
        .d11-06-02-tab.on i{ background:#2f6fed; border-radius:50%; }

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