
【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を使いこなせるようにしましょう。