やってみよう商品ページをスクロールしてみてください。ボタンは下に残り続けます
表示・レイアウトメジャー（よく見る）
下部固定ボタン
Sticky CTA / Bottom Action Bar
商品ページなどで、スクロールしても「カートに入れる」ボタンが画面の下にずっと付いてくる。
別名スティッキーフッター固定CTAカートに入れるボタン（固定）ボトムアクションバー
どこで使われている？
- よく見かける場所
- ネット通販の商品ページ、ホテル予約、アプリの紹介LP
- 使うとよい場面
- 一番大事な行動（購入・予約）を、どこまで読んでも押せるようにしたいとき
- 避けたい場面
- ボタンが画面を大きくふさぐ小さな画面
補足CTA は「行動してほしいボタン」（Call To Action）の略です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「下部固定ボタン（Sticky CTA / Bottom Action Bar）」を実装してください。 動き：一番大事な操作のボタン（例：カートに入れる）と価格を、画面の下端に固定した帯に置き、スクロールしても常に見えるようにする。帯は少しぼかした背景にして、下の内容がうっすら透けるようにする。 使う部品：position: sticky / fixed で下部に固定
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | position: sticky / fixed で下部に固定 |
|---|---|
| iPhoneアプリなら | .safeAreaInset(edge: .bottom) |
| Androidアプリなら | Scaffold の bottomBar |
| Flutterなら | Scaffold の bottomNavigationBar |
| React Nativeなら | 画面下に position: absolute で配置 |