スマホ用の追従フッターを実装！アイコンあり、ソースコードも紹介！

2023年12月21日
コラム
HTML/CSS

コラム

1 はじめに
2 スマホ用の追従フッターの表示
3 追従フッターの仕様
4 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

実務経験でスマホ用の追従フッターを実装しました。

以前に下記記事でも紹介しましたが、前回とはアイコンの位置が違います。

スマホ用追従フッター

スマホ追従フッターのデザインをhtml・cssのソースコードのコピペで簡単に実装完了！

スマホ追従フッターのデザインをコピペで簡単に実装できるようにhtml・cssのソースコードを紹介しています。

スマホ用の追従フッターの表示

<div class="contact-footer">
	<a class="contact-footer-calender" href="#"><span>24時間WEB受付！</span></a>
	<a class="contact-footer-campaign" href="#"><span>キャンペーン実施中！</span></a>
</div>

@media only screen and (min-width: 481px) {
    .contact-footer {
        display: none;
    }
}
@media only screen and (max-width: 480px) {
    body {
        padding-bottom: 70px;
    }
    .contact-footer {
        position: fixed;
        display: flex;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100000;
    }
    .contact-footer a {
        display: block;
        width: 50%;
        color: #fff;
        font-weight: 700;
        text-align: center;
        font-size: 16px;
        padding: 15px 0;
    }
    .contact-footer span {
        position: relative;
    }
    .contact-footer span::before {
        content: "";
        width: 20px;
        height: 20px;
        display: block;
        margin: 0 auto;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .contact-footer-calender {
        background-color: #094;
    }
    .contact-footer-campaign {
        background-color: #007535;
    }
    .contact-footer-calender span::before {
        /* ファイルパスは環境に合わせて変更してください。 */
        background-image: url(img/calendar.svg);
    }
    .contact-footer-campaign span::before {
        background-image: url(img/campaign.svg);
    }
}