こんにちは、Autumn（オータム）です！
今回は、元・知識ゼロ文系社会人の私が実践した、お金をかけずにHTML・CSSの基礎を勉強できる手順を解説します。
「プログラミングの参考書を買ってみたけど、よくわからない」
「プログラミングスクールに通ってみたいけど金額もするので悩んでいる」
「オススメの勉強方法を教えて！」
WEBエンジニアになってから、学生時代の友達や後輩などから上記のようなことを聞かれることが増えました。
最近の流行もあって、勉強教材は世に溢れているので情報集めに困ることはありません。ただ、逆に色んな情報があることで、じゃあどれが一番いいの！と迷宮入りしてしまう方も多いようです。
早く学びたいのであれば、スクールに通うのもアリ
結論から言うと、一番最速で覚えたい人はスクールに通って教えてもらうのが一番良いと思います。
プログラミングを勉強していると、バグが起こったり、思い通りのレイアウトにならないなど、壁にぶち当たる場面が本当にたくさんあります。
一人だと何時間もかけても問題が解決しないことがあるんですが、すぐに相談できる環境があれば数分で解決します。
ただ、もちろんですがスクールに通うのもタダではありません。高いスクール入学金を払うのはちょっと、、という方も多いと思います。
実は私もスクールに通うお金がなかったし、相談できる人もいなかったので消去法で独学するしかなかったんですね。
お金をあまりかけたくない、自分でコツコツ勉強していきたい、そういう人はこれからご紹介する勉強方法を参考にしてみてください。
まずは作る目標物を決めること
まず一番最初にやるべきことは目標となる作成物を決めることです。
目標が決まると、それを達成しようとモチベーションも上がりますし、達成するために必要なスキルが何か明確になります。
まずはなんでもいいので、自分がいいなと思ったサイトのトップページを組めるようになることを目標にするのがいいです。マークアップ言語（HTML・CSS）を理解すれば静的にページを組むことはできますので、まずはそこを目指しましょう。
最初は動画で1ヶ月基礎の勉強をし、次の1ヶ月で実際に制作
目標を決めれば、その後はひたすら勉強あるのみです。
ただ、基礎を勉強する期間は長くても1ヶ月ぐらいにすることをお勧めします。
全て完璧に理解するまで基礎を繰り返す方がいますが、非常に非効率なのでやめた方がいいです。理由は主に２点です。
- 全てを理解しているエンジニアはいない
- 検索すればだいたいの問題は解決できるから
全てを理解しているエンジニアはいない
もちろん、最低限の文法や単語の意味を理解する必要はありますが、100％全てを理解することはほぼ不可能です。
なぜならプログラミング言語は常に進化し続けているし、学べば学ぶほど絶望的に奥が深い分野だからです。
より使いやすくするよう改良を加えたり、新たな言語を作り出したり、とんでもなく頭の良いエンジニアたちが日々改良を試みているので、完璧を目指すのは潔く諦めましょう。
それよりも「ググり力」の方が大切
現在のエンジニアにとって、必須スキルがgoogle検索で必要な情報を取ってくる「ググり力」です。
特に初めたてのエンジニアの仕事の半分ぐらいがググって情報収拾してると言っても過言ではないと思います。
作業を進めるとどうしてもわからない部分がたくさん出てきます。効率よく情報を集めるにはどんなキーワードで検索するのが良いか、自分で色々試してコツを掴んでいきましょう。
HTML・CSSの具体的な勉強方法
それではここから、HTML・CSSの具体的な勉強方法を解説していきます。
勉強の手順は以下の通り。
- youtube動画で勉強
- 60％理解したら実際にページを作成してみる
youtube動画で勉強
最初に基礎的な文法を理解するところからですが、ここに関してはほぼyoutube動画で勉強できます。
私が色々見回って分かりやすかったのは、Tech Academy（テックアカデミー）の「はじめてのHTML入門講座」「はじめてのCSS入門講座」です。
一本の動画が4~5分ぐらいで、項目ごとに分かれているので隙間時間を活用した勉強もしやすいです。
私はこの2つの再生リストを２周して、「プログラミングってこんな感じなんだなー」レベルの理解度までいきました。
ただここで重要なのは、実際に動画を見ながら、もしくは見た後にコードを真似て書いてみること。
実際に手を動かして、ブラウザ上にどのように反映されるのか、自分で確かめることが大事です。
60%理解したら実際にページを作成してみる
ある程度基礎がわかったら、早速ページ作成に入っていきましょう。
「まだ基礎ができてないので不安、、」と思うでしょうが、大丈夫です。
逆にページ制作をすることによって、基礎をだんだんと理解していくのでここは勇気を持って一歩踏み出しましょう！
実際にWEB上にあるサイトのほとんどは、Javascriptなどを使用して、アニメーションが付いているものがほとんどですが、今回はそこは無視して問題ありません（スクロールするとフワッと出てきたりするやつです）。まずは静的にページを組めるようになることに注力していきましょう。
答えは全てWEB上にある
先ほども言いましたが、制作途中で必ずバグが起こります。
これはプログラミングをやっていく人間にとって永遠の課題です。わからないことは自分で調べる癖をここでつけておいて下さい。
ググり力を鍛えておくことは、この先必ず役に立つので諦めず根気よく解決方法を探していきましょう。
どうしても解決できない時は、デベロッパーツールを使用してソースコードをのぞいてみましょう。googlecrhomeやfirefoxなどにはホームページのソースコードを確認できるツールが備わっています。そこで対象のソースコードを確認して、どのようにコーディングされているのか調べることができます。このツールはよく使いますので、使い方に慣れておくことをお勧めします。
休憩することも重要です
どうしてもわからず、泥沼化してきたら一旦作業をやめて休憩するのもアリです。
一回リセットしてスッキリした状態でもう一度挑戦してみると、スッと簡単に解決できることがあります。
私もこれは泥沼化しそうだな、と感じたら休憩を挟んでリフレッシュするようにしてます。焦らず、ゆっくりコツコツと自分のペースで進めていきましょう。
完成したら、周りの人に見せてみる
試行錯誤しながらもなんとか完成したら、周りの人に見せてみることを強くお勧めします。
自分が大変な思いをして作り上げたページを見てもらうことで、友人や恋人、家族から褒めてもらえたり、認めてもらえることで自己肯定感が上がり、より勉強する意欲も湧いてきます。
もし周りにプロのエンジニアがいるのであれば、ページを見せて改善点を教えてもらいましょう。「そんな方法があったのか」と目から鱗の情報をもらえることが多いですし、一度自分で考えて組んでいるので理解度も高くなります。
まとめ
かなりざっくりですが、私の経験をベースにした勉強方法を解説しました。
HTML・CSSは初学者向けの言語と言われていますが、かなり奥が深く、スキルとして身につけるにはそれなりに時間と体力がかかります。
しかし、ここを乗り越えていけるようになれば自信がつきますし、将来的にもっと技術を磨けばWEBエンジニアに転職できるようになります。
また、HTML・CSSがある程度扱えるようになったら、次はJavascriptの学習に入りましょう。WEBエンジニアを目指すためにはこちらも必須言語ですのでぜひ挑戦してみてください。
私も日々勉強していきますので、みなさんも一緒に頑張りましょう！
読んでいただきありがとうございました！
