← 一覧へ

やってみよう「写真を変更」を押してみてください

表示・レイアウトマイナー（知る人ぞ知る）

アクションシート

Action Sheet

ボタンを押すと、画面の下から「写真を撮る」「ライブラリから選ぶ」などの選択肢が出てくる。

別名アクションメニュー選択シート確認シートConfirmation Dialog

どこで使われている？

よく見かける場所
iPhoneの写真アプリ（共有・削除）、LINE、プロフィール写真の変更
使うとよい場面
「写真を撮る／選ぶ」など、短い選択肢から1つ選んでもらうとき
避けたい場面
選択肢が多いとき、自由な内容を見せたいとき（ボトムシートにする）

補足選択肢を選ぶだけのものが「アクションシート」、自由な中身を入れられるものが「ボトムシート」です。

似ているものとの違い

重ねて出す画面の違い（ボトムシート・アクションシート・モーダル・ポップオーバー）選択肢から選ぶ部品の違い（ドロップダウン・アクションシート・コンテキストメニュー・チップ）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「アクションシート（Action Sheet）」を実装してください。

動き：ボタンを押すと、画面下部から選択肢のボタンを縦に並べたパネルをスライドして表示する。削除など危険な選択肢は赤字にし、一番下に離して「キャンセル」を置く。背景は暗くし、選ぶか背景を押すと閉じる。

使う部品：Action Sheet（下から出るパネルを自作）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならAction Sheet（下から出るパネルを自作）
iPhoneアプリなら.confirmationDialog(...)
AndroidアプリならModalBottomSheet に選択肢を並べる
FlutterならCupertinoActionSheet（showCupertinoModalPopup）
React NativeならActionSheetIOS（両対応なら @expo/react-native-action-sheet）

似ているもの・一緒に使うもの