HTML/CSSを独学かつ最短期間で学ぶ方法【初心者向け】

どうも、しめじです!

この記事では、HTMLとCSSを独学かつ最短期間で学ぶ方法について、初心者の方向けに分かりやすく解説していきます。

あなたは今、こんな風に悩んでいませんか?

  • 「HTML/CSSをどう学習していったら良いのか分からない…」
  • 「HTML/CSSを学び始めたものの、なかなか理解できない…」
  • 「HTML/CSSは理解できたけど、サイトを作ろうとすると手が止まる…」

お恥ずかしい限りなんですが、実はこれ、僕がWeb制作の学習を始めた当初に実際に悩んだことですw

HTML/CSSって、意外と学習ルートが確立されてないんですよね。

情報はあるんだけど、バラバラに書かれていて結局どの手順で進めたらいいのか分からない…みたいな感じ。

なので今回は、この記事だけを読めばHTML/CSSの学習が最短で進められるよう、独学のロードマップを分かりやすくまとめてみました。

目安期間:〜

それぞれの見出しの下に上記のような目安期間を設置しているので、目安期間を参考に進めてもらえるとスピード感が分かりやすいかと思います。

目次

前提:覚えるのではなく理解を優先した学習をする

【HTML/CSS】覚えるのではなく理解を優先した学習をする

重要なので先にお伝えしておくんですが、これから学習を進める時は「覚える学習」ではなく「理解する学習」を意識してください。

僕もやっていたんですが、ついつい覚えようとしちゃうんですよね。プログラミングは学校の勉強ではないので、覚えずとも分からない時にググって調べるだけでOKです。

例を出すと、教科書持ち込みができるテストみたいなものですね。必要な時に必要な内容を素早く調べられるスキルの方が重要になります。

具体的には、以下のようなポイントが理解できていれば、どんどん先に進んで大丈夫です。

HTML/CSSの学習で理解すべきポイント
  • HTMLやCSSがどんな風に使われているのか
  • それぞれの言語にどんな役割があるのか
  • 大まかにどんなことができるのか

ついつい完璧を追い求めてしまいがちなんですが、「なるほど、こういう時はアレを使うんだな」くらいの理解度でガンガン進めていきましょう。

「そんなんで大丈夫?」と思うかもしれませんが、大丈夫です。僕もそんな感じで進めたので。

知識は技術として使って初めて価値を持ちます。まずはサイトを作るというステージに最速で立つことを目標に進めましょう。

しめじのアイコン画像しめじ

覚えようとしても量が多すぎて無理なので、使い方や役割、どんなことができるのかを理解していきましょう!

1. HTML/CSSがどんなものかを学習する

HTML/CSSとはどんなものかを学習する

目安期間:2週間前後

これから学習を始める方は、まずHTML/CSSがどんなものなのかを理解する学習をしましょう。

ここは定番ですが、以下の2サイトのHTML/CSSコースをこなすのがおすすめです。

初めての学習におすすめの学習サイト

それぞれ2周ずつくらいやれば、大まかなイメージや使い方は理解できるかと思います。

理解するだけならProgateだけでもOKなんですが、ドットインストールの方がより実務に近いです。

Progateで基本を理解して、ドットインストールで実際の使い方を学ぶイメージで進めましょう。

Progateとドットインストールは、どちらも有料会員登録する必要があります。2つ合わせて月額2000円くらい。
学習が終わったら解約すれば良いので、必要経費だと思って投資しましょう。

ちなみに、Progateとドットインストールだと、ドットインストールの方がやや難易度高めです。

いきなりドットインストールから入ると訳がわからず萎えてしまいがちなので、順番としては

Progate2周 → ドットインストール2周

の順でこなすようにしましょう。

両方こなすことで、それぞれの教材に足りない知識が補完できるようになっています。

あとは教材通りに学習を進めればOKですが、効率よく進めるために以下のポイントを押さえておくと良いですね。

効率よく進めるために押さえるべきポイント
  • 完璧な理解を求めない
  • 出来るだけ短期間で終わらせる
  • 3周以上はやらない

結構大切なので、1つずつ説明していきます。

完璧な理解を求めない

最初にもお話しした通り、完璧を求めてはいけません。繰り返しなんですが、マジで重要です。

