ヘッダーにナビゲーションを作る
- 帯状のナビゲーションを作る。ナビゲーションの見栄えはボディー全体。
- ボタンの部分はセンター揃え
- ボディー全体の横幅を使うのは、ナビゲーションだけで、他のコンテンツは横幅960pxとする。
- このパターンで作る手順を、パターン化しておきたい。
気をつけること（まとめ）
- <ul></ul> を<div id="nav"></div>で囲んでしまう。
- #div には、横幅を指定しない。つまり、ボディー全体。ボディーの横幅全体に帯を作るのだから、background は#nav につける。
- ボタンの部分はボディー中央に揃えたいので、<ul>には幅指定（960px）して、ボディー中央に置くのだから、margin: 0 auto;（親要素の幅＝ボディーの幅）
- borderは必ず、li a に指定する。こうすると、liの幅が変わらなくてすむ。
- <li> で高さを指定する。そして、<li><a>のline-height; に<li>の高さと同じ値を指定すると、<li>の高さのセンターに文字が配置できる。
- <li>に対して、インライン要素の<a> は子要素に当たる。だから1番左の<li>の<a>に指定したborder を削除したいときは、#nav li:first-child a{border: none;}となる。これは、<ul>の中で1番目の子要素に当たる<li>の<a>ということになる。#nav li a:first-child は、<li>の中の1番目の子要素に当たる<a>を指定するので、すべてのボーダーが消えてしまう。なぜなら、どの<a>も、<li>の直下にある子要素だから。
@charset "utf-8";
/* CSS Document */
html, body, h1, h2, h3, h4, p, ul, li, img, a{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body:{
font-size: 16px;
}
ul, li{
list-style-type: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;
}
/*reset------------------------------------------------------------------------------
*/
h1, h2{
text-align: center;
margin-bottom: 16px;
font-size: 48px;
}
h3{
font-size: 32px;
margin-bottom: 16px;
}
h4{
font-size: 24px;
margin-bottom: 16px;
}
p{
margin-bottom: 16px;
}
p.text{
line-height : 1.6;
margin-bottom: 16px;
padding: 0 0.5em 0 0.5em;
}
#header{
padding-top: 16px;
}
#nav{
background: #630;/*background は#nav につける。*/
margin-bottom: 32px;
}
#nav ul{
width: 960px;/*<ul>には幅指定*/
margin: 0 auto;
overflow: hidden;
}
#nav li{
width: 240px;
height: 50px;
float: left;
text-align: center;
}#nav li a{
display: block;
border-left: 1px solid white;/*borderは必ず、li a に指定する。こうすると、liの幅が変わらなくてすむ。*/
line-height: 50px;
color: white;
font-weight: bold;
}
#nav li:first-child a{
border-left: none;
}
#nav il a:hover{
color: red;
}
/*headder------------------------------------------------------------------------------------------
*/
#wrapper{
width: 960px;
margin: 0 auto;
overflow: hidden}
#main{
width: 600px;
float: left;
}
#side{
width: 300px;
float: right;
}
#footer{
background: #409F3E;
text-align: center;
height: 100px;
}
#footer p{
line-height: 100px;
color: white;
}
.text a{
color: blue;
}
.text a:hover{
color: red;
}
