アプリバー App Bar
画面下部に固定されるナビゲーションバー。モバイルアプリの主要セクション間を移動する。
ライブデモ
ソースコード
<div class="demo-appbar-phone">
<div class="demo-appbar-screen" id="appbar-screen">
<div class="demo-appbar-page active" data-page="home">
<h3>ホーム</h3>
<p>メインフィードのコンテンツ</p>
</div>
<div class="demo-appbar-page" data-page="search">
<h3>検索</h3>
<p>検索画面のコンテンツ</p>
</div>
<div class="demo-appbar-page" data-page="add">
<h3>新規作成</h3>
<p>投稿作成画面のコンテンツ</p>
</div>
<div class="demo-appbar-page" data-page="notifications">
<h3>通知</h3>
<p>通知一覧のコンテンツ</p>
</div>
<div class="demo-appbar-page" data-page="profile">
<h3>プロフィール</h3>
<p>プロフィール画面のコンテンツ</p>
</div>
</div>
<nav class="demo-appbar">
<button class="demo-appbar-item active" data-target="home">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
<span>ホーム</span>
</button>
<button class="demo-appbar-item" data-target="search">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<span>検索</span>
</button>
<button class="demo-appbar-item demo-appbar-center" data-target="add">
<div class="demo-appbar-fab">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</div>
</button>
<button class="demo-appbar-item" data-target="notifications">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
<span>通知</span>
<span class="demo-appbar-badge">3</span>
</button>
<button class="demo-appbar-item" data-target="profile">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span>プロフィール</span>
</button>
</nav>
</div>.demo-appbar-phone { position: relative;
width: 100%; max-width: 360px; height: 320px;
border: 1px solid #e5e7eb; border-radius: 16px; overflow: visible;
display: flex; flex-direction: column; background: #fff; margin: 0 auto;
}
.demo-appbar-screen { flex: 1; overflow-y: auto; position: relative; }
.demo-appbar-page {
display: none; padding: 24px; text-align: center;
}
.demo-appbar-page.active { display: block; }
.demo-appbar-page h3 { margin: 0 0 8px; color: #111; font-size: 18px; }
.demo-appbar-page p { margin: 0; color: #888; font-size: 13px; }
.demo-appbar {
display: flex; align-items: flex-end; justify-content: space-around;
padding: 6px 0 10px; background: #fff;
border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.demo-appbar-item {
display: flex; flex-direction: column; align-items: center; gap: 2px;
border: none; background: none; cursor: pointer; color: #999;
font-size: 10px; padding: 4px 8px; position: relative;
transition: color 0.2s;
}
.demo-appbar-item.active { color: var(--ui-primary); }
.demo-appbar-item.active svg { stroke: var(--ui-primary); }
.demo-appbar-center { padding-top: 0; }
.demo-appbar-fab {
width: 44px; height: 44px; border-radius: 50%;
background: var(--ui-primary); display: flex; align-items: center;
justify-content: center; margin-bottom: 2px;
box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-primary) 40%, transparent);
transition: transform 0.2s;
}
.demo-appbar-fab svg { stroke: #fff; }
.demo-appbar-item.active .demo-appbar-fab { transform: scale(1.08); }
.demo-appbar-badge {
position: absolute; top: 0; right: 2px;
background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
width: 16px; height: 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}(function(){
document.querySelectorAll('.demo-appbar-item').forEach(function(item){
item.addEventListener('click', function(){
document.querySelectorAll('.demo-appbar-item').forEach(function(i){ i.classList.remove('active'); });
document.querySelectorAll('.demo-appbar-page').forEach(function(p){ p.classList.remove('active'); });
this.classList.add('active');
var target = this.dataset.target;
document.querySelector('.demo-appbar-page[data-page="'+target+'"]').classList.add('active');
});
});
})();AIプロンプト
Basic
アプリバー（ボトムナビゲーション）をHTML/CSS/JSで作ってください。5つのタブ（ホーム・検索・追加・通知・プロフィール）があり、タップで画面が切り替わります。
Custom
以下の仕様でアプリバーを実装してください。 - 5つのタブ（ホーム、検索、新規追加、通知、プロフィール） - 中央にFAB（浮遊アクションボタン）スタイルの追加ボタン - アクティブタブのアイコン色変更 - 通知バッジ（未読件数表示） - プライマリカラー: #2563eb - タブ切り替えアニメーション
Advanced
アクセシビリティ対応のアプリバーを実装してください。 - role="navigation" と aria-label を設定 - aria-current="page" でアクティブタブを示す - キーボードナビゲーション（矢印キーでタブ間移動） - タップ時のハプティックフィードバック（Vibration API） - Safe Area対応（env(safe-area-inset-bottom)） - ランドスケープモードでの横並びレイアウト - バッジ数の更新アニメーション