Bootstrap 3でのスティッキーフッターの実装方法

スティッキーフッターを実装するためには、以下の手順に従います。

HTMLの基本構造を作成します。まず、以下のような基本的なHTMLマークアップを作成します。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Sticky Footer</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <!-- ページコンテンツ -->
  </div>

  <footer class="footer">
    <div class="container">
      <p>&copy; 2024 Your Website</p>
    </div>
  </footer>

</body>
</html>

CSSを追加します。以下のCSSコードを追加して、スティッキーフッターのスタイルを指定します。

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* フッターの高さ分だけ下部にマージンを追加 */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* フッターの高さ */
  background-color: #f5f5f5;
}
.container {
  padding-top: 20px;
  padding-bottom: 20px;
}

BootstrapのJavaScriptを読み込みます。スティッキーフッターを正しく動作させるために、BootstrapのJavaScriptファイルを読み込む必要があります。以下のコードを<head>セクション内に追加します。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

以上の手順を実行することで、Bootstrap 3を使用したスティッキーフッターが実装されます。このコード例では、フッターの高さが60pxであり、背景色は#f5f5f5として指定されています。必要に応じて、これらの値を変更することもできます。

なお、Bootstrap 3は古いバージョンのフレームワークであり、より新しいバージョンが利用可能です。最新のバージョンを使用する場合は、公式のドキュメントやリファレンスを参照することをおすすめします。