【もう挫折しない】Progate HTML＆CSS 道場コース攻略【初級編】 

# はじめに

この記事は駆け出しエンジニアの最初の難関であるProgateの道場コースを今まさに挫折しかけている人に向け、ひとつひとつ実践と解説を交え、一緒に攻略しようという趣旨のものとなります。

# できるようになること

道場コースHTML & CSS初級編をクリアできます。

# 全体像の確認

まずは全体像を把握しましょう。
![スクリーンショット 2020-10-20 5.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/02787517-d3b1-8d30-6f5d-c82f3bb243ae.png)

とりあえず大きく３つのdiv要素に分けてみましょう。
![スクリーンショット 2020-10-20 5.46..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/1a748bfc-1e43-dca1-dde3-9be7d424e8b2.png)


**header**、**main**、**footer**に分けることができました。
道場コースの手順通り、最初は**header**から攻めていくことにします。

# headar
**headar**を各div要素ごとに分けるとこんな感じです。
![スクリーンショット 2020-10-23 20.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/da2a2229-f97b-7ab0-7391-e1b523ec8df4.png)



```html:index.html
<div class="header">
  <div class="header-logo"></div>
  <div class="header-list"></div>
</div>
```

***

**header-list**内はul要素で構成されています。
そこに文字を入れちゃいましょう。

```html:index.html
<div class="header">
  <div class="header-logo">Progate</div>
  <div class="header-list">
    <ul>
      <li>プログラミングとは</li>
      <li>学べるレッスン</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</div>
```


***
現状はこんな感じです。
![スクリーンショット 2020-10-20 7.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/dcba3871-6641-95dd-b38a-3760227dbe7a.png)

**※Progateではデフォルトでli要素に対し`list-style: none;`が適用されているので頭の「・」は無くなっています。本来は手動で`list-style: none;`を付ける必要があります。**
***


ではCSSを付けていきましょう。
まずは**header**クラスの背景色を付けます。

```css:stylesheet.css
.header {
  background-color: #26d0c9;
}
```
![スクリーンショット 2020-10-20 7.25.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/04139096-7623-0500-e7ac-21b6a0da4128.png)

divはブロック要素なのでwidth（幅）とheight(高さ)を指定しなければ、
**・幅は親要素のwidth(ここではbody)に依存します。**
**・高さは含まれる内容の高さ分追加されます。**

***

では次に要素を横並びにしましょう。
ここで初級道場コースの番人こと、**「float」**が登場します。

「float」の機能を簡単に説明します。
`float: left;` 　 ＝ 　  **左に寄せる**
`float: right;`　＝   　 **右に寄せる**

まず**header-logo**に対して`float: left;`を適応させましょう。

```css:stylesheet.css
.header {
  background-color: #26d0c9;
}

.header-logo {
  float: left;
}
```
すると
![スクリーンショット 2020-10-20 8.40.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/b56dab33-ccb9-5edb-43cf-b93e98d50d90.png)
***
**「ん？なんで「Progate」と「プログラミングとは」が横並びになってるの？？」**
と思った方がいるかも知れません。

`float: left;`   は「左に寄せる」ですが、正確には**「浮かせて左に寄せる」**です。

ではこれの見る角度を変えて見ましょう![スクリーンショット 2020-10-20 8.56.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/0dc379f3-af1b-b19d-bc06-d5160012f094.png)
***
**header-logo**に対して`float: left;`を適応させると・・・
![スクリーンショット 2020-10-20 8.5..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/dd685285-5a82-b273-409c-1fb8dce2ee9a.png)
***
**header-logo**が浮きました！
しかしこのままでは文字が被ってしまうので自動的に文字が移動します。![スクリーンショット 2020-10-20 8...png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/361cfab7-d727-98f7-b85a-2488866d034d.png)

***

ではfloatの仕様がわかったところで次は**header-list**のそれぞれのli要素に`float: left;` を適用させましょう。

```css:stylesheet.css
.header {
  background-color: #26d0c9;
}

.header-logo {
  float: left;
}

.header-list li {
  float: left;
}
```

これでheader-list内のそれぞれのli要素が**上から順番に浮いて左に寄る**はずです。
![スクリーンショット 2020-10-20 10.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/87c75d00-9c42-9b20-d62e-9c0385387767.png)
***
できました！

・・・が背景色が消えてしまいました。

