結論：Webサイトの作り方は「HTML（骨組み）→ CSS（見た目）→ JavaScript（動き）」の順が基本で、フレームワーク（React・Angularなど）やサーバー側の技術（Djangoなど）は、この3つを一通り触ってから「必要になったときに」足すもので十分です。 いきなり最新のフレームワーク名で検索して情報の多さに圧倒される必要はありません。
なぜこの順番なのか ― Webページは「重ね着」でできている
Webページは、次の3つのレイヤーが重なってできています。
- HTML ― ページの中身と構造（見出し・段落・画像・リンク・表）
- CSS ― 見た目（色・配置・余白・レイアウト）
- JavaScript ― 動き（クリックで何かが起きる、入力に反応する）
この順番は偶然ではなく、ブラウザがページを組み立てる順番そのものです。まずHTMLで「何を表示するか」を決め、次にCSSで「どう見せるか」を整え、最後にJavaScriptで「どう動かすか」を足します。土台がないまま動きだけ作ろうとすると、「何を動かしているのか」の対象（HTML要素）がイメージできず、コードの意味が頭に入ってきません。だからこそ、Web制作の独学は骨組み→見た目→動きの順で進めるのが遠回りしないコツです。
ステップ1：HTMLで骨組みを作る（見出し・段落・画像・リンク・表）
最初の一歩は、タグを使って文章に構造をつけることです。HTMLコース は全22レッスンすべてブラウザ上でそのまま編集・プレビューでき、インストール不要・登録不要で今すぐ試せます。
- タグと要素 ― 見出しと段落 から開始タグ・終了タグ・要素という基本の考え方を学びます。
- 表でデータを並べる で時間割や料金表のような「行と列」のデータを扱えるようになります。
- divとspan ― 汎用の箱 で、CSSで装飾するための「入れ物」の作り方を押さえます。
このあたりまで進むと、「意味のある文章の塊」としてページを組み立てられるようになります。
ステップ2：CSSで見た目を整える（色・配置・レイアウト）
骨組みができたら、次は見た目です。CSSもHTMLコースの中に含まれており、同じ22レッスンの中で地続きに学べます。
- Flexboxで横に並べる は、カードを横並びにしたりナビゲーションを整えたりする、現代のWeb制作で最も使う配置の仕組みです。
- レスポンシブの入り口 で、スマホとPCで見た目を切り替えるメディアクエリの基本に触れます。
ここまでのHTML＋CSSだけでも、「見た目が整った1枚のWebページ（静的サイト）」を自分の手で作れるようになります。ポートフォリオサイトや簡単な紹介ページであれば、この段階の知識だけで十分公開できます。
ステップ3：JavaScriptで動きをつける
静的なページに「クリックしたら表示が変わる」「入力した内容をチェックする」といった動きを足すのがJavaScriptの役割です。JavaScriptコース は全28レッスンがブラウザでそのまま実行でき、書いたコードの結果をその場で確認しながら進められます。
- console.log ― 画面に表示する が最初の一歩。
- if / else if / else ― 条件で分ける で「もし〜なら」という条件分岐を学びます。
- 配列メソッド ― map / filter / find と オブジェクト ― 名前つきの入れ物 で、データの扱い方に慣れます。
- fetch ― サーバーからデータを取ってくる まで進めば、天気予報やニュース一覧のように「外部のデータを取ってきて画面に表示する」仕組みの基本が理解できます。
HTML・CSS・JavaScriptをこの順で一通り触れば、「Webサイトを作る」ために最低限必要な3点セットが揃います。ここが、独学における最初の大きなゴールです。
その先：フレームワークとサーバー側は「必要になってから」でいい
3点セットの後によく出てくる選択肢が「TypeScript」「React」「Angular」「サーバー側（バックエンド）」ですが、これらはサイトが大きく・複雑になったときに困りごとを解決する道具であって、最初から必須ではありません。目安として次のように考えると迷いません。
- サイトの規模が大きくなり、コードの見通しが悪くなってきた → TypeScriptコース（全10レッスンがブラウザで実行可）で、変数や関数に「型」をつけてミスを減らす書き方に触れる。
- 画面の状態管理が複雑になり、同じような更新処理をあちこちに書くようになった → Reactコース（全14レッスン中13レッスンが実行可）やAngularコース（全12レッスン中11レッスンが実行可）で、コンポーネント単位でUIを組み立てる考え方を学ぶ。どちらもはじめてのレッスン・はじめてのレッスンからブラウザだけで動かせます。
- ログイン機能やデータベースが必要になり、ページを表示するだけでは足りなくなった → Djangoコース（全32レッスン中24レッスンが実行可）で、リクエストを受け取ってデータベースとやり取りし、ページを組み立てて返す「サーバー側」の考え方に触れる。最初のWebアプリとDjango ― リクエストからレスポンスまでで全体像をつかめます。
いきなりこれらから手をつけると、「HTML要素を操作している」のか「フレームワークの機能を使っている」のかの区別がつかず、混乱の原因になります。逆に3点セットが身についていれば、フレームワークの説明の大半は「見慣れたJavaScriptの延長」として読めるようになります。
つまずきやすいところ：エラーメッセージが読めない
JavaScriptを書き始めると、undefinedの中身を読もうとしてエラーになる、といった典型的なつまずきに必ず出会います。これは初心者特有のものではなく、経験者でも都度エラーメッセージを読んで直しています。慣れの問題です。
代表的なパターンはJavaScriptのエラー逆引きにまとまっており、Cannot read properties of undefined ― 無いものの中身を読んだのように、エラーメッセージの文言からそのまま該当ページを探せます。手が止まったら「自分には向いていない」と思う前に、まずエラー文をそのまま調べる癖をつけておくと独学が続けやすくなります。
次に読む
- HTMLコース ― 骨組みと見た目、全22レッスンがブラウザで実行可
- JavaScriptコース ― 動きをつける、全28レッスンがブラウザで実行可
- TypeScriptコース ― 型に慣れる、全10レッスンがブラウザで実行可
- Reactコース / Angularコース ― コンポーネント単位のUI構築
- Djangoコース ― サーバー側でデータを扱う入り口
- JavaScriptのエラー逆引き ― つまずいたときに