プログラミングは要素をブロックとしてみるスキルが必要だと思った【progate】

どうも、コツコツプログラミング系大学生リクです。

初心者でも、プログラミングを学べる『Progate』で、テストの役割である『道場コース』をクリアしたので、学んだ知識と感想をまとめておきたいと思います。

HTML&CSS 初級編の道場コースをクリア

ツイートで書かれていることを要約すると以下の2つですね。

  • 余白の調整はしっかりしないと、後から大変
  • 作りたいものを塊ごとに分けてないと、めっちゃ大変

総じていいたいことはですね、

全体図を考えてやらないと、後からめっちゃ困る

 

余白を決める『marginマージン』や『paddingパディング』は、最初からきちんと決めておこう

marginやpaddingについては、以下のツイートの画像がわかりやすいと思います。

文字の周りは順に、padding、border、marginが囲んでいます。

paddingやmarginは、いわゆる『余白』であり、文字の周りにどれだけ空間を作るか決めるものです。

 

この2つをね、適当に決めちゃうと、あとからほんとう大変。

後から作ったものの余白を決めると、先に作っていたものの位置がずれたりするんです。

ずれないためにも、最初から全体の位置や空白を、きちんと決めておかないといけません。

 

Progateの道場コースは、marginなどの余白の判定が厳しくて、慣れないうちは発狂レベルでした。

 

<p>タグや<div>タグを、思いつきで書いてはいけない

  • <p>タグ → 段落を作る
  • <div>タグ → 囲んだものを1つの塊にする

まず全体をみて、作っていくものを見極め、どこがどのような塊になるのか考えてからコードは書いたほうがいい。マジで。

<div>タグで囲んで、クラスなどの分類をしてから、

実は「この塊の作り方じゃ、やりたいようにできない」ということもよくありました。

 

まだ未熟者でして、例をあげることができないのですが、Progateの道場コースをやってみるとわかるはずです。

 

というお話でした!

 

ではっ!