合同会社アルティマシステム
Bootstrap3

第8回目 Bootstrap footerを作成してみよう!

前回の復習

前回は、headerのレスポンシブ対応・固定する方法について紹介をしました。
第8回目は、footerを作成する方法について紹介をします。
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

footerを作成する準備

第7回目までに作成したindex.htmlをそのまま使用します。
footerを作成するために、BootstrapにあるSticky footerを使用します。
Bootstrap Sticky footerサンプルページはこちらから。
Sticky footerはCustom componentsの1つで、footerをサイトの下に固定できます。
今回は、headerにnavberを固定しているためSticky footer with fixed navbarを使用します。
Sticky footer with fixed navbarサンプルページはこちらから。
Sticky footer with fixed navbarのcssを見てみましょう。

< 参考 ① >

/* 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. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}
body > .container { padding: 60px 15px 0; } の60pxでheaderの高さ分の幅を確保しています。

sticky-footer-navbar.cssを作成

Sticky footer with fixed navbarのcssをsticky-footer-navbar.cssというファイルを作成し書いていきます。
テキストエディットを開きSticky footer with fixed navbarのcssを貼り付け、ファイルを保存するときの名前をsticky-footer-navbar.cssにしてください。
sticky-footer-navbar.css bootstrapの cssの中に入れてください。

< 例 >

  • bootstrap
  • css
  • ・sticky-footer-navbar.css
index.htmlにsticky-footer-navbar.cssを読み込むコードを書きます。

< 参考 ② >

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrapでフッターを作ろう!</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="bootstrap/css/sticky-footer-navbar.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">サイト名</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">リンク1</a></li>
                        <li><a href="#">リンク2</a></li>
                        <li><a href="#">リンク3</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

<footer>タグを追加してみよう

< 参考 ③ >

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrapでフッターを作ろう!</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="bootstrap/css/sticky-footer-navbar.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">サイト名</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">リンク1</a></li>
                        <li><a href="#">リンク2</a></li>
                        <li><a href="#">リンク3</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <footer class="footer">
            <div class="container">
                <p class="text-muted">Place sticky footer content here.</p>
            </div>
        </footer>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
赤の文字になっているコードをindex.htmlに追加すると< 参考 ④ >のように、サイトの下に固定されているfooterが表示されます。

< 参考 ④ >

Place sticky footer content here.

まとめ・次回予告

Sticky footer with fixed navbarについての紹介をしました。headerを固定しない場合は、Sticky footerを使用してください。
他にもCustom componentsには、便利な機能が沢山あります!
次回はBootstrapのボタンについての紹介をします。

関連投稿

第3回目 Bootstrap グリッドシステム!

Bootstrapのコンポーネント 第3回目は、.container(.container-fluid) .row .col-について紹介をしていきます。 Bootstrapを使用する場合は、最初に.container .row .col-の仕組みを理解しておきましょう!...

第7回目 Bootstrap headerをレスポンシブ対応にしてみよう!

前回の復習 前回は、headerの基本となるサイト名とリンクを作成しました。 第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。 最後にheaderを固定する方法の紹介もします! こ...

第5回目 Bootstrap .rowの入れ子!

前回の復習 前回は、offset push pullについての紹介をしました。 コンテンツの細かい配置に迷ったときにoffset push pullを使用すると全体のバランスがよくなります。 第5回目は、.rowの入れ子についての紹...

第4回目 Bootstrap offset push pullを使ってみよう!

前回の復習 Bootstrapを使用してレスポンシブサイトを作成する場合は、第3回目で紹介したグリッドシステムの12と画面サイズのxs・sm・md・lgが重要になります。 第4回目は、.rowと.col-のoffset push pullに...

第2回目 実際にBootstrapを動かしてみよう!

前回の復習 前回は、Bootstrapのダウンロード方法・ファイル・フォルダの紹介をしました。 第2回目は、Bootstrapの読み込み方・実際に動かすところまでを紹介をします。 読み込みってなんだ?と、少しややこ...