Progate＜HTML＆CSS道場コース初級編＞コードと一言メモ

初めて記事を投稿します。

といっても現段階ではプロゲートでHTML&CSSの学習・道場コース初級編を1周終えただけですが。

道場コースやってみたら、なかなか正解にたどり着かなかったので、復習もかねて自分が書いたコードをここに載せていこうと思います。

一応正解が出たコードなので、道場コースで躓いている方の手助けになればと思います。

①ヘッダー作成

~HTML①~

qiita.html①

<body>
    <!-- ここからHTMLを書き始めてください -->
    ★<div class="header">
      〇<div class="header-logo">
      Progate  
      </div>〇
      ◆<div class="header-list">
        △<ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>△
      </div>◆

    </div>★
  </body>

＜解説＞
①全体をheaderクラスで囲む(★)
②headerクラスの中にheader-logoクラス(〇)を設定。
③header-listクラス(◆)を作成。その中に親要素ulで囲った子要素liを3つ設定(△)。

ここは難なく行けると思います。フッターも同じ要領で作成するので覚えておきましょう。

~CSS~

qiita.css①

/* ここからCSSを記述してください */
.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;  
}

＜解説＞
htmlでクラスで囲ったものには全て”.”を冒頭につけて何をどうしたいかを仕様書を見ながら書いていきましょう。ここも難なくクリアできると思います。

②トップ部分の作成

いよいよメインの作成にとりかかります。3段階に分けて作成していきますが、最初にメインの大枠をdiv化してmainというクラスを設定し(★)、その中に色々な要素を足していく感じです。

~HTML~

qiita.html②

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

    </div>★

＜解説＞
mainの中にcopy-containerというクラスを作成し(〇)、その中に大きい方から順に、h1やh2というタグを使って文字を書いていきます。仕様書では、"HELLO WORLD.”のドット部分が別の色になっているので、spanというタグでドットを囲むことを忘れずに。

~CSS~

qitta.css②

.main{
  padding:100px 80px;
}
.copy-container h1{
  font-size:140px;
}

.copy-container span{
  color:#ff4a4a;
}
.copy-container h2{
  font-size:60px;
}

＜解説＞
この段階では、copy-container部分だけの仕様書のみですが、コンテンツ部分やお問い合わせフォームを作成すしていくにつれて、mainのpaddingは上下100px、左右80pxで統一されてると分かります。私も最初はcopy-containerでpaddingを設定していましたが、後の過程でcopy-containerからmainに変更しました。ここでは変更後のものを載せておきますが、この段階ではcopy-containerで設定しても正解にはなります。

copy-container h1とh2は分けてCSSを書くこと、spanを書く場合には.copy-container spanとセットで書くことを忘れずに。

③コンテンツ部分の作成

HTML

qiita.html③

★<div class="contents">
      ◆<h3 class="section-title">学べるレッスン</h3>◆

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

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

＜解説＞
⑴contentsでコンテンツ部分の大枠を囲む()。
⑵h3を装飾するので、h3にクラスタグをつける。ここではsebtion-titleというタイトルをつけています(◆)。
⑶画像挿入にcontents-itemというクラスを作成(〇)、その中にimgタグとpタグを入れる。これを４つ作る。
⑷⑶で作ったimgタグに画像のURL(ヒントをクリックするとそれぞれの画像のurlが出てきます)を入れ、pタグに文字を入力。４回繰り返す。

~CSS~

qiita.css③

.contents{
  height:500px;
  margin-top:100px;
}
.section-title{
  font-size:28px;
  border-bottom:2px solid #dee7ec;
  padding-bottom:15px;
  margin:50px;
}

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

.contents-item p{
  margin-top:30px;
  font-size:24px;
}

＜解説＞
marginとpaddingの概念がややこしくて苦手ですが、、、。
margin…ボーダー(枠線)外側の余白の大きさ
padding…ボーダー(枠線)内側の余白の大きさ
ざっとこういう理解をしてます。
トップを作っていた時に、mainのpaddingは定義しましたが、copy-containerとcontentsの余白の大きさを定義していませんので、ここでmargin-topを使って定義します。contents全体を枠線で囲ってみると、paddingではなくてmarginを使うということが分かります。
h3の装飾はhtmlで定義した.sebtion-titleを使ってやっていきます。htmlで.section-titleを定義せず、「.contents h3」としてCSSで装飾をしても良いですが、お問い合わせフォームのh3でも同じことをCSSでやらないといけないので、労力を省くためにsection-titleを使います(、と勝手に解釈してます)

④お問い合わせフォーム作成

~HTML~

qiita.html④

★<div class="contact-form">
        ◆<h3 class="section-title">お問い合わせ</h3>◆
        <p>メールアドレス(必須)</p>
        □<input>□
        <p>お問い合わせ内容(必須)</p>
        ■<textarea></textarea>■
        <p>※必須項目は必ずご入力ください</p>
        ☆<input type="submit" value="送信" class="submit-button">☆
      </div>★

＜解説＞
⑴contact-formというクラスで全体を囲む(★)
⑵h3の装飾はcontentsのh3と同じなので、h3にsection-titleというクラスをつける(◆)。
⑶inputは1行入力を受け取るための要素(□)。textareaは複数行入力を受け取るための要素(■)。それぞれを作れたらpタグで文章を補充する。inputは終了タグがいらないことに注意。
⑷送信ボタンもinputタグで作成(☆)。
＝inputにはtype属性を指定することが出来る。input type="submit"とすることで、「送信ボタン」と定義できる。
＝value属性を付けることでそのボタンの表示名を指定できる(今回は「送信」と指定)。
＝CSSで装飾が必要なのでClass属性を追加、今回は”submit-button”という名前を付ける。

CSS

qiita.CSS④

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

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

}

.submit-button{
  background-color:#dee7ec;
  color:#889ebc;
}

＜解説＞
contact-formとcontentsの余白はmargin‐topで指定。ここ指定しないと最後のフッター作成で正解にならなかった、、、。
input,textareaなど、コンマで区切ることで同じCSSを適用できるので覚えておくと便利。
あと、htmlでsubnit-bottonなどクラスを設定しないとボタンの色が変わらない。

⑤フッター作成

~html~

qiita.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

qiita.css⑤

.footer{
  background-color:#2f5167;
  color:#fff;
  height:120px;
  padding:40px;
}
.footer-logo{
  font-size:32px;
  float:left;
}
.footer-list{
  float:right;
}
.footer-list li{
  margin-bottom:20px;
}

＜解説＞
footerは枠線の内側に40pxの余白があるので、paddingを設定。footer-logoは左側に、footer-listは右側に置きたいのでfloatを指定する。