[CSS]リストの親子関係を利用したナビゲーションの制作(4/2)

ナビゲーションブロックとは

ナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつで、項目を列挙したものといえます。リンクの価値は同質なので、番号のない箇条書きとして扱います。
リストをナビゲーション - Webデザインの勉強 | Webサイト制作科 3月16日開講クラス

縦レイアウト。hoverで色反転させる。

f:id:akatonbo_web:20150406101319p:plain

<body>
<div id="nav">
<ul>
<li><a href="#">title1</a></li>
<li><a href="#">title2</a></li>
<li><a href="#">title3</a></li>
<li><a href="#" class="bottom">title4</a></li>
</ul>
</div>
</body>    
</html>

@chaset "utf-8";
/* reset */
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li{
line-height: 1.0;
margin: 0;
padding: 0;
font-family:
"ヒラギノ明朝 ProN",
"HG明朝E",
"ＭＳ Ｐ明朝",
"ＭＳ 明朝",
serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* body */
body{
font-size: 16px; 
}
/* nav */
#nav{
  width: 180px;
  margin: 50px 0 0 50px;
  font-weight: bold;
}
#nav ul li a{
  display: block;
  line-height: 40px;
  padding: 0 2em;
  border: 2px solid black;
  border-bottom: none;
  background-color: orange;
}
#nav ul li a.bottom{
  border-bottom: 2px solid black;
}
/* 擬似クラス　*/
#nav ul li a:hover{
  background-color: white;
  border: 2px solid orange;
  border-bottom: none;
}
#nav ul li a.bottom:hover{
  border-bottom: 2px solid orange;
}

line-heightで高さを設定
display:blockでリンク判定を設定
一番下のラインのみclass指定で表示

横レイアウト。hoverで色反転させる。

f:id:akatonbo_web:20150406101325p:plain

@chaset "utf-8";

/* reset */
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li{
line-height: 1.0;
margin: 0;
padding: 0;
font-family:
"ヒラギノ明朝 ProN",
"HG P明朝",
"ＭＳ Ｐ明朝",
"ＭＳ明朝",
serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* body */
body {
font-size: 16px;
}
#nav {
}
#nav ul{
overflow: hidden;
width: 320px;
}
#nav ul li{
width: 80px;
float: left;
line-height: 40px;
}
#nav ul li a{
display: block;
background-color: orange;
padding: 0 0 0 1em;
border: 2px solid black;
border-right: none;
}
#nav ul li a.right{
border-right: 2px solid black;
}
/* 擬似クラス */
#nav ul li a:hover {
background-color: white;
border: 2px solid orange;
}
#nav ul li a.right:hover {
border-right: 2px solid orange;
}

ulはレイアウト幅widthを指定
ulはliの親なのでoverflow:hidden指定
liは個々のwidthを指定、floatで回り込み
li aにborder,display:block,border-rightを指定
最後だけ線をclass:rightで描画