Webデザインを仕事にするなら、HTML/CSSは避けて通れません。「プログラミングっぽくて難しそう…」って思うかもしれないけど、実はプログラミング言語の中では一番とっつきやすいんですよ。
HTML/CSSとは？超ざっくり解説
HTMLは「Webページの構造」を作る言語。見出し、段落、画像、リンクなどの要素を記述します。CSSは「見た目のデザイン」を担当する言語。色、サイズ、配置などを指定します。この2つはセットで使うもので、Webサイトの骨格と服装みたいな関係です。
独学の具体的なステップ
Step1：Progateで基礎文法を学ぶ（1〜2週間）
ブラウザ上で実際にコードを書きながら学べるProgateは、完全初心者のスタート地点として最適。HTML&CSSコースの初級〜上級を一通りやれば、基本的なタグやプロパティは理解できます。無料の範囲でもかなり学べますよ。
Step2：ドットインストールで深掘り（1〜2週間）
3分動画で学べるドットインストール。ProgateよりちょっとだけレベルUPした内容で、実際にテキストエディタを使ってコードを書く練習ができます。「詳解HTML基礎文法編」「詳解CSS基礎文法編」がおすすめ。
Step3：模写コーディング（1〜2ヶ月）
ここからが本番。実在するWebサイトを見て、同じものをHTML/CSSで再現する練習です。最初はシンプルなサイトから始めて、徐々に複雑なものに挑戦しましょう。最低5サイトは模写するのが目安。
Step4：レスポンシブ対応を学ぶ（2〜3週間）
メディアクエリを使ったレスポンシブデザインの実装方法を学びます。今のWebサイトはスマホからのアクセスが半分以上なので、これは必須スキル。模写コーディングの延長で、PC版→スマホ版の切り替えを実装してみましょう。
つまずきやすいポイントと対処法
レイアウトが崩れる
CSSのFlexboxとGridを使いこなせるようになると、レイアウトの悩みの8割は解決します。まずはFlexboxから学ぶのがおすすめ。Flexbox Froggyというゲームで楽しく学べますよ。
思い通りの位置に配置できない
CSSのpositionプロパティを理解しましょう。static、relative、absolute、fixedの違いがわかれば、大抵の配置は実現できます。
[AD]
おすすめの開発環境
テキストエディタはVisual Studio Code（VS Code）一択。無料で高機能、拡張機能も豊富。Live Serverという拡張機能を入れると、コードを保存するたびにブラウザが自動リロードされて効率的です。
参考：MDN Web Docs
まとめ
HTML/CSSの独学は、Progate→ドットインストール→模写コーディング→レスポンシブの4ステップ。2〜3ヶ月あれば実務レベルの基礎が身につきます。大事なのはとにかく手を動かすこと。エラーに悩むのも立派な学習ですよ。
