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

第6回目 Bootstrap headerを作成してみよう!

headerについて

第6回目からは、サイトのheaderを作成する方法についての紹介をしていきます。
サイトの1番上に表示されるheaderは、デザインも動きもしっかり作りこみたいですね!
レスポンシブサイトのheaderについても紹介をしていきます!
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

headerを作成する準備

第2回目に紹介をした方法でindex.htmlを作成し、Bootstrapを読み込むところまで準備をしてください。

< 参考 ① >

<!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"></nav>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
赤の文字になっているコードをindex.htmlに追加すると< 参考 ② >のグレーの四角がサイトの1番上に表示されます。

< 参考 ② >

ここで新しく<nav>というタグが登場しました!
<nav>というのは、ナビゲーションのことです。
ナビゲーションとは、サイト内のリンクを集めたメニューです。
ヘッダーに使用されているのはグローバルナビゲーションと呼ばれ、サイト全体の構造など大項目のリンク集めたメニューとなり、全ページに共通して表示されます。

<nav>タグのclass

headerを作成するときに.navbarのclassが必要となります。
色を変更する場合は.navbar-default(グレー) .navbar-inverse(黒)のclassを使用すると変更できます。
今回は.navbar-default(グレー)を使用します。

< 参考 ③ >

.navbar {
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

横幅 768px 以上〜
.navbar {
    border-radius: 4px;
}
  • .navbar 高さを指定
  • .navbar-default 色を指定
  • 横幅 768px 以上〜
    • .navbar 角が丸くなるように指定

.navbar-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">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">サイト名</a>
                </div>
            </div>
        </nav>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
赤の文字になっているコードをindex.htmlに追加すると< 参考 ⑤ >のようにサイト名が表示されます。

< 参考 ⑤ >

< 例 >

< 参考 ⑥ >

.navbar-default .navbar-brand:hover {
    color: #5e5e5e;
    background-color: transparent;
}

横幅 768px 以上〜
    .container >.navbar-header {
        margin-right: 0;
        margin-left: 0;
    }
    .navbar-header {
        float: left;
    }


横幅 768px 未満〜
.container > .navbar-header {
    margin-right: -15px;
    margin-left: -15px;
}
  • .navbar-default .navbar-brand:hover <a>タグ(サイト名)にマウスを乗せたときの色の指定
  • 横幅 768px 以上〜
    • .container >.navbar-header 左右のmargin(横幅)を指定
    • .navbar-header 左側にコンテンツを寄せる
  • 横幅 768px 未満〜
    • .container > .navbar-header 左右のmargin(横幅)を指定
.container > .navbar-headerは画面のサイズに合わせて左右のmargin(横幅)を調節してあるためxsサイズのときにも綺麗に表示されます。

リンクを追加してみよう!

< 参考 ⑦ >

<!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">
                    a class="navbar-brand" href="#">サイト名</a>
                </div>
                <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>
        </nav>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
赤の文字になっているコードをindex.htmlに追加すると< 参考 ⑧ >のようにheaderにリンクが追加されます。

< 参考 ⑨ >

.nav {
    padding-left: 0;
    list-style: none;
}
.nav > li {
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}
.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.navbar-default .navbar-nav > .active > a {
    color: #555;
    background-color: #e7e7e7;
}

横幅 768px 以上〜
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
  • .nav <ul>タグのスタイルを指定
  • .nav > li <li>タグのポジションを指定
  • .nav > li > a <a>タグの幅を調整。display: block;で<a>タグをhoverの幅を<li>タグ全体になるように指定
  • .nav > li > a:hover <a>タグをhoverしたときの色を指定
  • .navbar-nav > li > a <a>タグの上下のは幅を指定
  • .navbar-default .navbar-nav > .active > a <a>タグがactiveのときの色を指定
  • 横幅 768px 以上〜
    • .navbar-nav <ul>タグの位置を指定
    • .navbar-nav > li <li>タグを横並びに指定
    • .navbar-nav > li > a <a>タグの上下の幅を指定

まとめ・次回予告

headerの基本となる部分を作成しました!新しく登場した<nav>タグがポイントです!
次回は、今回作成したheaderをレスポンシブ対応する方法と固定する方法についての紹介をします!

関連投稿

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

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

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

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

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

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

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

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

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

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