スプリットボタン Split Button
メインアクションとドロップダウンを組み合わせたボタン。主操作と副操作を一つにまとめる。
ライブデモ
ソースコード
<div class="demo-split-btn-wrapper">
<div class="demo-split-btn">
<button class="demo-split-btn-main">保存する</button>
<button class="demo-split-btn-toggle" aria-label="その他の保存オプション" aria-expanded="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
</div>
<div class="demo-split-btn-menu">
<button class="demo-split-btn-option">名前を付けて保存</button>
<button class="demo-split-btn-option">テンプレートとして保存</button>
<button class="demo-split-btn-option">下書きに保存</button>
</div>
</div>.demo-split-btn-wrapper { position: relative; display: inline-block; }
.demo-split-btn { display: inline-flex; border-radius: 8px; overflow: hidden; }
.demo-split-btn-main {
padding: 10px 20px; border: none; background: var(--ui-primary);
color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
transition: opacity 0.2s;
}
.demo-split-btn-main:hover { opacity: 0.9; }
.demo-split-btn-toggle {
padding: 10px 10px; border: none; cursor: pointer;
background: color-mix(in srgb, var(--ui-primary) 85%, #000);
color: #fff; display: flex; align-items: center;
border-left: 1px solid rgba(255,255,255,0.2);
transition: background 0.2s;
}
.demo-split-btn-toggle:hover { background: color-mix(in srgb, var(--ui-primary) 75%, #000); }
.demo-split-btn-menu {
position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px;
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1); padding: 4px;
display: none; z-index: 10;
}
.demo-split-btn-menu.open { display: block; }
.demo-split-btn-option {
display: block; width: 100%; padding: 9px 14px; border: none;
background: none; text-align: left; font-size: 13px; color: #333;
cursor: pointer; border-radius: 6px; transition: background 0.15s;
}
.demo-split-btn-option:hover {
background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
color: var(--ui-primary);
}(function(){
var toggle = document.querySelector('.demo-split-btn-toggle');
var menu = document.querySelector('.demo-split-btn-menu');
toggle.addEventListener('click', function(){
var open = menu.classList.toggle('open');
toggle.setAttribute('aria-expanded', open);
});
document.addEventListener('click', function(e){
if (!e.target.closest('.demo-split-btn-wrapper')) {
menu.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
}
});
menu.querySelectorAll('.demo-split-btn-option').forEach(function(opt){
opt.addEventListener('click', function(){
menu.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
});
});
})();AIプロンプト
Basic
スプリットボタンをHTML/CSS/JSで作ってください。メインの「保存」ボタンの横にドロップダウン矢印があり、クリックで追加の保存オプションが表示されます。
Custom
以下の仕様でスプリットボタンを実装してください。 - メインボタン「保存する」+ ドロップダウン矢印 - ドロップダウンに3つのオプション（名前を付けて保存、テンプレートとして保存、下書きに保存） - プライマリカラー: #2563eb - ホバーエフェクト付き - ドロップダウンにアニメーション - 外側クリックで閉じる
Advanced
アクセシビリティ対応のスプリットボタンを実装してください。 - aria-haspopup="true" と aria-expanded を設定 - role="menu" / role="menuitem" を使用 - 矢印キーでメニュー内を移動 - ESCキーでメニューを閉じてトグルにフォーカス - メニュー展開時にフォーカスを最初の項目に移動 - キーボードでのみフォーカスリングを表示 - disabled状態のスタイルと動作