なんなら僕も完璧には理解していません。分からないことはいつもググって調べてる感じです。

あくまで目的はWebサイトを作れるようになることです。理解はそこそこで十分なので、よく分からなくても一旦先に進めましょう。

しめじのアイコン画像しめじ

最初はProgateの道場コースとかマジ心折れるくらい出来ないですが、気にせず進めてOKです!

出来るだけ短期間で終わらせる

HTML/CSSの基礎学習だけでもそれなりにボリュームがあるんですが、出来るだけ短期間で終わらせるように意識しましょう。

人は時間が経つと、覚えた端から忘れていきます。なので、忘れる前に次のフェーズに進む必要があります。

目的はサイトを作れるようになることなので、学習にいつまでも時間を割いてはいけません。ドットインストールまでの学習は、2週間前後を目安に進めましょう。

しめじのアイコン画像しめじ

色んな方を見ていると、早くサイト模写などに入っている人ほど成果が出るのが早い傾向にあります!

3周以上はやらない

ついつい理解が足りないからと、3周・4周とProgateやドットインストールをやってしまいがちですが、3周以上は大体無駄です。

なぜなら、3周目にもなると内容を覚えている部分が出てくるからですね。これだと同じことはサクッとできても、少し形が変われば何もできなくなります。

仮にどうやるのか思い出せなくても、その時調べに戻れば十分です。

同じことを繰り返していても実務に必要な応用力は身につかないので、不安でも次に進みましょう。

しめじのアイコン画像しめじ

Progateをやっていると他のコースにあれこれ手を出してしまいがちですが、これもあまり意味がないので止めておきましょう。

2. VScode(テキストエディタ)を使いやすくする

VScode(テキストエディタ)を使いやすくする

目安期間:1〜2日

ドットインストールで学習する時にVScodeを使ったと思うんですが、VScodeは今後ずっと使います。

相棒と言っても過言ではない存在なので、今のうちに使い方のコツを押さえておきましょう。

具体的には、以下の3つのポイントを押さえておけばOKです。

VScodeを使いやすくするポイント3つ
  • 便利な拡張機能をインストールする
  • Emmetの使い方を学ぶ
  • 便利なショートカットキーをメモっておく

便利な拡張機能をインストールする

VScodeには、便利な拡張機能が色々あります。

簡単にいえば、VScodeを使いやすくする機能が無料で色々使えるイメージですね。

中でも、僕がずっと入れている拡張機能の一覧を載せておくので、ひとまずこれらをザッとインストールしておきましょう。

一応、設定が少しややこしいもの、すぐには必要ないものは除外しています。

設定が必要なものは分かるようにリンク先を設定しているので、記事をチェックしながら導入してみましょう。

これをやっておくだけで、VScodeがかなり使いやすくなりますよ。

しめじのアイコン画像しめじ

ひとまずはこれだけ入れておけば十分です!慣れてきたら自分好みの拡張機能を追加してみましょう。

Emmetの使い方を学ぶ

Emmetは、ざっくり言うと少ないタイピング数でコードを書けるようになる機能です。

VScodeには標準で搭載されているので、既に使っている人もいるかもしれませんね。

Emmetに関しては、以下のはにわまんさんの記事を読んでおけば理解は十分なので、チェックしておきましょう。

あとは触りつつ手探りで覚えていけば大丈夫です。やってれば自然と覚えます。

Emmetのチートシートもあるんですが、僕の場合ぜんぜん使いませんでした。使った方が分かりやすい方はブックマークしておくと良いですね。

しめじのアイコン画像しめじ

Emmetを使いこなせるかどうかで、コーディング速度が数倍変わります。簡単なものから使っていくと良いでしょう。

便利なショートカットキーをメモっておく

VScodeには色々便利なショートカットキーがあります。

よく使うものだけでも覚えると効率が爆上がりなので、ひとまずはメモって見える位置に貼り付けておくと良いですね。

以下のサイトで分かりやすくまとめられているので、まずは自分がよく使うものから試していきましょう。

しめじのアイコン画像しめじ

VScodeとは末長く付き合うことになるので、より効率よく使えるように意識しながら使うのがおすすめです!

3. Sass(SCSS)を使えるようにしておく

Sass(SCSS)を学習する

目安期間:1〜2日(細かいことはサイトを作りながら覚えたらOKです)

