【コピペで使える】フッター固定（追従）ボタンのHTML／CSSサンプル
たーさん最終更新日時 : 2026.08.10
フッター固定（追従）ボタンとは
これは正式な名称がいまいちわからないので、サンプルコードを探す際に検索ワードに毎回困る機能です。
通常のボタンであれば、ページ上にコンテンツとして設置されているので、ボタンが設置されている場所にスクロールしないとボタンを押すことができませんね。
しかし、ホームページを運用していると、コンバージョンに直結する重要なリンクを常に画面上に出しておきたいというニーズが発生します。
よくあるのが、申し込みフォームですね。
それほど難易度の高いコードではありませんが、ウェブで検索してみると、見るページによってコーディングが違ったり、環境によっては動かなかったりというのでストレスを感じることがあると思います。
そこで、今回は、できるだけ汎用性が高いように、JQeury（Javascript）を使わず、HTMLとCSSだけで動作するフッター固定（追従）ボタンのコードを紹介します。
シンプル版
HTML部
<div class="footer_fix_btn">
<a href="">コンテンツ</a>
</div>
</body>タグ前に設置してください。（ワードプレスの場合、footer.php内）
”コンテンツ”部分に表示したい内容を記載します。
CSS部
.footer_fix_btn {
width:100%;
position:fixed;
bottom:0;
width:100%;
padding:5px 0 5px 0;
text-align:center;
background:#f8f8f8; // 背景色
font-size:16px; // テキストの大きさ
color:#000000; // 文字色
border-top:2px solid #ffffff; // ボタン上部の縁取りの色
}
.footer_fix_btn a {
display:block;
width:100%;
text-decoration:none;
}
.footer_fix_btn a:hover {
opacity:0.8;
}
ボタンの色やデザインなどは上記をベースに編集してください。
4メニュー版
HTML部
<div id="footer-fix">
<p>テキストテキストテキスト</p>
<ul id="footer-fix-menu">
<li>Menu1<a href=""></a></li>
<li>Menu2<a href=""></a></li>
<li>Menu3<a href=""></a></li>
<li>Menu4<a href=""></a></li>
</ul>
</div>
</body>タグ前に設置してください。（ワードプレスの場合、footer.php内）
”コンテンツ”部分に表示したい内容を記載します。
CSS部
#footer-fix {
width:100%;
position:fixed;
bottom:0;
text-align:center;
background:#eee;
padding:1px 0 0 0;
font-size:14px;
}
#footer-fix #footer-fix-menu {
text-align :center;
padding :0;
display :table;
width :100%;
}
#footer-fix #footer-fix-menu li {
display :table-cell;
width :25%;
background :#eee;
padding :0;
margin :0;
height :60px;
position :relative;
vertical-align :middle;
border: 1px solid #ffffff;
font-size:13px;
}
#footer-fix #footer-fix-menu li:hover {
opacity :0.9;
}
#footer-fix #footer-fix-menu li a {
display :block;
position :absolute;
top :0;
left :0;
width :100%;
height :100%;
}
ボタンの色やデザインなどは上記をベースに編集してください。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
