【未経験でも可能】HTML/CSSをマスターする学習ステップ

2021/10/04

( 更新日：2021/10/04 )

IT人材は年々不足しており、2030年には80万人ほど不足すると言われています。逆を返せば、IT業界には大きな需要があります。未経験でもITスキルを身に着ければチャンスも大きいです。特にインターネットが日常に浸透している中で、Web系のスキルは必須と言えます。

Web制作のスキルはたくさんありますが、基本となるのがHTML/CSSです。HTML/CSSはWebページの構造や見た目を作れます。世界中のWebサイトはHTML/CSSで構成されています。HTML/CSSは未経験でも習得しやすいのが特徴です。

本記事ではHTML/CSSをマスターするための学習ステップを解説します。ITエンジニアを目指すための入口ともいえます。ぜひ、参考にして下さい。

未経験でもHTML/CSSのマスターは可能

未経験でもHTML/CSSすることは可能です。完成度として、80%模写できるサイトが3つ作ることが未経験からマスターの目安です。学習の目標を自分のよく見るサイトやGoogleで「HTML　模写　初心者」で調べて出てくるページを模写できるようになるとすることをおすすめします。

「自分には難しそう」と思う人もいるかもしれません。しかし、下で紹介する学習ステップでやれば独学でも可能です。最初に目標とするサイトを決めていると学習の途中で「このコードを使えば、あの部分は作れそうだ」と想像できます。

公開されているサイトと同じような見た目のコードを書けそうだと思うと、学習のモチベーションも上がり、長続きします。

HTML/CSSで完成度が80％のコーディングをするための学習期間は約3ヶ月です。学習時間の目安として毎日1～2時間程度を想定しています。最初の1ヶ月は基礎を固めて、2ヶ月で実践の中からHTML/CSSの考え方を定着させます。

学習の中で辛いのは基礎から実践に移るときです。基礎で学んだコードであれば上手く表示できるのに、実践していくと思ったような表示にならないことが多々あります。そんな時はGoogle検索とエンジニア向けの質問サイトを利用することをおすすめします。おすすめの質問サイトはteratailです。

質問サイト：teratail

また、わからないときは一度諦めて無視して進めてもOKです。コーディングではやっている内になんとなく理解できることが多々あります。

未経験の方がHTML/CSSを学習するならProgateがおすすめです。Progateはオンラインでプログラミングを学習できるサービスです。スライドで分かりやすく解説されて、ブラウザ上でコードを書きながら学べます。インプットとアウトプットを繰り返すため、定着しやすいのが特徴です。

レベルが初級、中級、上級と分かれています。また、レベルに合わせて「道場コース」というコードを実践していくコースもあります。初級編のみ無料で、中級、上級と道場コースは有料（月額1080円）です。HTML/CSSをマスターしたいのであれば有料コースをおすすめします。

Progateが終わったら、HTML/CSSの入門書で学習することをおすすめします。Progateは分かりやすいですが、深い知識を得ることができません。入門書はProgateに比べて深い知識が書かれており、応用的なスキルを身に着けるには必須です。

入門書は索引がついていることが多く、模写サイトを作る際の辞書代わりになります。コードの書き方や役割を忘れたり、思うように動かないときは入門書が役立ちます。おすすめの入門書は以下の通りです。

Progateと書籍で一通り学んだら、模写サイトを作ることをおすすめします。Web上で公開されているページで自分のよく見るサイトや作れそうなサイトを自分のPC上で作ります。完璧にする必要はありません。始めの内はレイアウトが似ている程度で十分です。

模写サイトを作るときは難しいと思ったら別のサイトに切り替えて、作れそうなものを作っていくことがおすすめです。また、慣れるまではレスポンシブ対応まで考える必要はありません。とりあえず、コードをたくさん書くことを意識します。

サイトを模写することで似たレイアウトが作成できるようになったら、完成度を上げていきます。レイアウトが似ているだけでなく、構造や色合い、画像のバランスなども意識します。そして、80%程度の完成度となれば、同じサイトはほぼ作れるといっても過言ではありません。

完成度を上げるための工夫はHTML/CSSの概念の理解度と論理的な思考が試されます。うまくいかないときは基礎に帰ることも検討してみてください。まだ、理解度が足りていない可能性があります。論理的な思考はコードを書く⇒基礎に帰る⇒コードを改善するの中で自然に身に付きます。

この段階で、完成度80%の模写サイトを3つ作ることができれば、HTML/CSSはマスターしたといっても過言ではありません。

HTML/CSSをマスターしたら、JavaScriptの学習に進むことをおすすめします。JavaScriptはHTML/CSSで作成したWebサイトに動きをつけるためのプログラミング言語です。例えば、スライドショーを作ったり、マウスをボタンの上に載せるだけで、メニューが現れたりする機能を作れます。

JavaScriptもProgateや書籍で勉強できます。HTMLでサイトを作れるようになったら、学習を開始するのがおすすめです。

HTML/CSSはWeb制作の基本です。Webサイトは年々増加傾向にあり、今後も伸びていく可能性が高いです。HTML/CSSでコーディングができなければ、Web系のエンジニアとして活躍するのは難しいと思います。

HTML/CSSは他のプログラミング言語に比べれば非常に優しいです。そのため、エンジニアとしてキャリアを形成する上で、真っ先に身に着けるべきスキルと言えます。本サイトでもHTML/CSSに関する記事を多数書いているので、ぜひ参考にして下さい。