こんばんは、Yukiです。
今回は「ProgateでHTML&CSSコースをやってるけど、どうやって勉強したらいいかわかんない…。」「道場コースで挫折してしまいました。」
そんな方向けに、自身がProgateHTML&CSSを20周した経験を元に「Progate HTML&CSS の最も効率の良い進め方」というのを紹介します。
道場コース・学習コース、初級・中級・上級に分けて丁寧に解説していきます。
【本記事の内容】
- Progate HTML&CSSコースの効率の良い進め方
- 道場コースの乗り越え方
スポンサードサーチ
初級編の進め方とポイント

最初は初めてのことだらけで難しいと思いますが、初級編の内容は基礎中の基礎なので、時間をかけていいので、何回も復習して理解するようにしましょう !
学習コースの具体的な進め方
学習コースは3周くらいを目安にしましょう!
【1周目】
スライドをしっかり読み、答えを見ながらで良いのでとりあえず時間をかけずに一周しましょう。
1周目では深く理解するよりも「HTML&CSSってこんな感じなんだー」「初級編ってこんな感じののことやるのねー」くらいのレベルで理解し全体像の把握をすることが大事です。
【2周目】
2周目では実際に出てくる内容をノートにメモしながら理解を深めましょう!
メモをした後はできるだけ答えを見ずに分からないことノートを見ながら進め、ノートを見てもどうしても分からない時だけ答えを見て進めるようにしましょう!
そうすることで理解が深まります。
【3周目】
3周目ではスライドを軽く読み、実際にコードを書いていきましょう。ここでも2周目と同様に分からなかったらノートを見る!それでも分からないときは答えを見るというやり方で進めていきましょう!
ここまで来れたら次はいよいよ道場コースです!
(この地点で初級編の内容を完璧に理解している必要はありません。余白を作るならpaddingだなーのように〇〇を作るなら〇〇が必要だ!というのがわかるレベルで大丈夫です!)
道場コースの具体的な進め方
道場コースは最低でも4、5周はした方がいいです。
よくProgateは1、2周してどんどん新しいものをやった方がいいという意見を耳にしますが、あれは基礎ができていることを前提としているので初心者の方はあまり鵜呑みにしないほうがいいと思います。
それにHTML&CSSに関しては「よく使う型」があるので初級編に関しては何回も繰り返して型を覚えたほうが良いです。
そうすると自分で何かLPやHPを作るときにスムーズに進めることができます!
では具体的な進め方にいきましょう
【1周目】
最初から答えを見ちゃいましょう!
はっきり言って道場編はいきなり難易度が上がるので初めから自力で作ろうとするのほぼ無理です。自力でやろうとしても全くできず自信なくすだけなのでまずは答えを見て全体の構造を理解するようにしましょう。
全体の構造を理解するときにやって欲しいのが<div>の構造を理解するということです!
道場編の最初の難関と言っていいでしょう。
なのでまずは下のノートのようにどの<div>にどの<div>が含まれるのかを書き出してみましょう!

こうやって簡単に構造を整理することで学習の質と効率が一気に高まります!
1周目ではすぐに答えを見て実際にどんな感じにコードを書くかの大まかな雰囲気を理解することと<div> 構造を理解するように専念しましょう。
【2周目】
2周目は1周目で<div>の構造をノートをみながら実際にコードを書き進めて行きましょう!
コードの書き方がわからない時はまず学習コースでメモしたノートを見ながら進めそれでもわからないときは答えを見て進めてください!
最初は理解できなくてもいいの、でとりあえず答えを見ながら答えのコードをコピペではなく自分で打ち込むようにしてください!
そうするとだんだん意味がわかってきます!
*答えはコピペではなく自分で打ち込むというのが大事です。
【3周目以降】
3周目以降では2周目と同じことを繰り返すだけです。
わからないところがあれば答えは見なくてもノートを見れば解決できるというレベルまで到達できればOKです!
目安としては5、6周ですがもっと早く理解できる方もいると思うので5、6周という回数にこだわる必要はないです。
初級編で重要な内容
残念ながら初級編の内容は基本的に全て重要です
しかし、今からあげる2つは中級、上級で詳しくやるので「へーこんなのあるんだ」くらいで覚えておいて、深く理解しないで先に進んで大丈夫です。
1HTMLの全体構造と<head>要素の中身
→<!DOCTYPE html>〜のところとか、<meta charser=”~”>のところです。
2ブロック要素とインライン要素
初級編の学習コースでは全体の構成などよりも個々の<p>や<h1>,paddingなどの意味や使い方を理解することが大事です。
以上が初級編の進め方と重要ポイントでした。
中級編の進め方と重要ポイント