ここまでに学習してきたCSSですが、実はそのままベタ書きすることは滅多にありません。

実際にコーディングする時は、「Sass」と呼ばれるCSSの機能を拡張した言語を使うのが一般的です。

「Sassって何やねん…」って感じだと思うんですが、Twitterとかやってるとちょいちょい見かける「SCSS」という言語のことですね。(実際にはSASSという言語もあるんですが、使われてるの全然見ないです)

Progateに簡単なレッスンがあるので、一通りこなしておきましょう。

Sassの学習におすすめの教材

難しそうに感じるかもしれませんが、基本CSSが書きやすくなったくらいの認識で使えるので、特別難しい勉強は必要ありません。

何ならそのままCSS書いても普通に機能します。

一応でも使えるようになるとコードを書く量が格段に減らせるので、よく使う機能だけ押さえておいて、あとは実践で使いながら覚えていく感じでOKです。

しめじのアイコン画像しめじ

この記事の通りに進めている場合、VScodeの拡張機能を入れた時に必要な機能を入れてあるので、とりあえず一度使ってみると良いですね。

細かい使い方などはググってもいいんですが、意外といい感じの情報がないので本で学習するのが良いかと思います。

ちなみに僕の場合は、「Web制作者のためのSassの教科書」という本で学習しました。

これ1冊でSassはカバーできるので、購入しておくと何かと便利です。

しめじのアイコン画像しめじ

Sassは僕がWeb制作フリーランスになって一番使っている言語です。ぶっちぎりで使うのでおさえておきましょう!

4. HTML/CSSを使ったサイト制作を学習する

HTML/CSSを使ったサイト制作を学習する

目安期間:1ヶ月前後

ここまで学習したあなたなら、既にサイトを作るための下地が出来ています。

ここからは、とにかくサイトを制作しながら学んでいきましょう。結果的に実力もつきますし、自信もつきます。

具体的には、以下の手順で学んでいきましょう。

Webサイトの作り方の学習方法
  • Web制作の流れと作り方を学習する
  • カンプからのサイト制作を学習する

Web制作の流れと作り方を学習する

まずはWeb制作の流れと基本的な作り方を学びましょう。

ネットだといい感じにまとまった情報が見当たらないので、ここも本で学習を進めていきます。

教材としては、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」という本がおすすめです。


1冊ですべて身につくHTML & CSSとWebデザイン入門講座

この本は読みながらサイトを作る形式になっていて、手を動かしながら進めるだけでWeb制作の基本が一通り学べるようになっています。

今までに学習した知識を復習しながら進めるイメージでやってみましょう。

しめじのアイコン画像しめじ

僕も初めてのサイト制作はこの本から始めました!Web制作の流れを一通り学べるのでおすすめです!

デザインカンプからのサイト制作を学習する

1冊ですべて身につくHTML & CSSとWebデザイン入門講座での学習が終わったら、次はデザインカンプからのサイト制作を学んでいきましょう。

デザインカンプからのサイト制作は、制作会社さんと仕事をする上で必須の能力になります。

しめじのアイコン画像しめじ

一般的にはサイト模写をおすすめされているケースが多いんですが、今後のためにもカンプからのサイト制作をおすすめします!

このあとの学習で出てくるAdobe XDで作られたデザインカンプからのコーディングを行えるように、まずははにわまんさんの以下の記事を読んでおきましょう。

また、デザインカンプからのサイト制作では、基本的にデザインカンプ通りのサイトを作ることが求められます。(これを「ピクセルパーフェクト」と呼ぶことが多いです)

やり方自体は難しくないので、こちらも以下のはにわまんさんの記事で先に学んでおきましょう。

準備と理解が終わったら、早速デザインカンプからのサイト制作を進めていきます。

練習用に無料のデザインカンプを配布してくれているサイトがあるので、ありがたく使わせて頂きましょう。

解説付きの無料カンプを配布してくれてるサイト
  • Codestep(無料のデザインカンプ10種類以上)
  • クリ★スタ(無料のデザインカンプ3種類)

どれも分かりやすい解説付きなので、初心者の方でも安心して学習できます。

順番としては簡単そうなものから好きな順でOKですが、仮に僕がやるなら以下の順番でやるかなーと思います。

