HTML CSSのヘッダー、メイン、フッターを勉強した

コードに訳をつけながら書いてみました。
#ヘッダー
    <div class="header">
      <div class="header-logo">タイトル名</div>
      <div class="header-list">
        <ul>
          <li>書きたい内容</li>
          <li>書きたい内容</li>
          <li>書きたい内容</li>
        </ul>
      </div>
    </div>
```
.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}
.header-logo {
  font-size: 36px;
  float: left;
  padding: 20px 40px;
}
.header-list li{
  float: left;
  padding: 33px 20px
}
```
例　```<h1>あいうえお</h1>```
<>をタグという。最初を開始タグ、次を終了タグと呼ぶ。
またタグで挟まれたものをコンテンツという。
例の全体を要素という。
要素を作ることをマークアップという

```
    <div class="main">
      <div class="copy-container">
        <h1>書きたい見出し<span>.</span></h1>
        <h2>書きたい見出し</h2>
      </div>
      
      <div class="contents">
        <h3 class="section-title">タイトル名</h3>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
        <div class="contents-item">
          <img src="任意のURL">
          <p>書きたい項目</p>
        </div>
      </div>
    </div>
```
メイン要素はcopy-container,contents,contact-formで構成される。
pは段落を表す。改行して表示される。
class="section-title"は見出しに使う。
#メインのCSS

```
.main { /*メイン*/
 padding: 100px 80px; /*borderの内側の余白を上下100px左右80px*/
}

.copy-container h1 { /*見出し*/
  font-size: 140px; 
}

.copy-container h2 { /*小見出し*/
  font-size: 60px;
}

.copy-container span { /*spanに囲まれた部分*/
  color: #ff4a4a;
}

.contents {
  height: 500px; /*高さ500px*/
  margin-top: 100px;
}

.section-title {
  border-bottom: 2px solid #dee7ec;/*枠線の太さ　枠線の色*/
  font-size: 28px;
  padding-bottom: 15px;/*枠線の内側に余白*/
  margin-bottom: 50px;/*枠線の外側に余白*/
}

.contents-item {
  float: left;/*横並びにする*/
  margin-right: 40px;/*枠線の右の外側に余白*/
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;/*枠線の上の外側に余白*/
}
```

#枠、送信ボタン
      <div class="contact-form">
        <h3 class="section-title">書きたい項目</h3>
        <p>書きたい項目</p>
        <input> <!--１行のテキスト入力を受け取るための要素　枠を作ることができる-->
        <p>書きたい項目</p>
        <textarea></textarea><!--複数行のテキスト入力を受け取るための要素　枠を作ることができる-->
        <p>書きたい項目</p>
        <input class="contact-submit" type="submit" value="送信"><!--送信ボタンを作る-->
      </div>
```
.contact-form {
  padding-top: 100px;
}

input, textarea {<!--,をつけることで複数のものを指定できる-->
  width: 400px; <!--枠の幅が400px-->
  margin-top: 10px;<!--枠の余白の外側の10px-->
  margin-bottom: 30px;<!--枠の余白の外側-->
  padding: 20px;<!--枠の大きさ-->
  font-size: 18px;
  border: 1px solid #dee7ec;<!--線の太さ　線の色-->
}

.contact-submit {
  background-color: #dee7ec;<!--送信ボタンの色-->
  color: #889eab;<!--ボタンの文字の色-->
}
```

フッターのCSSは背景色、文字の色、高さ
footer-logoは横に並べて、文字の大きさを指定
#フッター
    <div class="footer">
      <div class="footer-logo">Progate</div>
      <div class="footer-list">
        <ul>
          <li>書きたい項目</li>
          <li>書きたい項目</li>
          <li>書きたい項目</li>
        </ul>
      </div>
    </div>
```
.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;<!--上下左右40pxの余白-->
}

.footer-logo {
  float: left;<!--左側におく-->
  font-size: 32px;
}


.footer-list {
  float: right;<!--右側に置く-->
}

.footer-list li {
  padding-bottom: 20px;
}
```
理解できるように頑張りたい。