FAB (フローティングアクションボタン) FAB (Floating Action Button)
画面の固定位置に浮遊する丸型ボタン。最も重要なアクションを配置する。
ライブデモ
スクロールするコンテンツ領域です。右下にFABが表示されています。
ソースコード
<div class="demo-fab-container">
<div class="demo-fab-content">
<p>スクロールするコンテンツ領域です。右下にFABが表示されています。</p>
</div>
<button class="demo-fab" aria-label="新規作成">
<svg width="24" height="24" 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>
</button>
<div class="demo-fab-actions" style="display:none;">
<button class="demo-fab-mini" aria-label="画像"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></button>
<button class="demo-fab-mini" aria-label="ファイル"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></button>
<button class="demo-fab-mini" aria-label="リンク"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></button>
</div>
</div>.demo-fab-container { position: relative; min-height: 150px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; }
.demo-fab-content p { font-size: 14px; color: #666; }
.demo-fab {
position: absolute; bottom: 20px; right: 20px;
width: 52px; height: 52px; border-radius: 50%;
background: var(--ui-primary); color: #fff; border: none;
cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-primary) 40%, transparent);
transition: transform 0.3s, box-shadow 0.2s; z-index: 10;
}
.demo-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px color-mix(in srgb, var(--ui-primary) 50%, transparent); }
.demo-fab.open { transform: rotate(45deg); }
.demo-fab-actions {
position: absolute; bottom: 80px; right: 28px;
display: flex; flex-direction: column-reverse; gap: 10px;
z-index: 10;
}
.demo-fab-mini {
width: 40px; height: 40px; border-radius: 50%;
background: #fff; border: 1px solid #e5e7eb; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); color: var(--ui-primary);
transition: transform 0.2s, box-shadow 0.2s;
animation: demo-fab-pop 0.2s ease-out;
}
.demo-fab-mini:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
@keyframes demo-fab-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }(function(){
const fab = document.querySelector('.demo-fab');
const actions = document.querySelector('.demo-fab-actions');
fab.addEventListener('click', function() {
const isOpen = this.classList.toggle('open');
actions.style.display = isOpen ? 'flex' : 'none';
});
})();AIプロンプト
Basic
フローティングアクションボタン（FAB）をHTML/CSS/JSで作ってください。画面右下に固定表示される丸いボタンです。
Custom
以下の仕様でFABを実装してください。 - 画面右下に固定配置 - プライマリカラー: #2563eb - クリックで展開（複数のミニFABが表示） - +アイコンが×に回転変形 - シャドウ + ホバーエフェクト - 展開時のスタッガードアニメーション
Advanced
高機能なFABを実装してください。 - スピードダイアル（展開メニュー） - 各ミニFABにツールチップラベル - aria-haspopup="true" + aria-expanded - ESCキーでメニューを閉じる - フォーカストラップ（展開中） - スクロール方向に応じて表示/非表示 - Extended FAB（テキスト + アイコン）モード - ドラッグで位置変更可能 - prefers-reduced-motion 対応 - タッチデバイスでの長押しメニュー