おはこんばにちは、ミヤビです。
今回は、#30DAYSトライアル のDAY2.について解説します。
DAY2.『Progate HTML & CSS 初級編(7章まで)』
引き続きオンラインプログラミング学習サイト『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初級編(第7章まで)を解説
初級編を身につけると、簡単な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>リスト1</li>
<li>リスト2</li>
<li>リスト3</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つ挙げておきます。
1:ボックスモデルの理解
HTMLはボックスモデル(箱)で構成されています。
下記でも載っていますが、幅いっぱいの箱が上から下に積み重なるイメージです。
そして、全てのHTMLの要素は、、、
- 本体(widthとheightで指定できる部分)
- margin(要素の外側の余白)
- border(外と内の境界線)
- padding(要素の内側の余白)
で構成されています。
そして下記も参考になります。
今はなんとなくでいいので、ボックスモデルという箱の概念を理解しましょう。
2:ブロック要素とインライン要素
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;
}
Progateはあくまでインプット作業【稼げません】
わりと勘違いを起こしがちなのですが、Progateでの学習はインプット作業です。
インプット作業で満足する人が多いですが、それだけでは稼ぐことに繋がりません。
インプットしたらアウトプット作業です。
サイト模写やポートフォリオサイトを作ることです。
とはいえ、30DAYSトライアルDAY2.なので、次のステップであるProgate中級編に挑戦しましょう。
とりあえず、理解度は程々で良いので、手を動かしましょう。
さて、次のステップはDAY3.です。

