簡単なサイト作りの振り返り [プログラミング]
ProgateでHTML&CSSの初級編を終えたので、
そのまま自作で簡単なサイトを作ろうと思ってやってみている最中です。
確かにProgateで理解した知識をそのまま使えるけど、一部はそうでなくて調べないといけないことが出てきました。
・bodyタグにデフォルトでmarginが設定されていて、そのままだとheaderの上と左右に謎の空白ができる。→cssにmargin: 0pxを入れて解決。
・mainの一番上に書いたh1のmarginを0にすると初期位置が右にズレる
→marginを0にしないとheaderとmainの間に空白ができるので、padding-topを元のマージンより多い値で入れることで見た目上は解決する。
参考にしたサイト:http://ideahacker.net/2015/08/21/10357/
paddingとかmargin,floatに関してはprogateで基本的な機能を学ぶものの、「結果論的にこうなる」という感じであって、理論的にどういう仕様なのかは教えてくれないので、その辺の応用はできない状態だなぁと思いました。また、ブラウザのデフォルトでどういう設定がされているのかという話も実際に作ってみて初めて発覚したので、こういった部分の知識及び解決法も何となくでも把握しておく方がいいなぁと思いました。(progateはそういう話は単純化のために捨象していると思う。)
まあとりあえずまったり作っていく事にします。
終わったらまたprogate再開してとりあえず色んな言語の要素を触ってみます。
何やりたいか決まってないし(笑)
そのまま自作で簡単なサイトを作ろうと思ってやってみている最中です。
確かにProgateで理解した知識をそのまま使えるけど、一部はそうでなくて調べないといけないことが出てきました。
・bodyタグにデフォルトでmarginが設定されていて、そのままだとheaderの上と左右に謎の空白ができる。→cssにmargin: 0pxを入れて解決。
・mainの一番上に書いたh1のmarginを0にすると初期位置が右にズレる
→marginを0にしないとheaderとmainの間に空白ができるので、padding-topを元のマージンより多い値で入れることで見た目上は解決する。
参考にしたサイト:http://ideahacker.net/2015/08/21/10357/
paddingとかmargin,floatに関してはprogateで基本的な機能を学ぶものの、「結果論的にこうなる」という感じであって、理論的にどういう仕様なのかは教えてくれないので、その辺の応用はできない状態だなぁと思いました。また、ブラウザのデフォルトでどういう設定がされているのかという話も実際に作ってみて初めて発覚したので、こういった部分の知識及び解決法も何となくでも把握しておく方がいいなぁと思いました。(progateはそういう話は単純化のために捨象していると思う。)
まあとりあえずまったり作っていく事にします。
終わったらまたprogate再開してとりあえず色んな言語の要素を触ってみます。
何やりたいか決まってないし(笑)
コメント 0