【DAY2.】30DAYSトライアル2日目をわかりやすく解説

おはこんばにちは、ミヤビです。

今回は、＃30DAYSトライアルのDAY2.について解説します。

DAY2.『Progate HTML & CSS 初級編（７章まで）』
引き続きオンラインプログラミング学習サイト『Progate』( https://t.co/2CJ1eEhyiD )でコーディング（HTML・CSSでのライティング作業）の基礎を学びます！
DAY2は、初級編の7章まで終わらせてください💻#30DAYSトライアル
— ショーヘー@Webエンジニア (@showheyohtaki) January 8, 2019

✔︎本記事の内容

DAY2.『Progate HTML & CSS 初級編（7章まで）』の解説

✔︎30DAYSトライアル1stの最終目標

月5万を稼ぐスキルを目指す
未経験からWEB系エンジニアの転職を目指す
未経験からWEB系ノマドエンジニアを目指す

本件を終了すると、WEBサイトを構成するヘッダー、コンテンツ、フッター、お問い合わせなどの基礎的なサイトが作れるようになります。

【DAY2.】Progate HTML & CSS初級編（第７章まで）を解説

初級編を身につけると、簡単なWEBサイトが作れます。

DAY2.の抑えるべきポイント

DAY2.の抑えるべきポイントは下記のとおりです。

デイトラDAY2.終了です。
☑︎divとclass名
☑︎span
☑︎float
☑︎ボックスモデル
☑︎ブロック要素とインライン要素
この辺りが初級編のポイントです。#30DAYSトライアル
 https://t.co/MC1ljgn03Q #Progate
— ミヤビ@in_tokyo 月5万生活ブロガー (@Kiyomasa0181064) January 19, 2020

上記が理解できると、次のステップに確実に進みやすくなります。

STEP1:フッターを作ろう

行うことは、ヘッダーと同じです。

<div class="footer">
  <div class="footer-logo">ここにfooterタイトル</div>　　
  <div class="footer-list">
    <ul>
      <li>リスト１</li>
      <li>リスト２</li>
      <li>リスト３</li>
    </ul>
  </div>
</div>

まあ、こんな感じで良いです。

footerというクラスの中に、footer-logoとfooter-listが入ってることがイメージできると思います。

しかし、ここで1つ注意することがあります。

それが、CSSの記述です。

ここでたとえば、、、

li {
float: left;
}

と入力してしまうと、全ての<li>要素に対してCSSが適用されてしまいます。

DAY1.ではheaderを作る時にすでに<li>要素を入力したと思います。

なので、特定の要素だけに対してCSSを適用させる必要があります。

入れ子構造を理解する

入れ子とは、、、

.header-list li {
float: left
}

といったように、◯◯の中の××といったようなイメージです。

その際、間に半角スペースを入れます。

上記の例だと、header-listというclassの中の<li>要素に対してだけCSSを適用させることができます。

class名を指定する

もう一つのやり方は、別々のclass名を指定する方法です。

<div class="header-list">
  <ul>
    <li　class="selected">リストa</li>
  </ul>
</div>

<!-- 中略  -->
<div class="footer-list">
  <ul>
    <li>リストb</li>
  </ul>
</div>

たとえば、<li>要素が複数ある場合で別々のCSSを適用させたい場合は、このようにclass名を指定しましょう。

特定の要素に対してCSSを記述する方法は、、、

入れ子構造で入力する
class名を指定する

これで、解決です。

STEP2:コンテンツの作成

特に重要な概念を2つ挙げておきます。

１：ボックスモデルの理解

HTMLはボックスモデル（箱）で構成されています。

下記でも載っていますが、幅いっぱいの箱が上から下に積み重なるイメージです。

そして、全てのHTMLの要素は、、、

本体（widthとheightで指定できる部分）
margin（要素の外側の余白）
border（外と内の境界線）
padding（要素の内側の余白）

で構成されています。

そして下記も参考になります。

margin？padding？ボックスモデルを理解しよう！あとbox-sizingが便利だよ、って話

今はなんとなくでいいので、ボックスモデルという箱の概念を理解しましょう。

２：ブロック要素とインライン要素

HTMLで見出しや段落を入力すると文字が表示されると思いますが、目には見えないブロック（箱）で構成されています。

基本的にブロック要素は改行され、インライン要素の前後は改行されない特徴があります。

ブロック要素とインライン要素の分類は下記が参考になります。

ブロックレベル要素とインライン要素－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 {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom:15px;
margin-bottom: 50px;
}
input, textarea {
width: 400px;
margin:10px 0 30px 0;
padding: 20px;
font-size:18px;
border:1px solid #dee7ec;
}
.contact-submit {
background-color:＃dee7ec;
color: #889eab;
}