これはブロック要素の**中身が無ければ高さが無くなる**という性質が原因となっています。
![スクリーンショット 2020-10-20 8..png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d41b110b-3cc9-b2a3-5cbd-5142a8e5835b.png)
![スクリーンショット 2020-10-20 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d076f892-fc03-3e4b-9338-394bbb6e4166.png)

***

仕様書の指定通り、**header-logo**に高さを指定して上げましょう。

```css:stylesheet.css
.header {
  background-color: #26d0c9;
  height: 90px;
}

.header-logo {
  float: left;
}

.header-list li {
  float: left;
}
```
![スクリーンショット 2020-10-20 11.12.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/b7b2e41b-9010-ebda-7769-8dedcdcb1dd2.png)
***
いい感じですね！
続いて**header**内のスタイルを整えて行きましょう。

まずは`margin`を使って間隔を空けます。

```css:stylesheet.css
.header {
  background-color: #26d0c9;
  height: 90px;
}

.header-logo {
  float: left;
  margin: 20px 40px;
}

.header-list li {
  float: left;
  margin: 33px 20px;
}
```
![スクリーンショット 2020-10-25 16.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/a3938f74-42a3-b357-1c8f-76e94fe3e34d.png)
***
間隔を開ける方法として`margin`と`padding`があります。
最初はこれがどっちがどっちか分からなくなるものなので、ここで詳しく解説しておきます。


**header-logo**を例にとってみましょう
![スクリーンショット 2020-10-25 16.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d23f6d89-7ba6-a05c-c70b-7adf6c7b3ed4.png)

わかりやすくする為**header-logo**に対し`border`を指定します。

```css:stylesheet.css
.header-logo {
  float: left;
  margin: 20px 40px;
  border: 1px solid black;
}
```
![スクリーンショット 2020-10-25 16.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/5d9621b4-fa38-d472-dacb-22e843e8d1de.png)

では、まずは`margin`を変更してみます。
上下の`margin`を40pxにします。

```css:stylesheet.css
.header-logo {
  float: left;
  margin: 40px 40px;
  border: 1px solid black;
}
```
![スクリーンショット 2020-10-25 17.04.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/572e0729-fc46-3cef-7de2-a2391df95b01.png)

するとボーダーラインごと**header-logo**が動きましたね。

***

続いて`padding`を指定してみます。

```css:stylesheet.css
.header-logo {
  float: left;
  margin: 40px 40px;
  padding: 10px;
  border: 1px solid black;
}
```
![スクリーンショット 2020-10-25 17.06.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d2cbf2df-b333-13c9-9759-389b77722ce0.png)

今度はボーダラインの内側の間隔が空いたのがわかります。

要は
`margin`は**ボーダーラインの外側**に間隔を空ける
`padding`は**ボーダーラインの内側**に間隔を空ける
ということになります。
![スクリーンショット 2020-10-25 17.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/f19621e8-a4d3-5a13-5c67-714251194844.png)

***

では**header**を完成させましょう。
あとは**header-logo**の`font-size`とテキストの色を変えればOKです。

```css:stylesheet.css
.header {
  background-color: #26d0c9;
  height: 90px;
  color: #fff; /*親要素に指定すれば子要素にも適用されます*/
}

.header-logo {
  float: left;
  margin: 20px 40px;
  font-size: 36px;
}

.header-list li {
  float: left;
  margin: 33px 20px;
}
```
![スクリーンショット 2020-10-25 17.42.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/9bbafe80-daf7-6399-22a6-3aa06c8a1beb.png)

これで**header**の完成です！

# main

次に**main**を作っていきます。
**main**はたくさんの要素がありますが、ひとつひとつ落ち着いて見ていきましょう。

とりあえず、**main**を大きく3つのdiv要素に分けてみます。
![スクリーンショット 2020-10-26 9.22.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/66e5ca9e-a9c2-d7bc-19e0-3066b4cc73b1.png)

```html:index.html
<div class="header">
  <div class="header-logo">Progate</div>
  <div class="header-list">
    <ul>
      <li>プログラミングとは</li>
      <li>学べるレッスン</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</div>
<!-- ↓ここから -->
<div class="main">
  <div class="copy-container"></div>
  <div class="contents"></div>
  <div class="contact-form"></div>
</div>
```
***

さて、では**copy-container**から攻めて行きます。
ここは簡単です、各テキストはｈ1、ｈ２タグで構成されています。
![スクリーンショット 2020-10-26 9.44.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/49668e9e-05c9-86de-4e0d-5ca5cfa4e11c.png)

