今回はお店ホームページで使える、フッター固定のボタンサンプルのコードをご紹介します。
お店のホームページではできるだけ予約などのアクションに繋がりやすいようにUI（ユーザーインターフェイス）を設計する必要がありますが、そこでよく使われるのは画面下部に固定で表示されるボタンです。
実装内容としてはさほど難易度は高くありませんが、制作の度に一からコーディングするのも面倒ということで手っ取り早く使えるサンプルをアーカイブしておきたいということで今回記事として残させて頂きました。
※スマートフォン向けの表示ですのでPC画面では非表示にするなど工夫が必要になります。
実際に表示が確認できるサンプルのHTMLもございますので、ご希望の方はタドワークス公式ツイッターをフォローの上、DMから「フッター固定ボタンサンプル希望」と記載の上送信ください。ダウンロード版ではPC画面時ボタンが画面右側に固定される実装もされています。
[blogcard url=”https://twitter.com/tadworks”]
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%;
}