スマホで見た時にページ下部に表示される固定メニューの作り方

福岡のWEBフリーランスFUGAのブログ記事をご覧いただき、誠にありがとうございます。

この記事では、

「スマホで見た時に、Webページの下に固定されているメニューを作りたい！」

という方向けに、固定メニューの作成方法をご紹介いたします。

フッターにメニュー用のHTMLを記述する

フッターのbodyタグ直前に下記のHTMLを記述します。

<div id="sp-fixed-menu" class="for-sp">
  <ul>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">資料請求</a></li>
  </ul>
</div>

フッター下部に追加したメニューが表示されていることを確認します。

メニューをページ下部に固定するCSSを記述する

次に、以下のCSSを追加して、メニューをページ下部に固定、横並びにしてスタイルを適用します。

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}

ページ下部にメニューが固定されていることを確認します。

タブレット・スマホのみ固定メニューを表示させる

最後に、以下のCSSを追加して、タブレットとスマートフォンから見た場合にのみ固定メニューを表示させます。

/*PCの場合にはメニューを表示させない*/
@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}

PCの画面サイズの場合には、固定メニューが表示されないことを確認します。

ご参考になりましたら幸いです。

記事に関してご不明な点がございましたら、FUGAまでお問い合わせくださいませ。