スピードダイヤル Speed Dial
FABを押すと複数のアクションボタンが放射状に展開するメニュー。素早く複数の操作にアクセスできる。
ライブデモ
右下のボタンをクリック
ソースコード
<div class="demo-speed-dial-area">
<p class="demo-speed-dial-desc">右下のボタンをクリック</p>
<div class="demo-speed-dial">
<div class="demo-speed-dial-options">
<div class="demo-speed-dial-option" data-label="写真">
<span class="demo-speed-dial-label">写真</span>
<button class="demo-speed-dial-mini">
<svg width="18" height="18" 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>
</div>
<div class="demo-speed-dial-option" data-label="テキスト">
<span class="demo-speed-dial-label">テキスト</span>
<button class="demo-speed-dial-mini">
<svg width="18" height="18" 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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</button>
</div>
<div class="demo-speed-dial-option" data-label="リンク">
<span class="demo-speed-dial-label">リンク</span>
<button class="demo-speed-dial-mini">
<svg width="18" height="18" 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>
<button class="demo-speed-dial-fab" aria-label="メニューを開く">
<svg class="demo-speed-dial-icon" 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>
</div>.demo-speed-dial-area { position: relative;
position: relative; height: 280px; border: 1px solid #e5e7eb;
border-radius: 12px; background: #f9fafb; overflow: visible;
}
.demo-speed-dial-desc { text-align: center; color: #aaa; font-size: 13px; padding-top: 24px; }
.demo-speed-dial { position: absolute; bottom: 20px; right: 20px; }
.demo-speed-dial-fab {
width: 52px; height: 52px; border-radius: 50%; border: none;
background: var(--ui-primary); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-primary) 40%, transparent);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
position: relative; z-index: 2;
}
.demo-speed-dial-fab:hover { transform: scale(1.06); }
.demo-speed-dial-icon { transition: transform 0.3s; }
.demo-speed-dial.open .demo-speed-dial-icon { transform: rotate(45deg); }
.demo-speed-dial-options {
position: absolute; bottom: 64px; right: 4px;
display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
opacity: 0; pointer-events: none; transform: translateY(10px);
transition: opacity 0.25s, transform 0.25s;
}
.demo-speed-dial.open .demo-speed-dial-options {
opacity: 1; pointer-events: auto; transform: translateY(0);
}
.demo-speed-dial-option { display: flex; align-items: center; gap: 10px; }
.demo-speed-dial-label {
padding: 4px 10px; background: #333; color: #fff; border-radius: 4px;
font-size: 12px; white-space: nowrap;
}
.demo-speed-dial-mini {
width: 42px; height: 42px; border-radius: 50%; border: none;
background: #fff; cursor: pointer; display: flex; align-items: center;
justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: background 0.2s;
color: var(--ui-primary);
}
.demo-speed-dial-mini:hover {
background: color-mix(in srgb, var(--ui-primary) 10%, #fff);
}(function(){
var dial = document.querySelector('.demo-speed-dial');
var fab = document.querySelector('.demo-speed-dial-fab');
fab.addEventListener('click', function(){
dial.classList.toggle('open');
});
document.querySelector('.demo-speed-dial-area').addEventListener('click', function(e){
if(!e.target.closest('.demo-speed-dial')){ dial.classList.remove('open'); }
});
document.querySelectorAll('.demo-speed-dial-mini').forEach(function(btn){
btn.addEventListener('click', function(){ dial.classList.remove('open'); });
});
})();AIプロンプト
Basic
スピードダイヤルをHTML/CSS/JSで作ってください。FABをクリックすると複数のミニボタンが上方向に展開します。
Custom
以下の仕様でスピードダイヤルを実装してください。 - メインFAB（+アイコン、回転アニメーション） - 3つのミニFAB（写真、テキスト、リンク）が上方向に展開 - 各ミニFABにツールチップラベル - プライマリカラー: #2563eb - 展開/収縮のスタガーアニメーション - 外側クリックで閉じる
Advanced
アクセシビリティ対応のスピードダイヤルを実装してください。 - role="menu" と role="menuitem" を使用 - 展開時にフォーカスを最初のミニFABへ移動 - 矢印キーでミニFAB間を移動 - ESCキーで閉じてメインFABにフォーカス - prefers-reduced-motion対応 - ホバー時のツールチップは aria-describedby で関連付け - タッチデバイスでは長押しでツールチップ表示