はじめに
こんにちは！
株式会社ＢＦＴ名古屋支店・インフラ女子（？）のやまぐちです。
最近少しずつBootstrapを勉強し始めています。
対応したことを忘れないために短めの小ネタを投稿していきます！
ヘッダーとフッターについて、以下の公式ページを参考にしました。
getbootstrap.jp
ヘッダー・フッターを固定しよう
DjangoとBootstrapで簡単なウェブサイトを作ってみたはいいものの、なんか洗練されていない印象…うん？そうか、ヘッダーとフッターが固定されていないのか！
つまり、画面をスクロールするとヘッダーが見えなくなって、画面の一番下まで行くとフッターが見えてくる状態です。つまりこんな感じ！
固定するにはそれぞれクラスを指定するだけ！
今回作成しているウェブサイトでは各ページ共通のheader, footerなどは「base.html」に記載しています。以下の図だと
ヘッダーを固定する
（１）「sticky-top」を使う
長くなってしまうので、headerタグ内のdiv要素のみ抜き出しています。
div要素のクラス指定で３つ目に「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> </td> <td> <img src="/static/logo_s2.png" tartget="blank" height="30" shadow> </td> <td> </td> <td> <h4 class="text-white">CondorU Web</h4> </td> </tr> </table> </div>
（２）「fixed-top」を使う
ちなみにdiv要素のクラスに「fixed-top」を指定すると最初からbody部分と被ってしまいました。今回は「sticky-top」を使うのがよさそうです。
フッターを固定する
フッターを固定するには「fixed-bottom」を使います。
div要素のクラス指定で１つ目に「fixed-bottom」を記載しています。
<div class="fixed-bottom mx-0 bg-black bg-opacity-75 text-center text-white"> <h5>@BFT なごやしてん</h5> </div>
完成系はこちらです。
スクロールしてもヘッダーとフッターが固定されたままになりました！簡単～！
終わりに
新しいことを覚えるのはとても楽しいです。
まずはBootstrapを使いこなしてもっとデザイン力を付けて行こうと思います。
以上、ここまで読んでいただきありがとうございました～ ^ ^