そして、「 . 」のみが赤色になっているので、あとでスタイルを付ける為にspanタグで囲ってあげましょう

```html:index.html
<div class="copy-container">
   <h1>HELLO WORLD<span>.</span></h1>
   <h2>プログラミングの世界へようこそ</h2>
</div>
```
![スクリーンショット 2020-10-26 9.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/33f47073-89e7-ea49-ca9e-9b2aae5a5513.png)

現状こんな感じです。

***

次に仕様書の通りスタイルを付けていきます

```css:stylesheet.css
.header-list li {
  float: left;
  margin: 33px 20px;
}

/* ↓ここから */
.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
}

.copy-container span {
  color: #ff4a4a
}
```
![スクリーンショット 2020-10-26 10.21.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/4624f731-9d52-08b8-d917-bd583a366640.png)

こんな感じになったと思います。
**main**の`padding-bottom`は最終的に100pxになるので今のうちに付けています。

***
***

では**contents**に移ります。
ここはまた**float**が入ってくるので少しややこしく感じるかも知れません。

とりあえず、**contents**を各要素に分けてみます。
![スクリーンショット 2020-10-26 10.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/0fe97796-a6f7-6aaa-ca3a-a77ec568ce2f.png)


```html:index.html
<div class="main">
  <div class="copy-container">
    <h1>HELLO WORLD<span>.</span></h1>
    <h2>プログラミングの世界へようこそ</h2>
  </div>
  <!-- ↓ここから -->
  <div class="contents">
    <h3 class="section-title"></h3>
    <!-- item1 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
    <!-- item2 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
    <!-- item3 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
    <!-- item4 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
  </div>
```
急に記述が長くなるとどれがどれだか分からなくなりますよねｗ
落ち着いてコメントアウトを活用しつつ、少しでも見やすくしましょう。

***

さぁ、雛形はできたので、あとは必要な項目を入れていくだけです。
画像のURLはProgateのヒントからコピペしましょう。

```html:index.html
  <div class="contents">
    <h3 class="section-title">学べるレッスン</h3>
    <!-- item1 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
      <p>HTML & CSS</p>
    </div>
    <!-- item2 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
      <p>PHP</p>
    </div>
    <!-- item3 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
      <p>Ruby</p>
    </div>
    <!-- item4 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
      <p>Swift</p>
    </div>
  </div>
```
![スクリーンショット 2020-10-26 11.28.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d2a705b7-8a01-a36d-710f-eb9fe8e2c7e9.png)

材料は揃いました。
スタイルを付けて行きましょう。

*** 

まず、横並びから片付けましょう。
**flaot**の概念を理解したあなたにはもう解りますよね？

```css:stylesheet.css
.copy-container span {
  color: #ff4a4a
}
/* ↓ここから */
.contents-item {
  float: left;
}
```
![スクリーンショット 2020-10-26 11.46.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/cb68a6fe-798e-a776-e034-bf524442f177.png)
***

できました！

しかし、**flaot**の処理はこれで終わりではありません。
確か**flaot**で**浮いた**分だけ、親要素の高さ(height)は消えてしまうのでしたね？
現状、親要素**contents**の高さは**contents**の中にある**section-title**の高さ分しかありません。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3633353835322f36643430363537652d343666312d646161392d353334642d6364383431373364653630622e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/2680f3e6-de3a-0b66-2bc4-d97fe2d9be6c.png)


***
このままだと次の要素を追加してもレイアウトが崩れてしまいます。
![スクリーンショット 2020-10-26 12.00.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/4cd73a1d-d1ab-9d94-d27d-021e90151b5b.png)

***
　　　　　　　　　　　　　　↓角度をかえると・・・
![スクリーンショット 2020-10-26 12.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/4d1ecaa5-57b7-49a4-114f-61aa516abcc5.png)
***

Progateの仕様書通り、**contents**の`height`を500pxにしてあげましょう。

```css:stylesheet.css
.copy-container span {
  color: #ff4a4a
}

.contents {
  height: 500px;
}

.contents-item {
  float: left;
}
```

![スクリーンショット 2020-10-26 12.57.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/7b466d31-736f-0e1c-a542-39f7503dd49c.png)

OKです！
***

さぁ、ここまでできたらもう少しです。
あとは仕様書通りにスタイルを付けましょう。

