★ はじめての方はこちらをクリック ➠ 『1ページでわかる《独学応援ブログ》のおすすめ記事』

【CSS】footerにボタンなどを固定したいときの設定

Web系フリーランスの備忘録
平均読了時間→ < 1

スマホなどでよくあるデザインですが、Bootstrapに頼るほどでもなかったりする「固定フッター」。

考えてみれば単純ですが、難しく考えがちなあなたのためにここに書き残しておきます。(断じて忘れっぽい自分のためではない)

とりあえず、HTML側でclass名を”sticky-footer”としてもらい、CSS側で以下の記述をお願いします。

実際の位置や背景色はご自由にどうぞ。

.sticky-footer {
  position: fixed;
  bottom: 5rem;
  left: 0;
  width: 100%;
  height: 35px;
  padding:0px;
  background-color:rgba(0,0,0,0);
}
Visited 736 times, 1 visit(s) today
ご感想はぜひXにポストしてください!(僕をメンションしていただければ、必ずコメント&RPさせていただきます!)
ABOUT US
めがねん管理人
独学でWeb制作を学び、フリーランス歴6年目| MENTA上位1%のトップメンター|独学で稼げるようになりたい人を全力サポート🧑‍💻|Web制作の学習 → 営業 → 案件対応のリアルなノウハウを、X・ブログ・サロンで発信中|本気の人を本気で応援します| 個別サポート希望の方は 「独学応援メンター」で検索🔍