Progate HTML,CSS道場～初級編の解説～

この記事ではProgateの道場の解説をします。
ただあくまで個人理解の促進のために書いたアウトプットであることを
ご理解くださいませ。。。！

#ヘッダー作成
###【HTML】

`

★

○

Progate

○
☆

• プログラミングとは


• 学べるレッスン


• お問い合わせ

☆

★ `

＜解説＞headerの中に全要素を入れます。その後、header-logoを設定します。次にheader-listを挿入していきましょう。ポイントは全てheader-で始まることです。

###【CSS】

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

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

.header-list { float: left; }

.header-list li { float: left; padding: 33px 20px; }

＜解説＞HTMLでdiv化してクラスしたものは、全てドットを用いて何をどうしたいのか書いていきましょう。縦×横である点をお間違えなく！
仕様書を見ながらやっていきましょう。

#メインの文字作成

###【HTML】
☆<div class="main"> ★<div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div>★ </div>☆

＜解説＞これもまずはメインの構成であるので、divをmainでクラスを作って大枠っで囲ってしまいます。次にcopy-containerを設定していきます。大きい方から順にh1、h2で作っていきます。またその際文字色を一か所だけ変える必要がある場合にはspanタグで区切っていきます。

###【CSS】

.main { padding: 100px 80px; }

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

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

.copy-container span { color: #ff4a4a; }

＜解説＞copy-container h1とh2は分けてCSSを書いていきましょう。Spanを書く場合には.copy-container spanとセットで書くことを忘れずに

#コンテンツ作成

###【HTML】

★<div class="contents">
<h3 class="section-title">学べるレッスン</h3>
<div class="contents-item">
<img src=">
<p>HTML & CSS</p</div>

    `<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>`

    `<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>

    <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>★

＜解説＞h3の文章を装飾するためには、h3にクラスタグを付ける。名前はsebtion-titleとすると良いです。<h3 class="section-title">学べるレッスン</h3>　また、画像挿入に使う枠としては<div class="contents-item">としてimgタグ挿入からのpで補足書きをすると良いです。

###【CSS】

.contents { height: 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; }

#フッター作成

###【HTML】

★<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>★

<解説>ここでもsection-titleクラスにはh3を使っていきます。Inputとtextareaが作れたらpで内容を補足していきます。最後の送信ボタンの作り方はvalueを送信として表示させる文字を変えます。Input class-“contact-submit” type=”submit”までは流れで覚えます。

###【CSS】

.contact-form { padding-top: 100px; }

input, textarea { width: 400px; margin-top: 10px; margin-bottom: 30px; padding: 20px; font-size: 18px; border: 1px solid #dee7ec; }

.contact-submit { background-color: #dee7ec; color: #889eab; }

<解説> input, textarea {　とまとめて表記することも可能なのでテクニックとして覚えておきましょう。

#フッターの文字入れ

###【HTML】

★<div class="footer"> ○<div class="footer-logo">Progate</div>○ ● <div class="footer-list"> <ul> <li>会社概要</li> <li>採用</li> <li>お問い合わせ</li> </ul> </div>● </div>★

###【CSS】

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

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

.footer-list { float: right; }

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