
【BootstrapでWebデザイン】Bootstrapでfooterを作成する方法
画面を作成する上で、ヘッダーとフッターを作成することは最低限必要なことです。Bootstrapではフッター用のコンポーネントは残念ながら用意されていないため、自作で作成する必要があります。ここではBootstrapを使って簡単なフッターを作成する方法を紹介します。
- PG
- Bootstrapって簡単にWebアプリケーションの画面を作成できる開発エディタですから、やっぱりフッターも簡単に作成できるのでしょうか?
- PM
- もちろん!Sticky footerなどを利用して、自作でフッターを作成しなければなりませんが、公式でサンプルソースが準備されています。そちらを活用すると、コーディングしやすいと思いますよ。
目次
Bootstrapを利用して自作でフッターを作成する際は、「Sticky footer」を利用するのがおすすめです。Sticky footerはメインコンテンツの内容が少なくても、フッターを最下部に固定して表示できるため便利です。逆に利用しなければ、とても見栄えが悪いフッターになってしまいますので、まずはSticky footerの使い方を本記事でご紹介します。
Sticky footerを利用して固定フッターを作成するサンプルソースです。まず、こちらのソースから、右クリックでページのソースを表示させて、46行目~50行目のSticky footerの箇所をコピーしましょう。
コピーしたソースを自作サイトのフッター部にペーストします。
1 2 3 4 5 |
<footer class="footer"> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> </div> </footer> |
Sticky footerを利用するには、CSSファイルを別途準備する必要があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* Sticky footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .text-muted { margin: 20px 0; } |
あとは作成したCSSを読み込むためのソースをコーディングしてあげれば完成です。
さきほど紹介したサイトの22行目がそれに当たります。
1 2 |
<!-- Custom styles for this template --> <link href="sticky-footer.css" rel="stylesheet"> |
これでフッター部が固定されて表示されるようになりましたので、あとはおしゃれなフッターを作成するために、各自コーディングしていきましょう。
- PG
- Sticky footerを利用して固定フッターの作成はできましたけど、そこから自作でおしゃれなフッターを作成する自信があまりないのですが……
- PM
- 心配不要ですよ!Bootstrapでフッターを作成するテンプレート集がWebサイトに多くあります。フリーで利用できるものが大半ですので、初めからおしゃれなフッターを作成するのが難しい場合などは、そちらも活用してみてもいいかもしれませんね。
フッターはヘッダーに比べると力を入れる度合いは低くなるかもしれません。しかし、フッターもきちんと作りこまれているサイトは、ユーザーからのサイトへの信頼度も増してきます。Webデザインの現場ではBootstrapを利用することが多くなります。
また、 Bootstrapではアイデアさえあれば、簡単に洗練されたおしゃれなフッターも作成することが可能です。
ぜひこの機会にBootstrapを使いこなせるようにしましょう。