2017.03.06 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>タグの上下の幅を指定