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

HTML & CSS

 

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

 

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

 

 

✔︎本記事の内容

  • DAY6.『Progate HTML & CSS 初級・中級道場コース』の解説

 

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

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

 

初級編・中級編で学んできたことの総復習になります。

 

ここができるようになれば、基礎の基礎は固まってきたと思われます。

 

とはいえ、補助輪が少なくなるので、思いのほかむずかしいと感じると思います。

 

そういう場合は、スレッドにいったん戻って再確認です。

【DAY6.】『Progate HTML & CSS 初級・中級道場コース』を解説

2時間弱かかりましたが、やりがいは十分ありました。

 

 

 

道場編を進める上での学習ポイントは3つあります。

 

  • HTML→CSSの順番で記述する
  • コードは正解を求めなくてオッケー
  • ボックスモデルを意識しよう

 

順番に解説します。

 

HTML→CSSの順番で記述する

 

 

これは絶対に守ってください。

 

なぜなら、、、

 

 

  • 完成形をイメージする力をつける
  • どこに何のCSSを当てるか設計する力をつける
  • レスポンシブサイトを見越した設計力をつける

 

わかりやすく言うと、、、

 

  • HTMLは下着や服
  • CSSはアクセサリー類

 

とイメージして良いです。

 

普通なら、下着を履き、服を身につけてから、どんなアクセサリーを合わせようかなと思いますよね。

 

その逆から行動する人はたぶんいません。

 

それと同じで、HTMLをきりのいいブロックまで仕上げてから、CSSでデザインを調節していきましょう。

 

コードは正解を求めなくてオッケーです

綺麗・汚いの差はありますが、コードに正解はありません。

 

なので、現段階ではProgateで理解したものをアウトプットする作業に集中しましょう。

 

実際、見本とだいたいあっていれば、marginとpadding、class名などが違っていても自分なりのコードで正解になります。

 

わからない箇所があれば、スレッドに戻って確認したり、ググって解決させましょう。

 

それでもわからなければ、答えを速攻みて問題解決です。

 

ボックスモデルを意識しよう

ボックスモデルとは、箱のような概念ですね。

 

Webサイトは、この箱のようなものがいくつも積み重なってできています。

 

この四角い箱の中には、、、

 

  • 本体(widthとheightで指定できる範囲)
  • padding(内側の余白)
  • border(境界線)
  • margin(外側の余白)

 

で構成されています。

 

MacなどのノートPCのトラックパッドのイメージすると良いかもです。

 

background-colorでpaddingとmarginの値を変えてみて、コーディングの理解を深めるのも良いですね。

 

あとは、divタグですね。

 

どこからどこまでをdivタグで囲むのかを意識しましょう。

 

というわけで、道場編の解説でした。

 

次は、DAY7.です。

 

レスポンシブサイト 【DAY7.】30DAYSトライアル7日目をわかりやすく解説

 

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