HTML,CSS初心者からステップアップするために。

どうもOthloTechのうぃるです！
少し暖かくなってきて桜も見頃になってきた頃でしょうか〜。ようやく成人しまして、公園にビニールシートを敷いてお酒を飲みながら...なんてしてみたいですね！(*´﹀`*)

今回はHTML,CSSに出会ってもうすぐ2年が経つ私がどのように勉強してきたかをまとめたので、これからHTML,CSSを勉強しよう！と考えている人にぜひ参考にしていただきたいと思います！

Progateを使ってみよう

f:id:HinataIchikawa:20180325135724j:plain

まず、何をやったらいいのかわからない、全くコーティングしたことない、って人にオススメの勉強サイトはProgateです！本当に私もお世話になりました...。

Progateの良さはやっぱり実際にコードを書きながら覚えられるという点です。エディタも何もなしに無料で始められるので、Progateで基礎の基礎をがっちり固めれば、まず一安心です！無料でできるとこをは限られていますが、HTML,CSSはできるとこだけでも何周かするとしっかり頭に入るのではないでしょうか！

Progateのサイトはこちら

実際にwebサイトを作ってみよう

f:id:HinataIchikawa:20180325133505j:plain

Progateにしばらく慣れておおよその書き方がわかったら、実際にコーディングしてみましょう！その前に、パソコンにエディタが入っていない人はエディタをダウンロードしましょう！

初心者でも使いやすいオススメのテキストエディタ19選
エディタを決めにくかったら、こちらの記事を参考にすれば良いかと思います！ちなみに私はSublime Text3を使用しています (ﾉ ´▽`*)ﾉ

私がはじめにwebサイトを作ったのは、大学の卒展のwebサイト制作を先輩にお願いされたことがきっかけです。webサイトを作って見ると、『あれ、marginが効かない...』とか『floatしてくれない...』など、知らないと一度は迷ってしまう壁にぶつかります。

とにかくわからないことは放っておかずに調べる！

HTML5＆CSS3辞典第2版

作者: 株式会社アンク
出版社/メーカー: 翔泳社
発売日: 2013/10/30
メディア: Kindle版
この商品を含むブログを見る

この本は辞典としてもかなり参考になるし、暇なときにパラパラと読んでいるのもいいかと思います！初めの頃はわからないことがあったら調べるという形でいいかと思います！

あとは、構造の簡単そうなwebサイトを見つけて、真似するもの良いかと思います！私はGoogleChromeを使用してますが、どうやってここ書けばいいんだろう...とか、なったときにMacならcommand+option+Iで、WindowsならF12を押すと、右か下からピョンってデベロッパーツールが出てくるので、参考にしてみるといいかと思います！

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
詳しい使い方はこちらを参考にしてみてください！

レビューをしてもらおう

f:id:HinataIchikawa:20180329012905j:plain

そしてもう一つ、ステップアップに必要なことがあります。
それは、自分の書いたコードをレビューしてもらうことです！

私は自分でコーディングの勉強をし、ある程度作れるようになった！という頃、先輩に作ったサイトのコードを見てもらうと、ものすごい量のダメ出しをもらいました。

例えば、何でもかんでも「position: absolute;」をつけて、相対的な位置で見た目だけ整えていたことがありました。決して「margin」や「padding」の存在を知らなかったわけではないのですが、どれが最適なコーディングなのかを理解していなかったのです。このようなことは調べてもわかることが少ないのですが、レビューをしてもらうと気がつけることが多いです！

同じ見た目になるコーディングでも、タグの意味を理解せずに使用していたりすると、SEO対策に大きく関わります。SEO対策とは「SEO対策とは　- 初心者でも分かるSEOの基礎 -」より「検索結果で自社サイトを多く露出をするために行う対策」のことであり、検索がヒットしやすくなったり、閲覧数に大きく関わることです。序盤ではあまり関係ない話かもしれませんが、参考にしながらサイトを作成していくと、良い勉強になるかと思います！