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

三角形と男性

 

 

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

 

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

 

 

✔︎本記事の内容

  • DAY2.『Progate HTML & CSS 初級編(7章まで)』の解説

 

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

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

 

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

【DAY2.】Progate HTML & CSS初級編(第7章まで)を解説

デイトラ2日目

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

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

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

 

 

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

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(要素の内側の余白)

 

で構成されています。

 

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

 

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

 

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

 

2:ブロック要素とインライン要素

ブロック要素とインライン要素の説明

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;
}

Progateはあくまでインプット作業【稼げません】

わりと勘違いを起こしがちなのですが、Progateでの学習はインプット作業です。

 

インプット作業で満足する人が多いですが、それだけでは稼ぐことに繋がりません。

 

インプットしたらアウトプット作業です。

 

サイト模写やポートフォリオサイトを作ることです。

 

とはいえ、30DAYSトライアルDAY2.なので、次のステップであるProgate中級編に挑戦しましょう。

 

とりあえず、理解度は程々で良いので、手を動かしましょう。

 

さて、次のステップはDAY3.です。

 

Progate中級編 【DAY3.】30DAYSトライアル3日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】