＃02:リストとナビゲーションバーを追加しよう
ここでは、Webページに箇条書きのリストを追加します。さらに、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>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
background-color: lightgray;
}
.starter-template {
padding: 40px 15px;
background-color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Nyaan</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#list">List</a></li>
<li><a href="">Table</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>吾輩は猫である。</h1>
<p class="lead">名前はまだない。</p>
<img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
</p>
<h2 id="list">動物リスト</h2>
<ul class="list-group">
<li class="list-group-item">ねこ</li>
<li class="list-group-item">いぬ</li>
<li class="list-group-item">うさぎ</li>
</ul>
<a class="btn btn-primary" href="#">OK</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</div>
</div>
</body>
</html>・見出し
<h1>と</h1>の間が、表題になる。
<h2>と</h2>の間が、大見出しになる。
<h3>と</h3>の間が、中見出しになる。
<h4>と</h4>の間が、小見出しになる。
・箇条書き
<ul>
<li>ねこ</li>
<li>いぬ</li>
<li>うさぎ</li>
</ul>アンカータグのhref属性に「#(id名)」と記述すると、そのid名を持つ要素へのページ内リンクになります。
<a href="#list">List</a>
<h2 id="list">動物リスト</h2>Photo by bartlettbee CC BY 2.0
8726415925_0e733f1c84_k.jpg
Cat | Flickr - Photo Sharing!
https://www.flickr.com/photos/88534689@N08/8726415925/in/photostream/