Bootstrapでの固定フッターの実装方法

2024-02-16 03:49 Bootstrap CSS

方法1: CSSのみを使用する方法

まず、HTMLファイルで以下のような基本的な構造を作成します。

<body>
  <header>
    <!-- ヘッダーのコンテンツ -->
  </header>
  <main>
    <!-- メインコンテンツ -->
  </main>
  <footer>
    <!-- フッターのコンテンツ -->
  </footer>
</body>

次に、CSSファイルで以下のようなスタイルを追加します。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
footer {
  flex-shrink: 0;
}

この方法では、min-height: 100vh;を使用してブラウザのビューポートの高さと同じ高さを持つコンテナを作成し、flex: 1;を使用してメインコンテンツの高さを自動的に調整します。flex-shrink: 0;は、フッターがコンテンツのサイズに応じて収縮しないようにします。

方法2: Bootstrapのクラスを使用する方法

Bootstrapには、固定フッターを作成するための特定のクラスが用意されています。以下の方法で使用することができます。

<body>
  <header>
    <!-- ヘッダーのコンテンツ -->
  </header>
  <main class="flex-shrink-0">
    <!-- メインコンテンツ -->
  </main>
  <footer class="fixed-bottom">
    <!-- フッターのコンテンツ -->
  </footer>
</body>

この方法では、flex-shrink-0クラスを使用してメインコンテンツが収縮しないようにし、fixed-bottomクラスを使用してフッターをページの下部に固定します。

以上が、Bootstrapを使用して固定フッターを作成する方法です。どちらの方法でも、CSSをカスタマイズすることでデザインを自由に変更することができます。また、他のBootstrapのクラスやコンポーネントを使用して、より高度なレイアウトを作成することも可能です。