CSS：ナビゲーション：基本 - Webデザインのこと、いろいろ

★レギュレーション：複数ページをつくるときのルールになる型
　いつでも作れるようにしておく
◎縦ナビゲーション
f:id:sankoblog:20160405160856p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦ナビゲーション</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('click',function(){
		});
});
</script>
<style>
/*reset*/
html,body,nav,ul,li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
	}
.nav {  /*レスポンシブでは親要素に幅をつける*/
	width: 300px;
	margin: 100px auto;
}
li {  /*文字についてのことだけ書く*/
	font-size: 20px;
	font-weight: bold;
}
li a{
	display: block;
	cursor: pointer;
	line-height: 50px;
	margin-bottom: 5px;
	color: #FFF;
	padding-left: 1em;
	background: #000;
}
li a:link, li a:visited {
	background: #69C;
}
li a:hover{
	background: #F90;
}
	
/*----------------------------------*/
</style>
</head>
<body>
<nav>
<ul class="nav">
<li><a herf="#">カテゴリA</a></li>
<li><a herf="#">カテゴリB</a></li>
<li><a herf="#">カテゴリC</a></li>
</ul><!--.nav-->
</nav>
</body>
</html>

◎横ナビゲーション
f:id:sankoblog:20160405164559p:plain
横ナビゲーション：完成版にリンク

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>横ナビゲーション</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('click',function(){
		});
});
</script>
<style>
/*reset*/
html,body,nav,ul,li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
	}
.nav {  /*レスポンシブでは親要素に幅をつける*/
	width: 600px;
	margin: 100px auto;
	overflow: hidden;
}
li {  /*文字についてのことだけ書く*/
	width: 200px;
	height: 50px;  /*line-heightと同じでよい*/
	font-size: 20px;
	font-weight: bold;
	float: left;
}
li a{
	display: block;
	cursor: pointer;
	line-height: 50px;
	color: #FFF;
	text-align: center;
	border-left: 2px solid #FFF;
	background: #000;
}
li:first-child a {
	border-left: none;
}
li a:link, li a:visited {
	background: #69C;
}
li a:hover{
	background: #F90;
}
	
/*----------------------------------*/
</style>
</head>
<body>
<nav>
<ul class="nav">
<li><a herf="#">カテゴリA</a></li>
<li><a herf="#">カテゴリB</a></li>
<li><a herf="#">カテゴリC</a></li>
</ul><!--.nav-->
</nav>
</body>
</html>