ヘッダー、フッターを作っていく

ハッダーを作っていく

<li>...<li>

を使うと点（・）がつくからこれを外す。
つまりこの要素にプロパティをつける。

li {
  list-style: none;
}

これで点が外れる

実際使ってみる

application.css

li {
  background-color: #808000;
  list-style: none;
}

気づき

点が消えた。成功！

ヘッダーのメニューを横並びにする。

application.css

.title {
  background-color: #00ffff;
  font-size: 36px;
  float: left;
}

li {
  background-color: #808000;
  list-style: none;
  float: left;

気づき

なんかそれっぽくなっていきた。

padding 要素の余白をつける

padding-top（上）,padding-right（右）,padding-bottom（下）,padding-left（左）
それぞれの余白を作ることができる。
上下右左を書くことがめんどくさいので省略形がある。

padding: 10px, 20px, 30px, 40px;

フッター

    <div class="footer">
      <!-- <div>要素を追加し、「footer-logo」というclassをつけてください -->
      <div class="footer-logo">Progate</div>
      
      <!-- <div>要素を追加し、「footer-list」というclassをつけてください -->
      <div class="footer-list">
        <li>*****</li>
        <li>***</li>
        <li>********</li>
      </div>
      
    </div>

入れ子のセレクタ

特定のクラスのセレクタにプロパティで指定する

例

.header_list li {}

上のようにクラスとセレクタをスペースを入れて書く。