学習ログ〜ヘッダー〜

本日の学習

1.ヘッダーの構造
　1-1 ヘッダーの枠組み
　1-2 リスト先頭のマークを消す
2.ヘッダーレイアウト
3.余白の調整
　3-1 padding: 値 ;
　3-2 padding の使い分け
　3-3 paddingのまとめ書き

1.ヘッダーの構造

1-1 ヘッダーの枠組み

ロゴの<div>要素とヘッダーリスト<div>要素でグループ化する

<div class="header">

  <div class="header-logo">Progate</div>

  <div class="header-list">
    <ul>   
   
    </ul>
  </div>
</div>

1-2 リスト先頭のマークを消す
list-styleプロパティを用いてnoneを指定すると、リスト先頭のマークが消える

li{
    list-style: none;
 }

2.ヘッダーレイアウト

float: left;
要素が左に横並びになる

li{
   list-style: none;
  float: left;
}

3.余白の調整
3-1 padding: 値 ;
 上下左右に余白を作る

.logo1{
            padding: 20px;
             ↑上下左右に20pxの余白を追加

　3-2 padding の使い分け

padding-top: 上
padding-bottom: 下
padding-left: 左
padding-right: 右　

3-3 paddingのまとめ書き

個別指定

padding-top:　20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;　

省略形①

padding: 20px 10px 20px 10px;
※top/right/bottom/left 上から時計回りに指定

省略形②

padding: 20px 10px;
※top&right /bottom&left 上下左右の順に指定

本日のまとめ

コード自体は今までで一番おぼえやすかった！
いざ実践で入力すると、コード数も以前の物が引き継がれていて
どの</div>なのかがこんがらがった。
少し遠めでみると『あっ！この<div>の</div>だ！』と気づく。
しっかり確認することが今後の課題！