CSSでフッターをページ最下部に固定する方法【初心者向け】

2024-04-02

HTMLページのフッターをページの一番下に配置し、最小高さを設定しつつ、ページと重ならないようにするCSS

フッターをページ下部に固定するには、主に以下の2つの方法があります。

position: fixed を使用すると、要素を画面の特定の位置に固定することができます。この方法では、フッターを画面の下部に固定することができます。

footer {
  position: fixed;
  bottom: 0;
}

このコードは、フッターを画面の下部に固定します。ただし、この方法では、コンテンツが少ない場合、フッターがページと重なってしまいます。

flexbox を使用する方法

flexbox は、要素を柔軟にレイアウトするCSSレイアウトプロパティです。この方法では、親要素の高さを100vhに設定し、フッターを margin: auto で中央に配置します。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin: auto;
}

このコードは、親要素の高さを100vhに設定し、フッターを中央に配置します。この方法では、コンテンツが少ない場合でも、フッターがページと重なることはありません。

フッターに最小高さを設定するには、min-height プロパティを使用します。

footer {
  min-height: 100px;
}

このコードは、フッターの最小高さを100pxに設定します。

この解説では、HTMLページのフッターを常にページの一番下に配置し、最小高さを設定しつつ、ページと重ならないようにするCSSについて説明しました。

上記の2つの方法を組み合わせて、以下のコードのように記述することで、目的を達成することができます。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  position: fixed;
  bottom: 0;
  min-height: 100px;
}

このコードは、コンテンツが少ない場合でも、フッターがページと重なることなく、常にページの一番下に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>サンプルページ</h1>
  </header>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Nulla facilisi. Proin eget tortor risus. Nunc ac magna risus. Praesent eu lectus nisl. Donec ullamcorper risus sit amet sapien ultricies, eu pulvinar neque ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sit amet pretium urna. Nulla facilisi. Proin eget tortor risus. Nunc ac magna risus. Praesent eu lectus nisl. Donec ullamcorper risus sit amet sapien ultricies, eu pulvinar neque ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Nulla facilisi. Proin eget tortor risus. Nunc ac magna risus. Praesent eu lectus nisl. Donec ullamcorper risus sit amet sapien ultricies, eu pulvinar neque ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  </main>
  <footer>
    <p>&copy; 2023 サンプルページ</p>
  </footer>
</body>
</html>

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  position: fixed;
  bottom: 0;
  min-height: 100px;
  background-color: #ccc;
}

上記のコードをHTMLファイルとCSSファイルに保存し、ブラウザで開くと、フッターが常にページの一番下に表示され、コンテンツが少ない場合でも、ページと重なることなく表示されます。

コード解説

container クラスには、display: flex と flex-direction: column を設定することで、親要素を縦方向に並べるFlexboxレイアウトを適用します。
container クラスには、min-height: 100vh を設定することで、親要素の最小高さを画面の高さに設定します。
footer クラスには、position: fixed を設定することで、フッターを画面に固定します。
footer クラスには、background-color: #ccc を設定することで、フッターの背景色をグレーに設定します。

改良点

上記のコードは基本的なサンプルコードです。必要に応じて、以下の点を改良することができます。

フッターのデザインを調整する
フッターにコンテンツを追加する
フッターの表示・非表示を切り替える

フッターをページ下部に固定する他の方法

CSS Gridを使用する方法

CSS Gridは、要素をグリッドレイアウトで配置するCSSレイアウトプロパティです。この方法では、親要素をグリッドレイアウトに設定し、フッターを grid-area: 1 / 1; で配置します。

<div class="container">
  <header>
    <h1>サンプルページ</h1>
  </header>
  <main>
    <p>...</p>
  </main>
  <footer>
    <p>&copy; 2023 サンプルページ</p>
  </footer>
</div>

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  grid-area: 1 / 1;
}

main {
  grid-area: 2 / 1;
}

footer {
  grid-area: 3 / 1;
}

このコードは、親要素を3つの行に分割し、フッターを3行目に配置します。

margin-top: auto を使用する方法

この方法は、フッターに margin-top: auto を設定することで、フッターを自動的にページ下部に配置します。

<div class="container">
  <header>
    <h1>サンプルページ</h1>
  </header>
  <main>
    <p>...</p>
  </main>
  <footer>
    <p>&copy; 2023 サンプルページ</p>
  </footer>
</div>

.container {
  position: relative;
}

footer {
  position: absolute;
  bottom: 0;
  margin-top: auto;
}

このコードは、フッターを親要素に対して絶対配置し、margin-top: auto で自動的にページ下部に配置します。

JavaScriptを使用して、フッターをページ下部に配置することもできます。

<div id="container">
  <header>
    <h1>サンプルページ</h1>
  </header>
  <main>
    <p>...</p>
  </main>
  <footer>
    <p>&copy; 2023 サンプルページ</p>
  </footer>
</div>

const container = document.getElementById('container');
const footer = container.querySelector('footer');

const setFooterPosition = () => {
  const height = container.offsetHeight;
  const footerHeight = footer.offsetHeight;
  footer.style.top = `${height - footerHeight}px`;
};

window.addEventListener('resize', setFooterPosition);

setFooterPosition();