Bootstrapのフッターの作り方とデザインのテンプレートを紹介！
この記事では、Bootstrapでフッターを作成する方法の解説、またフッターを作成できるテンプレートの紹介をしています。フッターを作成できるテンプレートは数多く存在していますが、今回はそのうちのいくつかを紹介しています。
Bootstrapでフッター（footer）を作成したい
WEBページの下部に表示されるフッターをBootstrapを使って作成する方法をサンプルコード付きで紹介します。
Bootstrapを使ってフッターを作る方法には
- 自分で作成する方法
- テンプレートを利用する方法
Bootstrapのフッター（footer）の作り方
テンプレートから作成する方法
さて、あらかじめ用意されているBootstrapのフッターのテンプレートを利用する方法ですが、候補となるテンプレートはたくさんあり、そのうちのいくつかを紹介します。
また、このテンプレートの多くはフッター以外のテンプレートも持っていますが、今回はそのうちフッターのデザインを紹介します。
（最初にフッターのデザインの一覧を紹介し、後でその適用方法の例を紹介します）
Material Design for Bootstrap 4
MDBootstrapという、Bootstrap4に独自のCSSを組み合わせたマテリアルデザインのテンプレートです。
用途に合わせていろいろなデザインがあります。
テキストメインのフッター
リンクメインのフッター
フォームメインのフッター
AZMIND
AZMINDという、Webページのテンプレートを配布しているサイトです。スタイリッシュでおしゃれなデザインが用意されています。
Solid
Solidというテンプレートで、複数ページのBootstrapテンプレートが用意されています。
Stream
Stream UI Kitは、のBootstrap 4UIキットです。5つの完全なページのテンプレートが付属しています。
テンプレートの例
フッターのデザイン
テンプレートの適用方法
一番はじめに紹介したMDBootstrapの使い方を例に説明します。
１．ダウンロードページを開き、ダウンロードします。
zipファイルになっている場合は解凍します。
２．自分の使っているエディタでダウンロードしたファイルを開きます。
以下の画像の選択部分にページの内容を記述します。
３．MDBootstrapのページより、追加したいコンテンツを選択し、コピー&ペーストします。
今回はフッターを追加したいので、元々のページの中身はそのままに、フッターのコードを追記してみます。
フッターを選択する
コードをコピー
入れたい部分に貼り付けると…
フッターが追加されたページが作成できました。
この文章部分を自由に変更し、自分のページに利用することができます。
自作する方法
フッターは、WEBページの中身を作成した下にfooter要素を作成して作りましょう。
下記のサンプルコードを見てみましょう。
フッターのサンプルコード
<body>
<div class="container">
<!--内容部分(省略)-->
<footer id="footer" class="bg-info text-light"style="height:50px; ">
<ul>
<li>お問い合わせ</li>
<li>採用情報</li>
<li>運営会社</li>
</ul>
</footer>
</div>
</body>以下に簡単なフッターのサンプルコードを用意しました。
プレビュー画面を大きくして見るようにしてください。
ちなみに枠線を引く方法は以下の記事で紹介しています。
固定フッターを作成する方法
最下部ではなく、常にフッターを表示させたい場合はスタイルを少しいじる必要があります。以下の記事で固定フッターの作成方法を紹介しています。是非参考にしてください。
