［HTML・CSS］復習

HTMLとCSSの、間違いやすいポイント

＜条件＞

• #container：幅 840px・上の空き無し・左右は自動空き
• #header：高さ100px
• #nav：幅160px・高さ50pxのナビゲーションボタンが５個（nav1～nav5）
• #content：幅500px・高さ300px
• #footer：下余白50px
• 背景色は、見本を参考に適宜
• 擬似クラスは、マウスオーバー時点で文字色「黒」に

---

１）色付き部分の幅の求め方
　　#container：幅 840px　＝#headerと左右のpaddingを含む　
                            →　840 - 20×2　＝　800px

２）ナビゲーション

1. ナビゲーションボタンの幅160px  →　li　に指定
2. ナビゲーションボタンの高さ50px  →　li a　にline-heightで指定
3. ナビゲーションボタンの文字以外の面を押せるようにする
      　→　li a にdisplay:block
4. float:leftを指定する
   <ul>にoverflow:hidden
   <li>にfloat:left
5. 枠線がnav1〜nav5の間だけある　→　<li>に右側のborder指定し、nav5はボーダー指定をしない
   　手順①　nav5にクラス名「last」(nav5でもよい)を付ける
   　手順② 　#nav li aにボーダー指定　 {  border-right: 2px solid #FFF; }
   　手順③　#nav li.last a のボーダー指定を外す　{ border: none; }　
6. 擬似クラスは、マウスオーバー時点で文字色「黒」に
   　→　#nav li a:hover { color: #000; }

［ CSS ］

#nav ul {
  overflow: hidden;
  margin-bottom: 20px;
}
#nav li {
  float: left;
    width: 160px;
  text-align: center;
}
#nav li a {
  display: block;
  line-height: 50px;
    border-right: 2px solid #FFF;
    color: #FFF;
    background: #AAA;
}
#nav li a:hover {
  color: #000;
}
#nav li.last a {
  border: none;
}

３）#contentはfloat:right、#sidebarはfloat: left;を指定。
　　#contentと#sidebarを含む#wrapperを作っておき、#wrapperにはoverflow: hidden;　を指定する

４）#footer：下余白50px
#footerは文字のことなので、padding-bottom: 50px;　が正しい