全てをやる必要はありません。簡単に感じるようであれば飛ばしながら進めてOKです。

クリ★スタさんのデザインカンプが最後になっているのは、jQueryという言語を使った実装が含まれているためです。

クリ★スタ初級編」以下を進める際は、先にjQueryの基礎学習をしておきましょう。

「できるだけ解説を見ずにサイトを作ってみる→解説を読んでフィードバックを得る」という流れで学習すると、理解が進みやすくなります。

カンプからのコーディング学習はかなり大変です

デザインカンプからのコーディングは、おそらく想像を絶するほど大変です。
最初はそれこそ全然進まないという状況が続くかもしれません。

ただ、安心してください。僕もあなたと全く同じ時期がありました。
全然できず、投げ出したくなった時もあります。

解説を見て楽になりたいと思うかもしれませんが、出来るだけ答えを見ずにググって解決してみてください。
その苦労が、後々必ずあなたの力になります。

なお、10〜15分調べても分からない場合は素直に解説コードを見ちゃいましょう。
特に最初のうちは解説のコードを写経してみて、分からない点をググって調べたらOKです。

しめじのアイコン画像しめじ

実務で詰まった時も基本はググって解決することになるので、今のうちにググり力を鍛えておきましょう!

5. 実案件レベルのサイト制作を学習する

実案件レベルのサイト制作を学習する

目安期間:1ヶ月前後

デザインカンプからのサイト制作を終えたあなたは、既にサイトを作ることが出来るようになっています。

ただ、実務レベルのサイト制作では、もう1つスキルが必要になるんですよね。それがjQuery(+JavaScript)です。

jQueryは簡単にいうと、Webサイト制作に特化したJavaScriptみたいなものです。主にサイトに動きをつけるために使われています。
実務では、ハンバーガーメニューやスライダー、ポップアップ、ローディング画面など、色々な部分でjQueryを使います。

JavaScriptを直接書くことは滅多にありませんが、jQueryはそれなりに理解が必要になります。

ここまで来ればあと一息。jQueryを使った本格的なサイト制作を学ぶために、以下の3つの学習を進めていきましょう。

実案件レベルのサイト制作の学習方法
  • jQueryの基礎を学習する
  • サイト制作でよく出てくるパーツの実装方法を学習する
  • 実案件に匹敵するサイトを作ってみる

jQueryの基礎を学習する

まずはjQueryの基礎を学習しましょう。とはいえ、さほど深く学習する必要はありません。

なぜなら、実務では1からコードを書くわけではなく、既に機能が完成されたプラグインを使うことが多いからです。

jQuery自体を書けるようになるというよりは、読んで意味がある程度理解できるラインを目指して学習してみてください。

具体的には、Progateで以下のコースだけをサラッとやっておきましょう。

先にJavaScriptを学習してからjQueryコースに入ると、理解が進みやすいのでおすすめです。

ひとまずは1周やれば十分ですね。jQueryで何ができるのか、どんな書き方をするのかを学ぶ程度で進めていきましょう。

今後jQueryについて詳しく学びたい方は、「jQuery標準デザイン講座」という本が実用的でおすすめです。

実際によく使われるパーツ別に実装方法が書かれているので、初心者の方でも分かりやすく読めるかと思います。


jQuery標準デザイン講座
しめじのアイコン画像しめじ

JavaScriptやjQueryは学習しすぎると沼にハマります。あれこれ学習せず「なるほど、こんな感じか…」くらいの感覚で次に進みましょう。

サイト制作でよく出てくるパーツの実装方法を学習する

jQueryの基礎を学習したら、次はサイト制作でよく出てくるパーツの実装方法を学習しましょう。

ここが出来るようになると、いよいよ実務レベルのLPやサイトの制作が出来るようになります。

おすすめの学習教材は、しょーごさんの以下のnoteですね。

こちらの教材、有料ですがめちゃくちゃ有益です。(有料といっても破格の安さですが…)

僕自身が学習していた時には無かった教材なんですが、初学者がかなり迷うことになるjQueryとJavaScriptでの実装に特化した教材になります。

具体的には、サイト制作でとにかく頻繁に出会うことになる以下の7つのコーディング方法が学べます。

  • ハンバーガーメニュー
  • ドロワーメニュー
  • ローディング
  • スムーススクロールでページトップに戻るのボタン
  • アコーディオン
  • モーダル
  • タブ

