【コピペで使える】お店ホームページ用フッター固定ボタン（予約など）サンプル
たーさん
今回はお店ホームページで使える、フッター固定のボタンサンプルのコードをご紹介します。
お店のホームページではできるだけ予約などのアクションに繋がりやすいようにUI（ユーザーインターフェイス）を設計する必要がありますが、そこでよく使われるのは画面下部に固定で表示されるボタンです。
実装内容としてはさほど難易度は高くありませんが、制作の度に一からコーディングするのも面倒ということで手っ取り早く使えるサンプルをアーカイブしておきたいということで今回記事として残させて頂きました。
※スマートフォン向けの表示ですのでPC画面では非表示にするなど工夫が必要になります。
実際に表示が確認できるサンプルのHTMLもございますので、ご希望の方はタドワークス公式ツイッターをフォローの上、DMから「フッター固定ボタンサンプル希望」と記載の上送信ください。ダウンロード版ではPC画面時ボタンが画面右側に固定される実装もされています。
HTML部
<div id="footer-fix">
<ul id="footer-fix-menu">
<li style="background:red;color:white;"><i class="fas fa-phone"></i>電話する<a href=""></a></li>
<li style="background:orange;color:white;"><i class="fas fa-envelope"></i>WEB受付<a href=""></a></li>
<li style="background:#00B900;color:white;"><i class="fab fa-line"></i>LINE予約<a href=""></a></li>
</ul>
</div>
背景色や文字色は臨機応変に変更したいと思いますので、スタイルの情報をHTML側にインラインで入れるようにしました。
CSS部
#footer-fix {
width:100%;
position:fixed;
bottom:0;
text-align:center;
font-size:14px;
}
#footer-fix #footer-fix-menu {
text-align :center;
padding :0;
margin:0;
display :table;
width :100%;
}
#footer-fix #footer-fix-menu li {
display :table-cell;
width :33.3%;
background :#eee;
padding :0;
margin :0;
height :80px;
position :relative;
vertical-align :middle;
border: 1px solid #ffffff;
font-size:16px;
}
#footer-fix #footer-fix-menu li i {
font-size:25px;
display:block;
margin-bottom:5px;
}
#footer-fix #footer-fix-menu li br {
margin-bottom:20px !important;
}
#footer-fix #footer-fix-menu li:hover {
opacity :0.8;
}
#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サイト・システム制作をワンストップでご提供しています。
