プログラム勉強4日目 ~全体レイアウトそしてページができた~

本日で勉強4日目です。
ゆーてもまだ1時間くらいしか勉強してないけど。。。。

さて、今日の話題はProgateの「HTML&CSSコース学習コース初級編」が
レッスン23個全部完了しました!勉強になった!
所要時間は全部で2時間程度ですね。

ということで振り返り。

~ページ全体のレイアウト~

前回まではCSSを楽手して、おもにHTMLに記載した文字を色付けしたり、おっきくしたりするようなことをしてました。
今回は、それらを利用したページ全体の構成の仕方の話。

まず、前回までは単純なタグ構成で、<li></li>とかで囲んでclassつけてそこをcssでいじるって感じでしたが、ページ全体を構成するイメージをやってませんでした。

多くの場合、ヘッダー・メイン・フッターというように分けてWebページを構成するようです。
いろんなWebページを見ても、たしかに上から順番に並んでるってイメージじゃなく、ヘッダー部分にメニュー的なのがあって、フッター部分はお問い合わせとか、中央部分にメニューとかで選択したコンテンツが表示されてたりしますよね。

~CSSはまだわからないことだらけ~

つまりは、Webページ作るなら、ヘッダーとフッターとメインに分けてデザインしていけばよいのかという理解をしました。

ここで昨日までは触ってなかったタイプのcssに触れることになりました。
というのも、色とかの見た目ではなく、"配置"にかかわるcssがあります。

例えば、floatとかの並び方にかかわるものやmarginやpaddingなどの1つの要素の余白とかを設定するものです。

正直floatはいまいち動きを理解できていないですね。
また今度調べるか、もう少し進めるうちに慣れるかな~

marginやpaddingの動きはどれがどれっていうのは覚えなきゃですが、見れば動きはわかります。
ただ、ここら辺は実例を見ながら使い方を学ばないと、自分のデザインセンスではうまく使いこなせる気がしません。

~ページが完成~

すごい!ほぼ指示通りやっただけで、配色や画像なども用意されたものですが、このページできたってなんかすごいですよね!

こないだまではHTMLって言葉もきいたことないのに!

ちょっと感動しました。もうちょっと動的なものが作れれば、Webページ何でも作れるのでは!とか思ってしまいます。

まぁそう簡単には作れないんだろうけど、まだ何ができないかもわかってないあたり、知識の薄さが目に見えますね。。。
でも3か月後には立派なページができているでしょう!

ちょっと形になって楽しかった4日目でした。

~まとめ~

・Webページが作れた。
・CSSはまだ細かい仕様を把握する必要がある。
・今一番楽しいときかも。

この記事が気に入ったらサポートをしてみませんか?