2021/07/31 (更新日: 2021/08/04)

【2021年最新】HTMLとCSSを独学するためのロードマップ

HTML/CSS

HTMLとCSSを独学したい人

HTMLとCSSの独学の進め方ってどんなかんじ？独学で勉強しても仕事できるようになるの？

こういった疑問に答えます。

本記事の内容

HTMLとCSSを独学することは可能？
HTMLとCSSの基礎学習
デザインカンプからのコーディング練習
HTMLとCSSを学んだ後にやること
まとめ

この記事を書いている僕は、知識0から学習4ヶ月でフリーランスエンジニアになり、HTML・CSSメインで仕事をしています。
制作会社3社と業務委託を結んで仕事しています。

というわけで、こういった背景からわかったノウハウを共有しますね。

HTMLとCSSを独学することは可能なの？

結論、HTMLとCSSを独学することは可能です。
プログラミングスキルなしだった僕でも、この方法で学習を始めて4ヶ月後にフリーランスになりました。

それでは具体的にどうやって学習したのかを解説していきますね。

HTMLとCSSの基礎学習

まずはおすすめの学習サイトから紹介しますね。

HTMLとCSSの独学におすすめな学習サイト2選

Progate[プロゲート]：ゲーム感覚で楽しめる
ドットインストール：1つの動画が3分で通勤中に学べる

プロゲート

クリアしてレベルを上げていくシステムなのでゲーム感覚で楽しめます。

ドットインストール

1つの動画が3分で、大事な部分のみを学ぶことができます。通勤中の短い時間でもインプットできるのでおすすめです。

HTML・CSSを学ぶのであれば、必ずこの2サイトはやるべきです。周りのエンジニアもみなさん紹介してますね。それぞれ有料ですが、1,000円/月ほどなので非常に安いです。惜しまず投資しましょう。

プロゲート（多くても2周まで）→ドットインストール（多くても2周まで）の順番で学習するのが効率的です。

HTML・CSSを独学する上での大事なマインド

僕が思う未経験者がHTML・CSSを学習する上で大事なことは

完璧に理解するのではなく、ある程度理解したと感じたら進むこと

これが一番大切だと思います。

例えばプロゲートを3週も4週もするのではなく、
理解度が40％くらいでも1〜2周でOKということです。

暗記するまで理解しようとするとかなり時間がかかり挫折します。
よくわからなくも一旦先に進める方が効率的ですね。

デザインカンプからのHTML/CSSコーディングの練習

ある程度基礎の学種を終えたら、デザインカンプからのコーディングの練習をしましょう。

デザインカンプからのコーディングはクリ★スタさんのサイトで間違いなし

クリ★スタ：初級・中級・上級の3種類あり

こちらのサイトは無料＆わかりやすい解説なのでおすすめです。
Adobe XDからのコーディング方法は、はにわまんさんの記事が参考になります。
はにわまんさんの記事を見つつクリ★スタさんの教材を進める感じでOKです。

なお、上記デザインカンプからのコーデンングにはJavaScript、jQueryの学習が必要になってきます。

JavaScript、jQueryの学習方法は次の章で解説しますが、学習しながらデザインカンプを完成させてみてください。

また、SCSSも使えるようになった方がコーディングの効率は上がります。こちらも次の章で解説します。ちなみに僕は、家でデザインカンプからのコーディング、通勤中にSCSSをプロゲートで学習していました。

模写じゃなくていいの？

模写ではなく、僕はデザインカンプからのコーディングをお勧めします。
デザインカンプからのコーディングはより実案件の仕事に近いからですね。

デイトラを運営されているしょーへーさんも下記のようにツイートしています。

【模写コーディングは必要ない】
⚠️実サイトの模写は実績に使えない
⚠️模写と明記しても著作権侵害になりかねない
⚠️案件に「完成しているサイトをみながらコーディングする」なんて工程はない（練習効果うすい）

👇のサイトなら1と2はアリだけど3のiSaraの模写はやらなくて良いです❗️ #デイトラ https://t.co/TcDKb3q2OO

— ショーヘー@デイトラ運営 (@showheyohtaki) January 12, 2021

また、模写をお勧めしない理由はしょーごさんも解説してくれてます。

独学でHTMLとCSSを学んだら次にやること

