HTML & CSS Progateで上級まで一通りやった感想
みなさんこんにちわ！きむすけです！
今日はProgateでHTML＆CSSを上級までやった感想をざっくり書いていきたいと思います！
HTML＆CSS初級
・HTMLの仕組み
・出力の方法
・クラスとは
・CSSの概要
・CSSでレイアウトの変更
などなど
こんな感じで勉強しました！
実際にコードを書きながらの勉強なので私的には動画みて勉強するよりも身になりやすいのかなーなんて思いながら取り組みました！
初級をクリアすると上記のページが完成します！
できたときは達成感あって「これならすぐ仕事受けれるかも！」とか思っちゃったんですよねー
考えが甘すぎて自分でもびっくりですｗｗｗ
初級をやって難しいと感じたのはpaddingとmarginの使い分けでした！
余白を作る際に使用するコードなのですがpaddingは内側でmarginが外側の余白を作るっていう意味なのですが正直「どっちでもいいのでは？」というのが最初のイメージでしたｗ
ちなみにいまだに完全に理解できてませんが完成品と見比べると少し違ったりしてどちらでも良い時と悪い時があるみたいです。まだまだ勉強が必要みたいですｗ
HTML＆CSS中級
・背景に画像を表示させる
・アイコンの挿入方法
・ボタンのレイアウト変更
・指定場所へカーソルを移動させたときのに別のCSSを適用する方法
などなど
主にレイアウトしたものをより見やすくわかりやすくするといった感じの勉強でした！
初級でやった時よりもクラス分けが多く、結構苦戦しましたｗ
中級をクリアすると上記のページが完成します！
初級と比べると今どきっぽいというか少し手が込んでるように見えますね！！！
中級で難しかったのは画像中央にある4つのアイコンに文字を表示させるところと「さっそく開発する」のボタンを作成するところでした！
この4つのアイコンは文字が表示されてる画像を載せているのではなくそれぞれ画像と文字と別れているものを重ねて表示されてるんです！
実習のときは解説があったのでその通りやりましたが画像の左上を０として右と下にどのくらい動かせば真ん中に表示されるのか考えながら余白を作らないといけないので実際にやるときはもっと難しいのかなと思いました！
ボタン作成ですが、特に難しかったのがボタンをクリックしたときにボタンがへこむように見える設定ですね！道場編で苦労しましたが、これちゃんと設定しないと変な感じにへこんでしまうんですよｗｗｗ
最初自分で作ったやつ見たときは笑いましたねｗ
HTML＆CSS上級
・PC表示だけでなくタブレット・スマホで表示してもレイアウトが崩れないようにする
上級はPC以外の端末でアクセスしたときもレイアウトが崩れないようにするようにコードの勉強でした！
上級をクリアすると上記のページが完成します！
こんな感じで各端末で表示のされ方が変わるんです！
これを勉強するまではこれは勝手に開いてる端末を認識して適切なレイアウトに切り替わってるものだと思ってました。なんて浅はかなきむすけ
タブレット用とスマホ用にレイアウト変更が必要なとこだけをピックアップしてコードを書くのでコード自体はほとんど中級までに勉強した範囲だったので結構スムーズにいきました！
ただですね・・・道場編になると急にわからなくなりました。ｗ
タブレット用・スマホ用って区分けしたコードを書いた後にその区分けしたところに何のコードを足していけばいいのか全然わからなくなりましたｗ
結局、スライドとか完成品とか見ながらなんとかできましたが・・・
これはきっと「なるほどねー」って感じで軽くスライド見て画面に書いてあることを作業のようにやってしまったのが原因で、いざやってみてくださいと言われると何してたのかわからなくなるというやつでした。
こういう勉強の仕方は身にならないので気をつけましょうねｗｗ
以上がほんとにざっくりですが、上級までやってみた感想です！
いやー1周したくらいではちょっと覚えきれませんねｗ
これからJavaScriptやっていこうと思ってるんですけど平行して道場編だけ何回かやっていこうかなと思いました！
これからも頑張っていきます！応援よろしくお願いします！
ではまた！
