前回の復習
前回は、headerの基本となるサイト名とリンクを作成しました。 第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。 最後にheaderを固定する方法の紹介もします！ こちらの記事は、初心者の方に向けての記事となっております。 Macの環境を前提に紹介をしています。collapseについて
headerにハンバーガーメニューを追加するためには、collapseというjsが必要となります。 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>
＜ 参考 ③ ＞
＜ 例 ＞
id=”sample” data-target=”#sample” idにsampleとつけた場合、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>
＜ 参考 ⑤ ＞
.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に指定