```css:stylesheet.css
.contents {
  height: 500px;
}

.contents-item {
  float: left;
}

.section-title {
  font-size: 28px;
  border-bottom: 2px solid #dee7ec;
  /* ↓paddingとmarginを上手く使い分ける必要があります */
  padding-bottom: 15px;
  margin: 100px 0 50px;
}

.contents-item {
  margin-right: 40px;
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}
```
![スクリーンショット 2020-10-26 13.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/77a2de9c-62af-fb40-9b0a-2e31422d2181.png)
***
いいですね！
ここまで来るとあとは折り返しです！
頑張りましょう！

***
***
**main**部の最後**contact-form**に入ります。
例のごとく、各要素ごとに分けていきます。
![スクリーンショット 2020-10-26 13.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/08ce73ba-6644-9c30-e21d-b5790ba73fc0.png)

```html:index.html
  <!-- item4 -->
  <div class="contents-item">
    <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
    <p>Swift</p>
  </div>
</div>
 <!-- ↓ここから -->
<div class="contact-form">
  <h3 class="section-title">お問い合わせ</h3>
  <p>メールアドレス（必須）</p>
  <input type="text">
  <p>お問い合わせ内容（必須）</p>
  <textarea></textarea>
  <p>※必須項目は必ずご入力ください</p>
  <input type="submit" value="送信" class="contact-submit">
</div>
```
深く考えずにポンポンと置いていけば良いですね。
送信ボタンには**contact-submit**クラスを付けてあげましょう。
***

現状はこんな感じです。
![スクリーンショット 2020-10-26 14.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/1c3cb1cb-6963-1f39-c642-f9dc07338c53.png)
***
スタイルに関しても仕様書通りにやればいけそうです
**section-title**には前にスタイルを付けているので触る必要はないですね。



```css:stylesheet.css
.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}
/* ↓ここから */
input, textarea {
  width: 400px;
  padding: 20px;
  margin: 10px 0 30px;
  border: 1px solid #dee4ec;
}

.contact-submit {
  font-size: 18px;
  background-color: #dee7ec;
  color: #889eab;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/5349c4e5-60ba-5312-c611-59d8cc3324a9.png)

これで**main**は終わりです！
次でいよいよラストです！

# footer
**footer**の構成はこんな感じです。
ここでも**float**を使う必要がありそうですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/27d33f68-849a-542c-38ef-cdc8567ec19b.png)
***
とりあえずHTMLを置いて行きます。

```html:index.html
        <p>※必須項目は必ずご入力ください</p>
        <input type="submit" value="送信" class="contact-submit">
      </div>
    </div>
    <!-- ↓ここから -->
    <div class="footer">
      <div class="footer-logo">Progate</div>
      <div class="footer-list">
        <ul>
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </div>

```
***
そして、**float**以外のスタイルは付けてしまいますね。

```css:stylesheet.css
.contact-submit {
  font-size: 18px;
  background-color: #dee7ec;
  color: #889eab;
}
/* ↓ここから */
.footer {
  color: #fff;
  height: 120px;
  background-color: #2f5167;
  padding: 40px;
}

.footer-logo {
  font-size: 32px;
}

.footer-list {
  
}

.footer-list li {
  margin-bottom: 20px;
}
```
こんな感じになっているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d4d71d6e-dd3d-62c3-494f-52c8e2a640c9.png)
***
ここからやりたいことは**footer-list**を右に持っていくことですね。
では**footer-list**に`float: right;`を適用させてやれば良さそうです。

```css:stylesheet.css
.footer {
  color: #fff;
  height: 120px;
  background-color: #2f5167;
  padding: 40px;
}

.footer-logo {
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  margin-bottom: 20px;
}
```
***
　　　　　　　　　　　　　　　　　すると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/8ca704ad-087e-7686-14e7-7d6a2a41fe25.png)
**header-list**の位置が少し下にズレていますね。
これだけでは足りないようです。
***
**header-logo**にも**float**を適用させましょう。

```css:stylesheet.css

.footer-logo {
  font-size: 32px;
  float: left;
}

.footer-list {
  float: right;
}

.footer-list li {
  margin-bottom: 20px;
}
```

![スクリーンショット 2020-11-12 7.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/18707dfa-c1fe-0ed5-fdd3-df9200243aee.png)

#完成！
ここまでお疲れ様でした！

良いProgateライフを！！