HTML CSSの勉強方法とは?未経験でwebデザイナーになった僕の勉強方法を紹介します!

コーディングcoding


みなさんこんにちは。takatoenjoying_freeです!

さて、webデザイナーを目指していると、下記のような悩みが出てくるかと思います。


・HTMLとCSSってどのように勉強すれば良いんだろう

僕もHTML CSSの勉強をし始めた時は同じ悩みに直撃しました。

実際に未経験でwebデザイナーになった僕が、過去どのように勉強したのか皆さんに紹介することで上記の悩みを解決できるのではないかと思います。

是非読んでいってください!

参考書を使った勉強方法

まず最初に行ったのは参考書を用いた勉強方法です。

コーディングの勉強は無料オンライン教材もあり、そっちから手を付けようか迷いましたが紙の参考書から勉強し始めました。

オンライン教材の方が荷物にならないし良いのですが、全てのコードを書くことができるわけではありません。

その内容に必要なコードのみ求められ、それ以外のコードは事前に書かれている状態なのです。

その方が勉強のスピードが高いし良いのですが、コードを触ったことのない人にとって省かれているところすら勉強のポイントになるのです。

その点紙の参考書だとコードは全て自分の手で書くことができます。そのためHTMLの雛形やサイト全体に反映させるcssなどの基本から手を動かして勉強することができるのです。

僕が実際に使用した紙の参考書は、1冊ですべて身につくHTML & CSSとWebデザイン入門講座という参考書です。

この参考書はHTML CSS初心者向けの参考書で、一からwebデザインのコーディングを勉強したい人におすすめのものとなっています。

コードの書き方や説明がしっかりとされているので、初めてコーディングされる方も敷居を高く感じることなく勉強できます!

僕はこの参考書を2周しました。1周だけやるよりも2周勉強することで理解度は3~4倍になります。

オンライン教材を使った勉強方法

参考書の勉強が終わったらオンライン教材を使用して勉強しました。

僕が使用したのはプロゲートです!オンライン教材はプロゲートドットインストールがメジャーなものになっています。

プロゲートはオンラインテキストがあり、そのテキストを進めていきます。

ドットインストールはテキストが動画となっております。動画だとWi-Fiの消費が大きいので、僕はプロゲートで勉強していました。

プロゲートはHTML CSSだけでなく、JavaScriptやPHPなど幅広く勉強することができます。

JavaScriptとは、サイトに動きを出すために必要なプログラミング言語です。例えば画像のスライドショーだったりスクロールした際にフワッと表示されるようにすることが出来ます。

最近のwebサイトの流行はサイト内に動きを出すのが流行っているため、webデザイナーを目指すにはJavaScriptの勉強も必須になります。

PHPはwebサイトにサーバー機能をつけるために必要なプログラミング言語です。例えば問い合わせフォームからコンタクトがあった場合、その内容が自分のメールアドレスに届くように設定したりする際にPHPが必要になります。

PHPもwebデザイナーを目指す上では身につけておいた方が良いコーディングスキルとなります。

まずはHTMLとCSSをマスターするためにプロゲートを何周かしました。

プロゲートのHTML CSSは初級・中級・上級と分かれており、徐々に難しくなります。

さらに自分の力だけでサイトを作成するコースも用意してあるので、ただインプットするだけでなくアウトプットも出来るのです。

初級は無料で出来ますが、中級以降は有料会員にならないと勉強することが出来ません。しかし月額980円(税別)なので、課金しても問題ないと思います。

1ヶ月ほど集中して勉強すればもう課金する必要はないかもしれませんね!

是非プロゲートも2,3周勉強してみてください。

プログラミングスクールでの勉強方法

参考書で勉強し、プロゲートでの勉強も終わったあとはプログラミングスクールに通いました。

理由はエラーが生じた際に質問できる人が必要だったからです。

コーディングの勉強をしていると、ちゃんとコードを書いているつもりでも思うように動かない時が多々あります。

その時にどこが原因なのかわかるまでにすごく時間がかかったりします。(原因が見つかるまでに半日かかることがありました)

そうなると勉強が思うように進まなくなったり、エラーを見つけることがストレスになり勉強をやめてしまう原因になってしまいます。

そうならないために、僕はプログラミングスクールに通って気軽に質問できる人を作りました。

僕が実際に通ったスクールはテックキャンプというプログラミングスクールです。

テックキャンプはオンラインで受講することが出来、一人一人にメンターがつきます。

毎週1,2回面談を行い勉強の進捗報告を行いました。エラーが生じた際何を意識すれば短い時間で原因を突き止めることができるのかなどの相談もしました。

テックキャンプにもHTML CSSのコースがあり、そこで再度勉強しました。

テックキャンプは今オンラインで無料相談を受け付けているそうです。

webデザイナーやプログラマーの転職を考えている方は、お話を聞くだけでも考えが深まると思いますので、是非無料相談会に参加してみてはいかがでしょうか。

webデザイナーになって変わったこと

僕は社会人二年目の半ばでwebデザイナーに転職しました。それまでは営業をしていたため、全くの未経験でした。

webデザイナーになって変わったことは、業務内容がそのまま自分のスキルに直結するということです。

デザインやコーディングスキルが自分のスキルになるので、ある程度スキルを身につけたら個人で稼ぐことができるようになります。

さらにパソコン一台でどこでも仕事ができるので、旅行しながら仕事をすることも出来ます。

そして僕個人が一番感じているのは、自分が作った作品が世に出回るということです。自分が作ったwebサイトが色んな人にみてもらうことができるのが何より嬉しくてwebデザイナーになってよかったなと思うポイントです。

これぞデザイナーの醍醐味って感じですね!笑

最後に

以上がwebデザイナーになった僕のHTML CSSの勉強方法でした。

未経験でwebデザイナーになるのは正直簡単ではありません。しかししっかり勉強してポートフォリオを作成すれば、あなたを採用してくれる会社はきっとあるはずです。

もしwebデザイナーになりたい方がいましたら、是非この記事を参考にしてもらえればと思います!

takato
takato

webデザイナーはとても楽しいよー!