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

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

前回の復習

前回は、headerの基本となるサイト名とリンクを作成しました。
第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。
最後にheaderを固定する方法の紹介もします!
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

collapseについて

headerにハンバーガーメニューを追加するためには、collapseというjsが必要となります。
collapseとは、動作の切り替え・折り畳みの動きです。コンテンツの表示・非表示の動きが簡単に作成できます。

< 参考 ① >

collapseの動きです。
< 参考 ① >のボタンをクリックと、collapseの動きです。と表示されます。

headerにcollapseを追加してみよう

実際に、前回作成したheaderにcollapseの動きを追加したいと思います。

< 参考 ② >

<!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"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <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>
赤の文字になっているコードをindex.htmlに追加すると< 参考 ③ >のように、xsサイズのときにheaderの右側にハンバーガーメニューが表示され、クリックするとリンクが表示されます。
.navbar-headerの中に<button>タグを作成し、必要なタイプ・クラス・属性を追加してください。
このときの注意点として、<button>タグのdata-target=”#navbar”と、<div id=”navbar” class=”collapse navbar-collapse”>のid=”navbar”が別の名前だと動かなくなるため、必ず同じ名前になるようにしましょう。

< 例 >

id=”sample” data-target=”#sample” idsampleとつけた場合、data-target#sampleとなります。

headerを固定してみよう

< 参考 ④ >

<!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"/>
        <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>
<nav>タグに.navbar-fixed-topというclassを追加するとサイトの1番上にheaderが固定されます。
headerをサイトの1番下に固定したいときは、<nav>タグに.navbar-fixed-bottomを追加してください。

< 参考 ⑤ >

.navbar-fixed-top {
    top: 0;
    right: 0;
    left: 0;
    border-width: 0 0 1px;
    position: fixed;
    z-index: 1030;
}

横幅 768px 以上〜
    navbar-fixed-top {
        border-radius: 0;
    }
  • .navbar-fixed-top <nav>のポジションを指定
  • 横幅 768px 以上〜
    • .navbar-fixed-top .navbarのborder-radius: 4px;を0に指定

まとめ・次回予告

headerはcollapseを使用するとレスポンシブ対応にでき、<nav>タグに.navbar-fixed-topを追加すると固定することができます。
次回は、footerの作成方法について紹介をしていきます!

関連投稿

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

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

第1回目 簡単にホームページが作れるBootstrap!

Bootstrapについて Bootstrapとは、CSSフレームワークの1つです。Bootstrapを使用すれば難しいことを考えずに初心者でも簡単にホームページを作成できます! スマートフォン・タブレットに対応のレスポンシ...

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

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

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

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

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

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