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>
< 参考 ② >
<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>
< 参考 ⑤ >
< 例 >
< 参考 ⑥ >
.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(横幅)を指定
リンクを追加してみよう!
< 参考 ⑦ >
<!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>
< 参考 ⑧ >
< 例 >
< 参考 ⑨ >
.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>タグの上下の幅を指定