「Web制作を学ぼう」と決めた直後がいちばん迷います。HTML、CSS、JavaScript、Sass、React、WordPress、Figma——名前だけは目に入ってくるのに、どれが今の自分に必要なのか分からない。結論から言うと、最初の3か月で触るべきものは3つだけです。

最初に触るのは3つだけ

  • HTML … ページの中身と構造を書く。文章に「これは見出し」と名札を付ける役
  • CSS … 見た目を指定する。色・大きさ・並べ方を決める役
  • JavaScript … 動きを付ける。押したら開く、送信前に確かめる、といった役

この3つは、順番に積み上がっています。HTMLで骨組みを作り、CSSで見た目を整え、必要なところにだけJavaScriptで動きを足す。だから学ぶ順番も、基本的にはこの通りです。

最初の3か月でやること

1か月目：HTMLとCSSで「1ページ」を作りきる

凝ったものでなくて構いません。自己紹介ページで十分です。大事なのは、途中でやめずに1枚完成させること。見出し・段落・リンク・画像・リストが入っていれば、実務で使うタグの大半に触れたことになります。

2か月目：レイアウトとスマホ対応

横並びにする、余白を整える、スマホでも崩れないようにする。ここが最初の山場ですが、Flexboxとメディアクエリという2つの道具でほとんど解決します。この段階で「なぜか崩れる」に何度もぶつかりますが、それは全員が通る道です。

3か月目：JavaScriptの入り口

いきなり文法を全部覚えようとしないこと。「ボタンを押したらメニューが開く」を自分で書けるようになれば、最初の一歩としては十分です。

今はやらなくていいこと

情報が多いぶん、初期に手を出して迷子になりやすいものもあります。次のものは、上の3か月を終えてからで間に合います。

  • React・Vue などのフレームワーク（HTMLとCSSが body の中で何をしているか分かってからで十分）
  • Sass などのCSS拡張（素のCSSで困ってから使うと、ありがたみが分かります）
  • サーバーやデータベースの知識（作ったページを公開する段になってからで大丈夫）
  • ショートカットキーや環境の作り込み（覚えるより、まず1ページ作るほうが早く上達します）

つまずいたときの考え方

学び始めの詰まりは、たいてい「文法が難しい」ではなく「どこが間違っているか分からない」です。書いたコードがそのまま動かないとき、原因を切り分ける手順さえ知っていれば、1時間悩んでいたものが5分で解決します。このサイトの記事は、その切り分けの手順ごと書くようにしています。

次は、HTML・CSS・JavaScriptがそれぞれ何をしている言語なのかを、実際に動かしながら確かめてみてください。3つの役割が体感で分かると、検索するときのキーワードも自然と決まるようになります。