webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

nav を作る手順をもう1回確認する / えだまめ

ヘッダーにナビゲーションを作る

  • 帯状のナビゲーションを作る。ナビゲーションの見栄えはボディー全体。
  • ボタンの部分はセンター揃え
  • ボディー全体の横幅を使うのは、ナビゲーションだけで、他のコンテンツは横幅960pxとする。
  • このパターンで作る手順を、パターン化しておきたい。

気をつけること(まとめ)

  1. <ul></ul> を<div id="nav"></div>で囲んでしまう。
  2. #div には、横幅を指定しない。つまり、ボディー全体。ボディーの横幅全体に帯を作るのだから、background は#nav につける。
  3. ボタンの部分はボディー中央に揃えたいので、<ul>には幅指定(960px)して、ボディー中央に置くのだから、margin: 0 auto;(親要素の幅=ボディーの幅)
  4. borderは必ず、li a に指定する。こうすると、liの幅が変わらなくてすむ。
  5. <li> で高さを指定する。そして、<li><a>のline-height; に<li>の高さと同じ値を指定すると、<li>の高さのセンターに文字が配置できる。
  6. <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>の直下にある子要素だから。

f:id:ohta-felica:20160527000249p:plain

@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;
}