はじめに
ProgateのHTML & CSSをし始めて約一週間の初心者です。
本稿では、道場コースの中級編で、かなり悩んだところをピックし、それに対する自分なりの解決法を書いていきたいと思います！
解釈が本当に正しいとは限りませんので、また分かり次第訂正しようと思います。
学び1.レイアウトの仕方
慣れてないからだとは思いますが、レイアウトの仕方が分からなかったです笑
特に<div>にするところとか。
でも、レイアウトは以下のことを重視することで改善できました！
- とにかく箱をイメージ
本稿で書く箱とは、<div>を使う場所のことです。
最初に箱を考えることで色々と整理しやすくなります。
その箱の作り方なんですが、コーディングしまくって慣れるのが一番早いと思います笑
自分も何回か作ることによってだいたいの箱のイメージができるようになりました！
ここに箱があったら、後のCSSファイルの編集がしやすくなりそう！
ここは別に箱にする必要はないな。とか
以下の図は、Progateの道場コース、中級編のトップ部分を作るときに、
私の考えた箱のイメージです
基本的に一番大きい箱から考えていきます
まずは、背景を配置する箱が必要なので、赤の箱をイメージ
次に、仕様書の指定から、1170pxの幅を持つオレンジの箱をイメージ
最後に、色、透明率が一緒であるため、まとめたら利点があると考え、黄色の箱をイメージ
そして、これらのイメージをHTMLファイルに反映するために、<div>を用いてコーディングします
<div class = "red">
<div class = "orange">
<div class = "yellow">
<h1>見出し</h1>
<p>説明文</p>
</div>
</div>
</div>
と、以上のようなクラス分けとなったわけです。
しかし、CSSの書き方次第では、このような箱をイメージした書き方をしなくてもレイアウトを作ることが可能です。
しかし、第三者から見ても分かりやすいという点で<div>要素は大事だと感じました
また、コーディングすると親要素と子要素の位置が分からなくなったりすることが多かったので、
borderプロパティをつけて頭の中を整理しつつコーディングすることが大切だと感じました
学び2.答えは一通りではない
道場コースの中級編を三回復習し、分かったことです
1回目は自分の書いたコードも模範解答とほとんど丸被りでした
しかし、webの書き方の流れを少しつかんで2回目、3回目に取りかかった結果、
「別に、ここはこーいう書き方もできるよな～」とか、
「ここの<div>要素は別にいらなくね？」
と感じるようになり、コードの書き方は色々あることにきずきました
学び1に書いたindex.htmlも、CSSの書き方次第では、このようにグループ分けしなくても、
完成のページになるということです
しかし、編集が容易で、構造の分かりやすいコードを作るには、先ほども述べたとうり<div>要素による
クラス分けは大切だと思います
学び3.floatの意味
レッスン一覧部分を作る際に、以下の図のレイアウトにする前提で、この課題にとりかかるのですがある疑問が生じました
模範解答のコードをそのまんまコピーして、ボーダーを引いて頭の中を
整理しようとしたその時です。
containerクラスがレイアウトどうりに包括されていないことに疑問を生じました
自分の考えでは、赤色の枠線が表れるという予想でしたが、見事に違いました笑
なぜ、タイトルだけに枠線があるのか本当に謎でした
しかし、これの原因はfloatプロパティにあったと分かりました！
その時に納得させられたサイトがこちらです↓
参考ページ: CSSの【float】についてちょっと本気出して説明してみた。
このページから、floatプロパティで指定したブロックは実際に浮いているということが分かりました。
だから、float:left;によって、containerクラス内包される要素が減ったの範囲が小さくなり、タイトルだけが内包されることになったのでしょう。
まとめ
以上が個人的に学んだ部分です。
これからも日々精進してHTMLとCSSをしっかり学んでいきたいです！