ヘッダー・フッター (header・footer) の作り方 : Bootstrap の使い方

「 Bootstrap を使ってヘッダー・フッターを作りたいけど、どうすればいいのだろう…」

このようにお悩みの方へ、本記事では Bootstrap でのヘッダー・フッターの作り方について解説します。

ここで紹介する内容を参考に、作成してみてください。

Bootstrap でのヘッダー・フッター (header・footer) の作り方

Bootstrap ではあらかじめ、様々なサンプルコードが用意されています。まずは、Bootstrap ページの 「 Getting started 」よりサンプルコードを確認してください。

今回使うサンプルコードは「 Sticky footer with navbar 」です。

ページを表示し、ページのソースコードをそのまま使うことができます。

//ヘッダー
<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="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

//フッター
<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

CSS

.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}

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

ヘッダーのナビゲーションメニューに関しては「メニュー（ナビゲーション）」の Navbar で詳しく説明しています。 そちらもあわせてご参照ください。

• Navbar の中央寄せ、右寄せなどの使い方: Bootstrap 4
• Navbar クリック時にメニューを閉じる方法: Bootstrap 4
• Navbar の高さを調整する方法: Bootstrap 4
• Navbar をフルスクリーンにする方法: Bootstrap 4

Bootstrap でサイトに合ったヘッダー・フッターを作ってみよう

ヘッダー・フッターがしっかり作られているサイトは、ユーザーの安心感を得やすく、サイトを見てもらえる可能性を高めることにもつながります。

Bootstrap ならサンプルコードを使うことで、簡単にヘッダー・フッターが可能です。ぜひチャレンジしてみてください。