やってみよう「送信」と、右の▼をそれぞれ押してみてください
ボタン・操作部品マイナー(知る人ぞ知る)
スプリットボタン
Split Button
ボタンの右側に小さな▼が付いていて、左はいつもの動作、▼を押すとほかの選び方が出てくる。
別名分割ボタン▼付きボタンボタン+メニュードロップダウンボタン
どこで使われている?
- よく見かける場所
- Gmail の送信予約、GitHub のマージボタン、Office の保存ボタン
- 使うとよい場面
- よく使う動作は1回で押せて、ほかの選び方も用意したいとき
- 避けたい場面
- 選び方が1つしかないとき(ふつうのボタンでよい)
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「スプリットボタン(Split Button)」を実装してください。 動き:1つのボタンを左右に分け、左にいちばんよく使う動作(例:送信)、右に▼を置く。▼を押すと、その下に関連するほかの動作(例:予約して送信)のメニューを出す。 使う部品:ボタン2つを並べ、右でメニューを開く(自作)
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | ボタン2つを並べ、右でメニューを開く(自作) |
|---|---|
| iPhoneアプリなら | Menu(primaryAction:) |
| Androidアプリなら | SplitButton(Material 3 Expressive)または自作 |
| Flutterなら | 自作(ElevatedButton + PopupMenuButton) |
| React Nativeなら | 自作 |