学習ログ〜フッター〜

本日の学習

1.フッターの構造
  1-1 フッターの枠組み
  1-2 フッターのレイアウト
  1-3 入れ子のセレクター
2.フッターのレイアウト
  2-1 float: right
  2-2 要素を左右に配置する

1.フッターの構造

1-1 フッターの枠組み

<div class="footer">

 <div class="footer-logo">Progate</div>
 ↑①ロゴの<div>要素

↓②フッターのリスト<div>要素
 <div class="footer-list">
   <ul>
    <li>会社概要</li>
   </ul>
  </div>

</div>

1-2 フッターのレイアウト

ヘッダーの<li>要素全体にfloatとpaddingを指定すると、
フッターの<li>要素にも適用される。

1-3 入れ子のセレクター

.header-listとliの間にスペースを空けると、
header-listの中の<li>要素のみCSS適用する事ができる。

HTML

<ul class="header-list">
   <li>ヘッダーリスト</li>
   <li>ヘッダーリスト</li>
</ul>

<ul class="footer-list">
  <li>フッターリスト</li>
</ul>

CSS

.header-list li {

 color: #ff0000 ;
}

2.フッターのレイアウト

2-1 float: right 
指定した要素を右から順に横並びにする事ができる

HTML

<ul>
   <li>HTML</li>
   <li>PHP</li>
   <li>Rudy</li>
</ul>

CSS

li {
  float: right;
  }

  2-2 要素を左右に配置する
 ロゴとリスト全体を左右に配置する事ができる。

float: left; 左に
float: right; 右に

本日のまとめ

コードの答え合わせで少しつまずいてしまい、自分の書いたものと答えを比べながら間違えているところを確認してみると初歩的なミスが多かった。
一番多かったのはスペルミスと改行とスペースを空けるところのミス　　

早く打てる事が理想だけど、まだまだその域まで実力が達していないから、
間違えなく打てることを意識しようと思う。