← 一覧へ

やってみよう写真を長押し(パソコンは右クリック)してみてください

ジェスチャーメジャー(よく見る)

コンテキストメニュー

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