【BootstrapでWebデザイン】Bootstrapでfooterを作成する方法

画面を作成する上で、ヘッダーとフッターを作成することは最低限必要なことです。Bootstrapではフッター用のコンポーネントは残念ながら用意されていないため、自作で作成する必要があります。ここではBootstrapを使って簡単なフッターを作成する方法を紹介します。

プログラマー

Bootstrapって簡単にWebアプリケーションの画面を作成できる開発エディタですから、やっぱりフッターも簡単に作成できるのでしょうか？

プロジェクト
マネージャー

もちろん！Sticky footerなどを利用して、自作でフッターを作成しなければなりませんが、公式でサンプルソースが準備されています。そちらを活用すると、コーディングしやすいと思いますよ。

Bootstrapのfooterについて

Bootstrapを利用して自作でフッターを作成する際は、「Sticky footer」を利用するのがおすすめです。Sticky footerはメインコンテンツの内容が少なくても、フッターを最下部に固定して表示できるため便利です。逆に利用しなければ、とても見栄えが悪いフッターになってしまいますので、まずはSticky footerの使い方を本記事でご紹介します。

Bootstrapを使ってfooterを作成する方法

Sticky footerを利用して固定フッターを作成するサンプルソースです。まず、こちらのソースから、右クリックでページのソースを表示させて、46行目～50行目のSticky footerの箇所をコピーしましょう。
コピーしたソースを自作サイトのフッター部にペーストします。

Sticky footerを利用するには、CSSファイルを別途準備する必要があります。

あとは作成したCSSを読み込むためのソースをコーディングしてあげれば完成です。
さきほど紹介したサイトの22行目がそれに当たります。

これでフッター部が固定されて表示されるようになりましたので、あとはおしゃれなフッターを作成するために、各自コーディングしていきましょう。

プログラマー

Sticky footerを利用して固定フッターの作成はできましたけど、そこから自作でおしゃれなフッターを作成する自信があまりないのですが……

プロジェクト
マネージャー

心配不要ですよ！Bootstrapでフッターを作成するテンプレート集がWebサイトに多くあります。フリーで利用できるものが大半ですので、初めからおしゃれなフッターを作成するのが難しい場合などは、そちらも活用してみてもいいかもしれませんね。

Bootstrapでfooterをカスタマイズ

フッターはヘッダーに比べると力を入れる度合いは低くなるかもしれません。しかし、フッターもきちんと作りこまれているサイトは、ユーザーからのサイトへの信頼度も増してきます。Webデザインの現場ではBootstrapを利用することが多くなります。
また、 Bootstrapではアイデアさえあれば、簡単に洗練されたおしゃれなフッターも作成することが可能です。
ぜひこの機会にBootstrapを使いこなせるようにしましょう。