画面下部固定 CTA バー
画面下部固定 CTA バーは、商品やサービスのページをどれだけスクロールしても常に画面の一番下に残り続ける行動喚起の帯です。バー本体に position:fixed と bottom:0 を指定し、左右を left:0;right:0 で画面いっぱいに広げているため、ページの長さに関係なく固定表示されます。
解説
画面下部固定 CTA バーは、商品やサービスのページをどれだけスクロールしても常に画面の一番下に残り続ける行動喚起の帯です。バー本体に position:fixed と bottom:0 を指定し、左右を left:0;right:0 で画面いっぱいに広げているため、ページの長さに関係なく固定表示されます。左側に合計金額、右側に「カートに入れる」ボタンを flex で並べ、上向きの影で本文から浮かせて見せています。JavaScript は不要で CSS だけで完結します。
使う場面
- EC の商品詳細ページで、価格と購入ボタンを画面内に固定し続けたいとき
- 宿泊予約や講座申込みなど、長い説明を読み終えた直後でも申込みできるようにしたいとき
- スマホで縦に長いランディングページの離脱を防ぎたいとき
カスタマイズはボタン色 #f5576c をブランド色に変えるのが第一歩です。固定バーは本文の末尾に重なるので、ページ側に下方向の余白を足してコンテンツがバーに隠れないようにしてください。価格には tabular-nums が指定済みで桁が揃います。
よくある質問
ボタンの色を変えるにはどこを編集しますか。
CSS の .sbc__btn にある background:#f5576c をブランドカラーに変え、:hover の background も同系の少し濃い色に揃えると統一感が出ます。文字色は白のままでコントラストを確保します。
固定バーが本文の最後の文章に重なってしまいます。
バーは position:fixed で浮いているため本文の高さを占有しません。ページ側のコンテナにバーの高さ分の下方向の padding か margin を足すと、最後の要素が隠れなくなります。