ここまで学習できたあなたは、基礎は身についています。

とはいえ、HTMLとCSSのみでサイトをつくることはほぼないため、JavaScript、jQuery、WordPressまでの学習を終えてから仕事を取りに行くことをお勧めします。

では順を追って解説していきます。

JavaScript、jQueryの基礎を学習

重要なことをお伝えします。

JavaScript、jQueryはさらっと学習でOKです。

先ほどもお伝えしましたが、「ある程度理解したな」と感じたら次に進むようにしてください。ここで深く学ぼうとするとかなり時間がかかります。

僕はさらっと学習して、下で紹介するしょーごさんのnoteを見ながら実案件でよく出るパーツのみ学習しました。実際の仕事で使う確率が低いものを学んでもいざ使うときには忘れてしまってますからね。

学習教材はプロゲートでOKです

しょーごさんのnoteでJavaScript、jQueryのパーツ学習

【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

この教材では、実案件でよくあるパーツを学べます。

こちらのnoteは有料ですが非常にお勧めです。僕が実案件でJavaScript、jQueryを実装する際に何度もnoteを見返しました。買って損はしない教材ですね。（有料といっても800円なのでかなり安いですw）

SCSSを学習

おすすめのサイト

夢みるゴリラ：VScodeで簡単にSCSSの環境構築をする方法を解説
ProgateのSassコース：さくっと基礎学習できる

1〜2日あれば学習できるので早めに学習してSCSSをマスターしときましょう。
SCSSは実案件で毎日使ってます。

codeupsにて学習

codeupsは、制作会社との実務を擬似体験できるサービスです。僕の場合は、WordPressの学習に入る前に「codeups」で実務体験しました。

おすすめポイント

gulpを使った環境構築
BEM設計手法を用いたCSS設計
コードレビューによるフィードバック
個別ZOOMによるコーディングの解説
無期限で技術面の相談可能

今まで独学で勉強してきた僕にとっては目から鱗のサービスです。実務レベルでスキルがあるか不安を感じる方はぜひお勧めします。

なお、すでにCSS設計手法が理解できてる人、既存テーマのみで仕事していきたい人にはお勧めしません。

WordPressの基礎学習をする

動画学習

WordPress開発マスター講座：WordPressの基礎理解

たにぐちまことさんの講座になります。この動画を学習することで、既存テーマのカスタマイズではない、オリジナルのウェブサイトが作れるようになります。

Udemyは月2〜3回セールを開催しているので、そのタイミングで買うのが吉ですね。
また、無条件の30日間返金制度があるので安心です。

書籍での学習

ビジネスサイトを作って学ぶWordPressの教科書

WordPressの演習教材を受ける

しょーごさんのnoteがおすすめです。

【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】

なお、こちらの教材はテストサイトに公開する必要があります。
まだ自分のサーバーを持ってないよという方はこちらの記事をご覧ください。
» 【初心者向け】サーバーの開設方法

おすすめポイント

portfolioとして利用可能
サイトの複数ページ構成方法が分かる
WordPressサイトの構築を一通り学べる
テスト方法を学べる

特に作った後にportfolioとして使えるのがでかいですよね。

また、WordPressサイトの構築を一通り学べると一言で表してますが、
下の実装一覧も全て学べます。

実装一覧

・関連記事一覧
・おすすめ記事
・カスタムフィールド
・カスタム投稿
・ページネーション
・パンクズリスト

WordPressの実装で詰まったら

じゅんぺいさんがオリジナルテーマの作り方を解説してくれてます。僕は何度もじゅんぺいさんのブログに助けられました。ファイル作成から詳しく解説してくれてますので非常に勉強になりますよ。

HTMLとCSSの独学まとめ

記事のポイントをまとめます。

HTMLとCSSの基礎学習をする
デザインカンプからのコーディングの練習をする
JavaScript、jQueryの基礎を学習
SCSSを学習する
スキルに不安があるならcodeupsで擬似体験をする
WordPressの基礎学習をする
WordPressの演習教材を受ける

こんな感じです。

ただ、この記事を読んだだけだと、意味はないです。あとは行動あるのみなので、今すぐ行動していきましょう

というわけで以上です。ありがとうございました。

WordPressのインストール方法