Help us understand the problem. What is going on with this article?

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

はじめに

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

できるようになること

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

全体像の確認

まずは全体像を把握しましょう。
スクリーンショット 2020-10-20 5.46.44.png

とりあえず大きく3つのdiv要素に分けてみましょう。
スクリーンショット 2020-10-20 5.46..png

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

headar

headarを各div要素ごとに分けるとこんな感じです。
スクリーンショット 2020-10-23 20.32.34.png

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

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

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

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


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

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

スクリーンショット 2020-10-20 7.25.44.png

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


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

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

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

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

.header-logo {
  float: left;
}

すると
スクリーンショット 2020-10-20 8.40.55.png


「ん?なんで「Progate」と「プログラミングとは」が横並びになってるの??」
と思った方がいるかも知れません。

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

ではこれの見る角度を変えて見ましょうスクリーンショット 2020-10-20 8.56.3.png


header-logoに対してfloat: left;を適応させると・・・
スクリーンショット 2020-10-20 8.5..png


header-logoが浮きました!
しかしこのままでは文字が被ってしまうので自動的に文字が移動します。スクリーンショット 2020-10-20 8...png


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

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


できました!

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

これはブロック要素の中身が無ければ高さが無くなるという性質が原因となっています。
スクリーンショット 2020-10-20 8..png
スクリーンショット 2020-10-20 .png


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

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

.header-logo {
  float: left;
}

.header-list li {
  float: left;
}

スクリーンショット 2020-10-20 11.12.41.png


いい感じですね!
続いてheader内のスタイルを整えて行きましょう。

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

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


間隔を開ける方法としてmarginpaddingがあります。
最初はこれがどっちがどっちか分からなくなるものなので、ここで詳しく解説しておきます。

header-logoを例にとってみましょう
スクリーンショット 2020-10-25 16.49.22.png

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

stylesheet.css
.header-logo {
  float: left;
  margin: 20px 40px;
  border: 1px solid black;
}

スクリーンショット 2020-10-25 16.54.04.png

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

stylesheet.css
.header-logo {
  float: left;
  margin: 40px 40px;
  border: 1px solid black;
}

スクリーンショット 2020-10-25 17.04.57.png

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


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

stylesheet.css
.header-logo {
  float: left;
  margin: 40px 40px;
  padding: 10px;
  border: 1px solid black;
}

スクリーンショット 2020-10-25 17.06.14.png

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

要は
marginボーダーラインの外側に間隔を空ける
paddingボーダーラインの内側に間隔を空ける
ということになります。
スクリーンショット 2020-10-25 17.14.42.png


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

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

これでheaderの完成です!

main

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

とりあえず、mainを大きく3つのdiv要素に分けてみます。
スクリーンショット 2020-10-26 9.22.40.png

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から攻めて行きます。
ここは簡単です、各テキストはh1、h2タグで構成されています。
スクリーンショット 2020-10-26 9.44.11.png

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

index.html
<div class="copy-container">
   <h1>HELLO WORLD<span>.</span></h1>
   <h2>プログラミングの世界へようこそ</h2>
</div>

スクリーンショット 2020-10-26 9.59.41.png

現状こんな感じです。


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

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

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



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

とりあえず、contentsを各要素に分けてみます。
スクリーンショット 2020-10-26 10.33.19.png

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>

急に記述が長くなるとどれがどれだか分からなくなりますよねw
落ち着いてコメントアウトを活用しつつ、少しでも見やすくしましょう。


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

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

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


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

stylesheet.css
.copy-container span {
  color: #ff4a4a
}
/* ↓ここから */
.contents-item {
  float: left;
}

スクリーンショット 2020-10-26 11.46.06.png


できました!

しかし、flaotの処理はこれで終わりではありません。
確かflaot浮いた分だけ、親要素の高さ(height)は消えてしまうのでしたね?
現状、親要素contentsの高さはcontentsの中にあるsection-titleの高さ分しかありません。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3633353835322f36643430363537652d343666312d646161392d353334642d6364383431373364653630622e706e67.png


このままだと次の要素を追加してもレイアウトが崩れてしまいます。
スクリーンショット 2020-10-26 12.00.14.png


              ↓角度をかえると・・・
スクリーンショット 2020-10-26 12.07.48.png


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

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

.contents {
  height: 500px;
}

.contents-item {
  float: left;
}

スクリーンショット 2020-10-26 12.57.07.png

OKです!


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

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


いいですね!
ここまで来るとあとは折り返しです!
頑張りましょう!



main部の最後contact-formに入ります。
例のごとく、各要素ごとに分けていきます。
スクリーンショット 2020-10-26 13.58.14.png

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


スタイルに関しても仕様書通りにやればいけそうです
section-titleには前にスタイルを付けているので触る必要はないですね。

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

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

footer

footerの構成はこんな感じです。
ここでもfloatを使う必要がありそうですね。
image.png


とりあえず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以外のスタイルは付けてしまいますね。

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


ここからやりたいことはfooter-listを右に持っていくことですね。
ではfooter-listfloat: right;を適用させてやれば良さそうです。

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
header-listの位置が少し下にズレていますね。
これだけでは足りないようです。


header-logoにもfloatを適用させましょう。

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

完成!

ここまでお疲れ様でした!

良いProgateライフを!!

higa08
学習のアウトプット&備忘録
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away