HTMLとCSSの勉強で悩まれておりませんか？
HTMLはタグがたくさんあって、
どのタグを使えばいいのかわからない！
そもそもどう記載していけばいいのかわからない！
CSSは覚えることが多すぎて、すべて覚えられない！
など、色々なお悩みがあると思います。
私も最初はそうでした。
これどうやってタグを記載すればいいんだ？
CSSを記載しているのに想定通りの動きにならないよ…
など、かなり苦戦した経験があります。
そんな私が今ではWebサイト制作を本業とし、フリーランスで独立し活動できております。
本記事では、私も実践した学習方法について、簡単にですがまとめさせていただきました。
Webサイト制作の学習を進められている方の、お悩みの解決にお役に少しでも立てれば幸いです。
ステップ１ まずは本で学習してみましょう！
私が初めにやったことは、まず書籍を購入して学習を開始しました。
※私はこちらの書籍で勉強しました。
初めて学習をされる方は、わからない単語が頻繁に出てくるかと思いますが、まずはさらっと流して１周しましょう！
インプットより、アウトプットが大事です！
１つ１つ完璧に理解しながら進める必要は、全くありません。まずは「こんなものもあるのか～」ぐらいな感じで大丈夫です。
後で必ず、点と点が繋がって、理解が一気に深まるタイミングが訪れます。
１周終わったら、２週目に入りましょう。初めのころよりHTMLとCSSに慣れているため、確実に理解が深まります。
しっかり理解できているところはさらっと流す程度で大丈夫です。引っかかったところに、もう一度チャレンジしてみましょう。
私はこの流れを繰り返すことで、理解を深めることができました。
最初はわからなかったけど、こういうことだったんだ！！と理解できた時は、すごく嬉しかったです。
ステップ２ サイトの模写をやってみましょう！
模写とは、実際に公開されているWebサイト（ホームページ）を同じように作ってみることです。「模写はあまり効率的な学習ではありません」と言われている方もいらっしゃいますが、私はそうは思いません。
目的を持たずに、ただただ模写をする場合は効率が下がり、良い学習方法とは言えないでしょう。ですが現時点で模写をすることによって「コードに慣れること」、こういう時はこんな風にタグを使うんだ！CSSを記載するんだと！「気付きを得ること」ができます。
このタイミングでは上手に模写をすることが目的ではありません。あくまでも「コードに慣れること」と「気付き」を得ることが目的です。実際に模写をすることによって、自分に足りない知識が見えてきます。
私が模写をする際に活用していたサイトをご紹介いたします。
まずはこちらのサイトの入門編にトライしてみましょう。
私の場合ですが、本で勉強していても、いざサイトを作ろうとしてみると、、、
全然かけませんでした！！
実際のところしょっぱなから手が止まりました・・・汗
いきなりカンニングをしているようで、気が乗りませんでしたが、検証ツールでどのようになっているか確認しました。
検証ツールで確認してみると、「あー、こんな感じでよいのか！」と気付きが得られます。
※検証ツールの使い方については、記事が長くなってしまうため、割愛させていただきます。別記事にて紹介させていただく予定です。
最初は中々スムーズに進めるのは難しいと思いますが、検証ツールで確認しつつ、模写を進めてみてください！
模写は１回で終わりではなく、２～３回ほど同じサイトを模写してみることをお勧めします。冒頭でも記載した通り、アウトプットが非常に大事です。
ここまでくれば「習うより慣れろ」ですね。ひたすらHTMLをCSSを書いていきましょう。
入門編のサイト模写ができたら次は初級編にチャレンジしてみましょう。
入門編とは違って、レイアウトが少し複雑になってきます。入門編の時と同じようにわからないところは、検証ツールなどで確認しつつ進めてみましょう。
進めるたびに理解がどんどん深まってくると思います。
初級編の模写を進めたら次は中級編にチャレンジしてみましょう。
JavaScriptを使用した例もありますが、ここではいったん無視して、HTMLとCSSの模写で問題ありません。
※JavaScriptについては別記事にて紹介予定です！
中級まで模写を進めるころには、だいぶコーディングに慣れているかと思います。
ステップ３ 部分模写をしてみましょう！
ステップ３で最後になりますが、気になったWebサイトの一部分の模写をしてみましょう！
良いと思ったWebサイトを実際にコーディングすることで自身の引き出し（コーディングの幅）も広がります。
色々なデザインのコーディングを行い、さらに理解を深めていきましょう！
さいごに
今回は私の体験も交えて、HTMLとCSSの独学での学習方法について記載させていただきました。
最初は絶対にわからないことだらけで難しいと思います。ですが、わからないことが分かったときはものすごく嬉しいです。
本を読むだけでは中々上達できないので、実際にHTMLとCSSに触れていきましょう！
諦めずにトライしてみてくださいね！
