HTML/CSSは何ヶ月でマスターできるか。時間がかかる理由

HTMLとCSSは初心者が何ヶ月でマスターできる?

HTMLとCSSは何日・何ヶ月でマスターできるのか?その疑問にお答えします。

この記事はWebデザイナー歴18年のフリーランスが書いています

目次

HTML/CSSをマスターする目安は1ヶ月〜3ヶ月

基礎はゆっくり学んでも1ヶ月で完了できる!

まず昼間に別の仕事をしている会社員か、時間のある学生・主婦かでも違うのですが、大体

1ヶ月

あれば、基本はマスターできます。

意外と短期間で学べると思いませんか?

HTML/CSSの初学者がまず最初に手をつけるのに最適なHTMLの登竜門と言われるドットインストールというサイトがあります。

このドットインストール内のHTML/CSS講座を全部受けると、だいたい10時間程度で終わります。

ただおそらく動画の途中で詰まる場面もあると思いますので、それを見越すと20時間くらい。

 

また、同じく初心者の学習サイトとして有名なUdemyの初心者向けHTML/CSS講座を見てみると、だいたい10時間から、長くても20時間程度の講座が多いです。

全くの初心者から始めたと仮定して、1日1時間、ゆっくり勉強しながら進んだとしても、20日かからず基礎的なことを学ぶことができるのではないでしょうか。

ただ、パソコンに慣れている人ならおそらく1週間かからず終わりそうですが、普段スマホでパソコンに慣れていない人の場合は、倍の2ヶ月くらいかかるかもしれません。

ただ、プログラミング言語と違って、HTML/CSSは素直で非常に学びやすい言語です。

最初はしんどい

何事もそうですが、全くの知らない分野を勉強するのは最初が一番しんどいものです。

HTMLとCSSは基本写経をしながら、だんだんと自分流のコーディングをマスターしていくものですが、写経はできても自分のオリジナルコードを打てるかどうかは悩ましいところだと思います。

やはり簡単なレイアウトの数をこなすのが一番です。ヘッダーだけ、フッターだけ、トップページだけ、という風に同じレイアウトを何度もコーディングすることです。

最初は下手にテキストエディタ以外のツールは使わない方がいいです。

また、よくある、ニュース一覧だったり、ハンバーガーメニューはコピペOKのテンプレートが大量に配布されていますので、自分にしっくりくるものをひとつ選んで使ってもいいと思います。

わからなかったらとにかくgoogleに聞く。HTMLコードを掲載しているサイトはたくさんありますし、それらはだいたい初心者向けの丁寧な解説をついています。

逆にやらない方がいいのは、適当なサイトをChromeのコンソールでソースをのぞくこと。

Webサイトはだいたいがライブラリやフレームワークを使って吐き出されているため、無駄に複雑化されてますので、コピペしにくく、初心者が見ても意味がわからないだけです。

中級編にもう1〜2ヶ月かかる

HTMLとCSSの基本に2ヶ月かけたとして、残念ながらまだWebコーダーとしての仕事レベルには達していません。

基本をマスターしたら、次にステップアップに

1〜2ヶ月

といったところでしょうか。中級のスキルがついたら、とりあえず現場に出ることはできると思います。その後は、ひたすら実践ですね。実践に入って半年〜1年もすれば、だいぶこなれてくるのではないでしょうか。

現場で働くコーダーになるために学ぶべきことは、最低限以下の4つ。

・Sass

・CSS設計

・CMS(WordPress)

・デザインソフトからの画像切り出しについて

具体的な勉強方法は以下の記事に書いています。独学で学んでいる人のために、おすすめの勉強方法をロードマップ形式で説明しているので、ぜひ参考にしてくださいね。

JavaScriptの学びは何日?

HTMLとCSSをマスターした人が次に手をつけるべきなのは、JavaScriptです。JavaScriptはWebサイトの画面に動的なアクションをいれるのに欠かせないプログラミング言語。しかし、JavaScriptは難しいです。CSSが草野球だとしたら、JavaScriptは甲子園常連校くらいの難しさ。

といっても、基礎だけなら2ヶ月ほどでマスターできると思います。私もドットインストールやUdemyの動画で、3ヶ月かけて基礎だけなら自信があります。

でも、残念ながら基礎をマスターしても、全く動かせないんですよね。

プログラミングはセンスも時間もある程度必要だと思います。1番の近道は、プログラミングスクール等で教えてもらうことですね。独学でもできますが、エラーになった時に誰も教えてくれない、正解がわからないのが、辛いところだと思います。

 

初心者用から実践的な学びまで、完全に網羅している動画はこちら。

Udemyの学習動画の参考スクリーンショット。HTML/CSS/JavaScriptを学べる、Webプログラミング初心者のための入門講座
【HTML/CSS/JavaScript】Webプログラミング初心者のための入門講座ー制作から公開までこなせるスキルを! icon

まとめ:勉強のコツはない。ひたすら手を動かそう

SNSを見ると、HTMLの学びのコツとかいう情報商材をみかけますが、コツなんてありません。

JavaScriptのようなプログラミングの場合は、論理的思考が必要ですので、ある程度のセンスやコツも必要です。

しかし、HTML/CSSの場合は、このレイアウトはこれ、みたいなテンプレートも決まっていますし、とにかく手を動かして体に覚えさせるのが一番です。英語と一緒で、文法や言い回しを覚えて、あとは実践で慣れること。正解がひとつなわけでもないので、そのうちに自分の癖というかオリジナルのコードがかけるようになってきます。

また、あまり気負う必要もありません。

特に、CSSは100%完璧なコードを打てる人は早々いません。私自身、いまだに試行錯誤しながらCSSを書いています。

こう言ってはなんですが、HTMLやCSSは裏側のソースなので、ユーザーにとっては全然目に入らないものです。プログラムは失敗すると社会的影響を与えるくらい大きなダメージになり得るものもありますが、HTMLを失敗してもせいぜい画面のレイアウトが崩れるくらいです。

しかもインターネットの良いところは、気づいたらすぐ直せる。ミスがあってもすぐに直して本番に差し替えできちゃいます。これが紙のデザインだと、大損害ですからね。

おくすることなく、積極的にチャレンジしていきましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次