やってみよう写真を長押し(パソコンは右クリック)してみてください
ジェスチャーメジャー(よく見る)
コンテキストメニュー
Context Menu / Long-press Menu
写真などを長押し(パソコンは右クリック)すると、その場にメニューがふわっと浮かび上がる。
別名長押しメニュー右クリックメニューポップアップメニュークイックアクション
どこで使われている?
- よく見かける場所
- iPhoneの写真・メッセージ、パソコンの右クリック、ファイル管理
- 使うとよい場面
- よく使う操作を、画面をすっきりさせたまま用意したいとき
- 避けたい場面
- 唯一の操作の置き場所(気づかれないので、ボタンでも用意する)
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「コンテキストメニュー(Context Menu / Long-press Menu)」を実装してください。 動き:要素を長押し(パソコンでは右クリック)すると、その要素が少し拡大して浮き上がり、背景を暗くぼかす。要素の近くに「コピー」「共有」「削除」などの操作メニューを表示し、外側を押すと閉じる。 使う部品:contextmenu イベント(右クリック)+ 長押し判定で自作
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | contextmenu イベント(右クリック)+ 長押し判定で自作 |
|---|---|
| iPhoneアプリなら | .contextMenu { } |
| Androidアプリなら | combinedClickable の onLongClick + DropdownMenu |
| Flutterなら | CupertinoContextMenu(Material なら showMenu) |
| React Nativeなら | react-native-context-menu-view / zeego |