中級編ではより実践的な内容になりますが、中級編の内容を使いこなせると結構かっこいいサイトが作れるので頑張りましょう!
学習コースの具体的な進め方 & 道場コースの具体的な進め方
これに関しては初級編の時と同じ要領で進めてください!
中級編で重要な内容
中級編では絶対に理解しておきたい重要なことが3つあります!
逆にここで紹介するもの以外は「こーゆうのあるんだ」と言った感じで「調べながらやればできる」という浅い理解で大丈夫です!
1 margin:0 auto;
→今後もよく使うことになるのでしっかり理解しましょう。
2 インラインブロックとブロックとインラインの違いと特徴
→これもしっかり理解しておかないと、レイアウトに大きく影響してくるのでしっかり理解してください。
3 position:absolute;とposition:relative;について
→これは絶対に理解しておかないといけないわけではないですが、仕組みを理解するのに少し時間がかかるので余裕のある方はこの段階で理解しておいた方がいいと思います。
スポンサードサーチ
上級編の進め方と重要ポイント

上級編は今までの初級、中級とは少し違った内容になりますがここまでしっかり理解してこれた方には楽勝だと思います!
学習コースの具体的な進め方
今までの初級、中級と同じ要領で進めればOKです。
道場コースの具体的な進め方
道場コースに関しては初級、中級と違って特に型を覚えないといけないものもないので答えを見ながら2、3周して
以下の3つの意味が理解できて調べながらやればできるというレベルの理解までいければOKです!
- メディアクエリ
- clear:left;の意味とやり方
- box-sizing:border-box;
上級編で重要な内容
上級編はやることは少ないですが先ほどもあげた3つは今後Web制作をしていく上で必須なので非常に重要です!
1 メディアクエリ
→最近はスマホ向けのレイアウトに対応することは必須なので、これは非常に大事です。
なので時間をかけてでも必ずしっかり理解するようにしましょう。
2clear:left; の意味とやり方
→これは少し理解しづらいですがfloatを使う場合これをやらないとレイアウトが崩れる原因になるので理解しましょう。
ただProgateの説明は少しわかりづらいので、最悪ここで理解できなくても、今後の技術書などをやる予定であれば、7割くらい理解できるレベルで先に進んでもいいと思います。
3 box-sizing:border-box;
→これもレイアウト崩れの原因になるのでしっかり理解するようにしましょう。
ここまでが上級編の進め方と重要なことです。
まとめ
ここで紹介しているやり方で進めることができれば、HTML&CSSはかなりしっかり理解できますし、今後LPやHPを作る際や技術書をやる際にものすごく楽できますよ!
逆にProgateを1、2周しかしないで終えてしまうと、LPやHPを作る際に何をしていいかわからない。という悲しい状態になってしまいます。
せっかくProgateという素晴らしい教材があるのでしっかりやり込みましょう!
また、上級編まで終えた方はProgate HTML&CSSのチュートリアルにある「開発環境」「検証ツール」「インターネットに公開」を読んで、今まで学んだことを生かして実際に自分でHPを作ってみましょう!
ということで今回は、Progate HTML&CSSの学習方法を詳しくまとめましたが、何か質問があればTwitterのDMにて受け付けます!
[…] >Progate HTML&CSSの最も効率の良い進め方 […]
今ちょうどつまづいているので参考になりました!
プロゲート中級編の二週目まできました。(初級は、道場も含め5週しました。)ロンドンで不動屋のウェブ(360度カメラシーターを使った)を作成したいと思い、プロゲートを始め、このブログも見つけました。大変勉強の仕方がわかりやすいです。ただ時間を見つけてプログラミング勉強とか企業の準備で大変でもあります。あと三週間ぐらいでHTMLは卒業したいです。