アプリバー
モバイル画面上部のアプリバー。左に戻る（またはメニュー）、中央にタイトル、右にアクションアイコンを置く。スクロールしても追従する想定のヘッダー。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- モバイル画面上部の戻る＋タイトル＋操作
- タイトルを中央に置く詳細画面
- スクロールしても上部に残す操作列
- 避ける場面
- PCの広いヘッダー（ナビリンクを並べる方がよい）
- 操作アイコンが4個以上で詰まる
- タイトルが長く省略で意味を失う
- 構成要素
- バー
- 戻るボタン
- タイトル
- アクションアイコン
- 本文
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で戻る・検索・その他へ移動・Enter／Space で実行（button 標準）
- 支援技術
アイコンボタンは aria-label 付き（SVG は aria-hidden）、タイトルは h1 で読み上げ順の先頭・aria-live でデモの差し替えを告知。focus-visible の輪郭。実ページでは sticky＋safe-area-inset-top。reduced-motion 対応
- 動き
アイコン背景 0.15s（ホバー・押下）。デモのタイトル差し替えは即時（1.5秒後に戻る）
デザインの要点
- タイトルは flex:1＋text-align:center で中央に寄せる。左右のアイコン数が違っても、見た目の中央が画面の中央に来る
- アイコンボタンは 40px 角の円。ホバーと押下で背景の濃さを変え、白一色のバーでも「押せる場所」が分かる
- 戻るは左端、破壊的でない操作は右端に固定する。位置が画面ごとに変わると親指が覚えない
- タイトルは 1 行で ellipsis。2 行に折り返すとバーの高さが変わり、下の本文がずれる
実装メモ
プレビューでは枠内に画面を再現するため .ab-bar を通常フローに置いています。実ページで常に上部へ固定するなら .ab-bar を position:sticky; top:0（または fixed）にし、safe-area-inset-top でノッチぶんの余白を確保してください。タイトルは flex:1＋text-align:center で中央寄せ、左右のアイコン領域が非対称でも見た目が中央に来るようにしています。
コード（コピーして使えます）
<div class="ab-screen">
<header class="ab-bar">
<button class="ab-icon" id="ab-back" aria-label="戻る">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15,5 8,12 15,19"/></svg>
</button>
<h1 class="ab-title" aria-live="polite">受信トレイ</h1>
<div class="ab-actions">
<button class="ab-icon" aria-label="検索">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
</button>
<button class="ab-icon" id="ab-more" aria-label="その他">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></svg>
</button>
</div>
</header>
<div class="ab-body">
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
<div class="ab-row"><span class="ab-dot"></span><div class="ab-lines"><span class="ab-l1"></span><span class="ab-l2"></span></div></div>
</div>
</div>