HTML＆CSS勉強法

2023年1月13日2023年7月23日

HTML＆CSS勉強法（HTML＆CSSは独学でも学べます）

HTML＆CSSの勉強を始めたいけどどのように勉強したら良いのか分からない。

やはり学校に通うべき？と迷っている方もいらっしゃると思います。

結論、HTML＆CSSは独学でも学べます。

今回はHTML＆CSS全くの初心者が独学で勉強するにはまず何から始めたら良いのか勉強方法をお伝えします。

ポートフォリオサイトを自作したいのであればHTML＆CSSは必須で、初心者が1番最初に学ぶのに適した言語です。

他の言語と比べても難易度は高くないので初心者が独学で学ぶことも十分可能です。

用意するもの

パソコン

普通のパソコンで大丈夫です。今お使いのパソコンで十分です。

ただグラフィック系も学んでいきたいとか、そろそろ買い替えたいのでどれにしようか迷ってるという方は下記を参考になさると良いでしょう。

Webブラウザ

chromeやSafariやEdg。

まずはお使いのブラウザで良いでしょう。

テキストエディタ

テキストエディタとはメモ帳などテキストが書けるものですが、マークアップに適したテキストエディタがありますのでそちらを使いましょう。

オススメのテキストエディタ（無料）

・VisualStudioCode（ビジュアルスタジオコード）

無料なのに沢山の機能が搭載されていてとても使いやすい。
更にプラグインで便利機能の追加もできます。
使用している方も大勢いて検索すれば使い方や分からないことをすぐに調べることができるのでVisualStudioCodeはとてもおすすめです。

勉強手順

それでは準備が整ったところで手順を紹介していきます。

1冊ですべて身につくHTML＆CSSとWebデザイン

本のタイトルどおり本当にこの1冊でいろいろ身につきます。

この本を最初からひと通りやってみましょう。
最後までやるとサイトが1つ出来上がるので達成感があります。

レスポンシブにも対応していてとても参考になります。

初学者でも大変にわかりやすく、他の大勢の方もお勧めしていますが本当にオススメの一冊です。

私もいろんな本を買って勉強しましたが、最初に選ぶのはサイトが1つできあがる本にすると達成感もあるし楽しく勉強できるのでオススメです。

---

HTML＆CSSとWebデザインが1冊できちんと身につく本

次におすすめの本が「HTML＆CSSとWebデザインが1冊できちんと身につく本」です。

この本では違うタイプの4つのレイアウトサイトを作りながら学ぶことができます。

さらにレスポンシブも作りながら学ぶことができ実際の現場で使うWebデザインの知識と基礎がしっかり身につく一冊です。

---

Progate

ある程度は理解して手を動かしてからの方がProgateは理解しやすいのかなと思います。

しかもProgateはスマホアプリもありますので電車の中やスキマ時間にできます。
クリエータークエストをやりつつ同時進行でスキマ時間にProgateという感じで進めるのも良いでしょう。

ただスマートフォンアプリはコードを並び替えるだけなのでできればパソコン版をきちんとやることをおすすめします。

やはりコードは自分で記述しないと覚えません。

Progateは同じようなコードを繰り返し記述するので「このように記述すれば良いんだな」ということが分かってきます。

何周もする必要はないのでぜひ1回やってみましょう。

模写コーディング

ここまで勉強してきたら次は模写コーディングをしてみましょう。

実際のサイトを模写コーディングするのも良いですがまだまだ難易度は高いです。

そこでおすすめするのは模写コーディングサイトです。

検索すれば模写コーディングサイトたくさんありますが、「codestep」がオススメです。

入門編は実にシンプルでとても分かりやすい構成になっています。
まずは答えを見ながらでも良いので進めていくと出来上がる頃にはカッコいいレイアウトまで学べてしまいます。

1つずつレベルアップしていくとたくさんのことが学べるので本当にオススメです。

ここまで勉強してくるとかなり理解できているのでコーディングも楽しくなって来ます。

模写したものを（画像などはPIXTA などからダウンロードした高画質画像を入れましょう）ポートフォリオサイトにすることもできます。

次はJavaScript、Phpと進んで行くのも良いでしょう。

サイトを作る

サイトを実際に作ってみます。

実際に作ることで模写とは違ったさまざまな課題が見えてきます。
この課題を妥協することなく解決していくことで驚くほどスキルがあがります。

ぜひ自分でサイトを作ってみましょう。

知人や友人のホームページを作ってあげるのもおすすめです。
どのようホームページを運営したいのかヒアリングして希望どおりにコーディングしてみる。

出来上がったサイトはもちろん実績としてポートフォリオに掲載します。

あとはこの繰り返しです。
スクールでも基礎を学んだら後はひたすらサイトを作る作業をするだけです。

CrowdWorks などのクラウドソーシングサイトで実際に簡単なお仕事をしてみるのも良いでしょう。

まとめ

独学で勉強しているとつまずいた時本当にツライですが、楽しく学べるYouTubeやサイトが数多くありますのでご自分にあった勉強法を見つけてみましょう。

＊＊＊＊＊＊＊＊＊＊

ここまで独学で「HTML＆CSS」を学ぶ方法をお伝えしましたが、途中でつまずいてしまって先に進めない、検索しても答えが見つからないと悩んでいる方もいらっしゃるかもしれませんね。

そのような方は完全無料で就職までサポートしてくれるエンジニアズゲート などのスクールも検討してみるのも良いでしょう。

---

買ってよかった書籍をまとめてみました。