BFT名古屋 TECH BLOG

日々の業務で得た知識を所属するエンジニアたちがアウトプットしていきます。

【Bootstrap】ヘッダー・フッターを固定する

はじめに


こんにちは!
株式会社BFT名古屋支店・インフラ女子(?)のやまぐちです。

最近少しずつBootstrapを勉強し始めています。
対応したことを忘れないために短めの小ネタを投稿していきます!

ヘッダーとフッターについて、以下の公式ページを参考にしました。
getbootstrap.jp

ヘッダー・フッターを固定しよう


DjangoとBootstrapで簡単なウェブサイトを作ってみたはいいものの、なんか洗練されていない印象…うん?そうか、ヘッダーとフッターが固定されていないのか!

つまり、画面をスクロールするとヘッダーが見えなくなって、画面の一番下まで行くとフッターが見えてくる状態です。つまりこんな感じ!

固定するにはそれぞれクラスを指定するだけ!
今回作成しているウェブサイトでは各ページ共通のheader, footerなどは「base.html」に記載しています。以下の図だとの中身だけ別HTMLです。

ヘッダーを固定する

(1)「sticky-top」を使う
長くなってしまうので、headerタグ内のdiv要素のみ抜き出しています。
div要素のクラス指定で3つ目に「sticky-top」を記載しています。

  <div class="container-fluid mx-0 sticky-top bg-danger bg-gradient bg-opacity-75 shadow-sm d-flex align-items-center" style="height:50px;">
    <table>
      <tr>
        <td>&nbsp;</td>
        <td>
          <img src="/static/logo_s2.png" tartget="blank" height="30" shadow>
        </td>
        <td>&nbsp;</td>
        <td>
          <h4 class="text-white">CondorU Web</h4>
        </td>
      </tr>
    </table>
  </div>

(2)「fixed-top」を使う
ちなみにdiv要素のクラスに「fixed-top」を指定すると最初からbody部分と被ってしまいました。今回は「sticky-top」を使うのがよさそうです。

フッターを固定する

フッターを固定するには「fixed-bottom」を使います。
div要素のクラス指定で1つ目に「fixed-bottom」を記載しています。

  <div class="fixed-bottom mx-0 bg-black bg-opacity-75 text-center text-white">
    <h5>@BFT なごやしてん</h5>
  </div>

完成系はこちらです。
スクロールしてもヘッダーとフッターが固定されたままになりました!簡単~!

終わりに


新しいことを覚えるのはとても楽しいです。
まずはBootstrapを使いこなしてもっとデザイン力を付けて行こうと思います。

以上、ここまで読んでいただきありがとうございました~ ^ ^