Bootstrapで固定ヘッダー・フッターを作成する方法！

固定ヘッダーとは、Webページの画面上部に固定されるヘッダーのことです。メニューや目次をつけるなど、色々な使い方ができます！対して固定フッターとは、Webページの画面下部に固定されるフッターのことです。

固定フッターのあるサイトは少なく感じますが（最近は固定フッターの位置に広告が固定でついているサイトもありますね）、スマートフォンは画面上部より画面下部の方がタップしやすかったりなどの理由からスマートフォン向けサイトで使われることが多いです。

Bootstrapで固定ヘッダーを作成する方法は、ヘッダーとして固定したい要素に適切なクラスを追加するだけです。この固定方法としていくつか種類があるので、分けて紹介していきます。

まずひとつ目は、sticky-topというクラスを使用する方法です。この方法では、固定ヘッダーの部分が最上部に達した時点で固定され、それ以降はスクロールしても最上部に固定されます。固定ヘッダーの上に要素がある場合に使うと良いです。

ちなみにこれはCSSのposition:sticky;を利用するクラスです。スティッキーの要素ははじめ通常の位置に配置され、その要素の位置がウインドウ全体を基準として指定位置の条件を満たした時に固定されます。

次に、fixed-topというクラスを使用する方法があります。この方法では、固定ヘッダーの部分は常に最上部に固定されます。

ちなみにこれはCSSのposition:fixed;を利用するクラスです。このように指定された要素は高さが0になるため、styleでheightを指定する必要があります。

また、fixedを指定された要素は独立するため、このままだと下の要素が隠されてしまいます。これを防ぐためにコンテンツ部分にはヘッダーの高さ分paddingを指定する必要があります。(CSSを使ったりpt-○などのクラスを使うと良いでしょう。)
 

固定フッターを作る方法はヘッダーの場合とほとんど同じです。ただしフッターの場合は作成方法は一種類のみになります。

固定フッターを作成するには固定したい要素のクラスにfixed-bottomを追記します。これによってコンテンツが画面最下部に固定されます。先程同様このままだとフッターの要素にコンテンツが隠されてしまうので、コンテンツにmargin-bottomなどを使いフッターの高さ分の余白をもたせて上げる必要があります。

このようにして固定フッターを作成するとこのようになります。

上記のように、BootstrapではCSSにおけるpositionを簡単に利用することができるようになっています。本筋と逸れるので他のポジションについてはここでは触れませんが、気になる人は以下の公式サイトで確認してみてください。

最後にまとめとして、固定ヘッダー、固定フッターの作り方をまとめます。

いかがでしたか？自分の作りたいWebページのデザインに合わせて固定ヘッダーやフッターを作成してみてください！