くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[HTML・CSS]復習

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

f:id:pleasure10501:20150316210321p:plain

<条件>

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

 

1)色付き部分の幅の求め方
  #container:幅 840px =#headerと左右のpaddingを含む 
                            → 840 - 20×2 = 800px

 

2)ナビゲーション

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

 

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

 

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

 

広告を非表示にする