フッター固定メニューを作る方法【HTML・CSSをコピペで実装】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTMLとCSSでフッター固定メニューを作る方法を知りたい
コピペでフッター固定メニューを作りたいのでソースコードを見たい
フッター固定メニューを作る時のHTML構造が気になる
3カラムのフッター固定メニューの作り方を知りたい

という方向けに、実装方法をサンプルコードと共に紹介します。

記事の前半ではフッター固定メニューの概要を紹介し、後半では実装のポイントとサンプルコードをご覧になっていただけます。

この記事を読み終えると、フッター固定メニューの実装に今後悩むことはなくなるでしょう。

フッター固定メニューとは？
完成イメージを確認
実装のポイント
ソースコードを確認
まとめ

フッター固定メニューとは？

Webサイトのページ最下部に固定で表示されるメニューのことです。

かっこいい言葉で言うと「追従するメニュー」となります笑

PC表示の時よりかは、スマートフォン表示（レスポンシブル）の際に頻繁に使用されていることが多いです。

SANGOなどのWordPress有料テーマでは、デフォルトで用意されている機能で、管理画面から文言とリンク先URLを入力するだけで簡単に表示させることが出来ます。

ユーザーの視界に常に入るので、資料請求やお問い合わせフォームへのリンクを設置することも多いですね。

当ブログ使用のテーマ「SANGO」のモバイル用固定フッター

完成イメージを確認

今回実装するフッター固定メニューの完成イメージを共有します。

↓↓↓

3カラムのフッター固定メニューです。

見た目の概要としては以下になります。

文字色は白
背景色は赤、青、オレンジ
アイテム同士の間に均等に余白をあける

実装のポイント

フッター固定メニューを作る際のポイントは以下です。

親要素にfixedを指定、横幅は100%、位置はleft:0とbottom:0
3カラムはdisplay:flexで再現
flexアイテムの横幅はcalcプロパティで「(100% – 余白の合計) / 3(横に並ぶアイテムの数)」で指定
アイテムの背景色はisRedやisBlue、isOrangeクラスで個別指定

ソースコードを確認

最後にコピペで実装できるHTMLとCSSのソースコードをご覧になってください。

HTML

index.html

<div class="FixedMenuSection">
  <div class="FixedMenu">
    <div class="FixedMenu-Inner">
      <div class="FixedMenu-Inner-List">
        <a href="#" class="FixedMenu-Inner-List-Item isRed">アイテム1</a>
        <a href="#" class="FixedMenu-Inner-List-Item isBlue">アイテム2</a>
        <a href="#" class="FixedMenu-Inner-List-Item isOrange">アイテム3</a>
      </div>
    </div>
  </div>
</div>

CSS

index.css

.FixedMenuSection {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.FixedMenu-Inner-List {
  display: flex;
}
.FixedMenu-Inner-List-Item {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 38px;
  padding-right: 38px;
  width: calc((100% - 4px) / 3);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
}
@media screen and (max-width: 540px) {
  .FixedMenu-Inner-List-Item {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
  }
}
.FixedMenu-Inner-List-Item:not(:first-child) {
  margin-left: 2px;
}
.FixedMenu-Inner-List-Item.isRed {
  background: red;
}
.FixedMenu-Inner-List-Item.isBlue {
  background: blue;
}
.FixedMenu-Inner-List-Item.isOrange {
  background: orange;
}

▼サンプルコードはこちら▼

See the Pen
NWqdqaG by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

今回紹介した方法を使えばフッター固定メニューをいとも簡単に実装することができます。

最後に実装のポイントを振り返ると、

親要素にfixedを指定、横幅は100%、位置はleft:0とbottom:0
3カラムはdisplay:flexで再現
flexアイテムの横幅はcalcプロパティで「(100% – 余白の合計) / 3(横に並ぶアイテムの数)」で指定
アイテムの背景色はisRedやisBlue、isOrangeクラスで個別指定

ぜひご自身で色々とコードをいじってカスタマイズしてみてください。

同じ様に「コピペで実装」できるソースコードを知りたい方はこちらをチェックしてみてください。

【CSSコピペ】2列の表を作る方法