はじめに

オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。

サンプル

最下部までスクロールすると、メインコンテンツの裏からフッターが現れるようなデザインになっています。なかなか面白いデザインではないかと思います。

実装

HTML

必要な要素はメインコンテンツとフッターのみです。

<main></main>
<footer></footer>

CSS

メインコンテンツとフッターに以下のスタイルを設定します。

main {
  position: relative;
  z-index: 2;
  margin-bottom: 240px;
  background-color: #fff;
}
footer {
  position: fixed;
  z-index: 1;
  left: 0;
  bottom: 0;
  height: 240px;
}

メインコンテンツのスタイル

main {
  position: relative;
  z-index: 2;
  margin-bottom: 240px;
  background-color: #fff;
}

まず、z-indexをフッターよりも大きい値に設定します。また、z-indexはpositionがstaticだと効かないので、static以外に設定する必要があります。

margin-bottomはフッターの高さと同じ値に設定します。フッターは最下部に固定させるので、メインコンテンツの下に余白を設定しないとメインコンテンツに隠れたままになってしまうからです。

background-colorのデフォルト値（何も設定しない場合の値）はtransparent、つまり透明なので、何かしら設定してフッターをメインコンテンツの裏に隠す必要があります。

フッターのスタイル

footer {
  position: fixed;
  z-index: 1;
  left: 0;
  bottom: 0;
  height: 240px;
}

フッターのz-indexはメインコンテンツよりも小さい値に設定します。また、positionをfixedにし、bottomを0に設定することで最下部に固定させます（leftは必須ではない）。

heightはメインコンテンツの下の余白と同じ値に設定します。

まとめ

フッターにも少しアクセントの効いたデザインを試したいという場合、実装も難しくはないので本記事のデザインを導入してみてもいいかもしれません。

本記事を参考にしていただければと思います。