この辺の実装方法は、実務において必須スキルになります。

もちろんコピペでも動くんですが、カスタマイズのためには理解が必要になるので、「なぜこのコードで動いているのか?」という部分を触りだけでも理解しておくと良いでしょう。

しめじのアイコン画像しめじ

サイト制作の頻出パーツの作り方を学んだら、いよいよ実案件レベルのサイトが作れるようになります!

実案件に匹敵するサイトを作ってみる

ついに来ました。いよいよ実案件に匹敵するサイトを作ってみましょう。

ここで学ぶべきことは、実務に近いレベルのコーディングスキルの獲得ですね。

結論から言うと、こちらもしょーごさんの出している以下のデザインカンプをおすすめします。

2つとも有料ですが、それだけの価値のあるデザインカンプになっています。

具体的には以下の通りですね。

  • サイト制作で頻出するJavaScript、JQueryを実務ベースで学べる
  • 実案件に近いレベルのサイト制作を学べる
  • 完成後にしょーごさんの表示確認添削付き
  • そのままポートフォリオとして利用可能

教材としてのクオリティも素晴らしいんですが、表示確認の添削がついてこの金額はちょっと普通じゃないですw

ポートフォリオとしての利用もOKなので、今後営業をしていく時にも無駄になりません。

あとは格安とはいえ有料カンプなので、他の人のポートフォリオと被りにくいのも大きなメリットですね。

ちなみに、ここまでご紹介したしょーごさんのカンプなどは、上級のWordPress編を含めてまとめ買いが可能です。

ここまで進んだ方なら遅かれ早かれWordPressまでやると思いますので、まとめ買いしておいた方がお得かと思います。

しめじのアイコン画像しめじ

ここまで進めた方は、間違いなく実務レベルのサイトを作るスキルを身につけています!あともう一息ですよ!

模擬案件を一度体験してみる

ここまでの学習で、すでに実務レベルのサイトをググりながら作れるようになっているはずです。

ただ、ここで問題になるのが、サイトを作れると実務で求められる仕事のレベルは違うということ。

実際、「これで大丈夫かな…」「自信がない…」と不安に思っていませんか?

そんな方におすすめしたいのが、メンター経験も豊富なコーダーひろきさんの以下のサービス。

Web制作のスキルと知識と自信を身につけるサービス

一言で言えば、制作会社の実務を擬似体験しながら、実務レベルで求められる知識やスキルを学べるサービスです。

納品までに必要なスキル感や注意点などを実践形式で学べる上、コードレビュー含めたフィードバックをしてもらえます。

その上コミュニティは無期限で、わからない技術面の相談も可能。

「不安に思いながら仕事するよりも自信を持って働きたい!」という方は、このタイミングで受講しておきましょう。

→ CodeUpsの詳細を見る

しめじのアイコン画像しめじ

個人的にもイチオシのサービスです!自信を持つためにも、何がより実務に即したコーディングなのかを学びましょう。

6. WordPressを使ったサイト制作の学習をする

目安期間:1ヶ月前後

※準備中です。大まかな学習方法は以下のツイートの通りなので、ツイートを参考に進めてみてください。

本か動画どちらかを1周した後、しょーごさんの演習教材をやってみるのが基本的な流れになりますね。(どちらかと言えば、たにぐちまことさんのUdemy教材の方が説明が分かりやすいのでおすすめです)

まとめ

ここまで本当にお疲れ様でした。

正直読むだけでも大変なレベルですが、実際に学習を進めた方は本当に大変だったかと思います。

ただ、ここまでこなした方は自信を持ってください。間違いなく実務レベルに近いコーディングスキルが身についています。

  • HTML
  • CSS
  • Sass
  • jQuery
  • WordPress
  • 効率的な学習能力
  • カンプからのサイト制作力
  • 実務レベルのサイト制作力
  • 分からないことを解決するググり力

これらのスキルを駆使すれば、案件をこなすことも難しくはありません。

一般的なWordPress案件やページ作成の案件は既にこなせるはずなので、自信を持って応募していきましょう。

営業の方法やポイントを知りたい時は、以下の記事を参考にしてみてください。必ずあなたの助けになると思います。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

おすすめ記事

目次
閉じる