【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法

2021年10月18日 13:58

はじめに

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

サンプル

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

実装

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-indexpositionstaticだと効かないので、static以外に設定する必要があります。

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

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

フッターのスタイル

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

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

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

まとめ

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

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

関連記事

【CSS+JS】メニューアイコンの一種、ベントーメニューの実装方法(アニメーション付き)
# はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 <a class="gallery" data-group="gallery" href= [...]
2021年10月18日 14:26
【CSS+JS】背景画像の視差効果(パララックス)を実装する方法
# はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 # サンプル まず、背景画像の視差効果(パララックス) [...]
2021年10月17日 12:08
【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26