WebデザイナーがHTML/CSSで実務対応できるレベルは、デザインカンプをコードに落とし込めることと、既存コードを読んで修正箇所を特定できることの2点です。Flexbox・Grid・メディアクエリを使ったレスポンシブ対応まで書けると、フリーランスとして受注できる案件の幅が広がります。この記事では、職種・案件タイプ別に「どこまで習得すれば実務で通用するか」を具体的に整理します。
▶ 3日で初案件PR
この記事でわかること
HTMLとCSSで実務対応できる3段階の習得ラインと優先順位がわかります。Flexbox・Grid・メディアクエリを使ってレスポンシブ対応まで実装できる状態になれます。自分の現在地を4問で診断し、今週中に手を動かせる具体的な次の一歩が決まります。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
フリーランスのWebデザイナーにとって、HTML/CSSで「最低限必要なライン」はデザインカンプを見てレイアウトをコードに落とし込めることと、既存コードを修正できることの2段階です。Flexbox・Grid・メディアクエリでレスポンシブ対応まで実装できれば、バナー修正から静的サイト制作まで一人で完結できるようになります。JavaScriptはすぐに習得しなくても受注できる案件は存在しますが、WordPressカスタマイズや動的な表現が求められる案件では必要になる場面が増えます。
最初に確認すること
今の自分がHTML/CSSをどのレベルで使えるか確認してください。「コードを1から書けるか」ではなく、「デザインを見てどのプロパティで再現するか見当がつくか」を基準に判断します。見当がつかない状態であれば、ボックスモデル・Flexbox・メディアクエリの3項目を優先して習得すると実務への距離が縮まります（確認の目安: 5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| HTML/CSSをゼロから学ぶ段階 | WebデザイナーのHTML/CSSは3段階で理解する | 5分 |
| レイアウト実装に迷いがある | フリーランス実務で必要なCSS知識は5項目 | 5分 |
| 自分の習得レベルを判断したい | 習得レベルは4問で診断できる | 3分 |
| WordPress案件や求人票の読み方を知りたい | 案件タイプ別のHTML/CSS要件は3パターン | 4分 |
| JavaScriptをいつ学ぶか決めたい | JavaScriptは案件要件で判断する | 3分 |
WebデザイナーのHTML/CSSは3段階で理解する
HTML/CSSの習得について「どこまで必要か」と考える人は多くいます。答えは1つではなく、受注する案件の性質によって必要なレベルが変わります。まずこの「段階の違い」を整理することが、学習の優先順位を決める起点になります。
段階1: HTMLは構造を理解して書ける状態
HTMLの役割は、Webページの「骨格」を作ることです。見出し（h1〜h6）・段落（p）・リンク（a）・画像（img）・フォーム（form, input）の基本要素を、意味を理解して使える状態が実務の最低ラインです（Webデザイナーの仕事内容説明）。
ここで特に重要なのが「セマンティック要素の使い分け」です。header・nav・article・sectionなどのタグには意味が込められており、検索エンジンがページ構造を読み取る手がかりになります（Webデザイナーに必要な技術レベルの整理）。divだけで構成したページとセマンティックなページでは、同じ見た目でも内部の品質が異なります。HTMLはコードを「書ける」だけでなく、「なぜこのタグを使うか」を説明できる状態まで理解することが実務では求められます。
実際には、セマンティックHTMLを意識せずにdivのみで組まれたコードを修正する場面が現場では珍しくありません。そのような既存コードを読んで「どこが問題か」を指摘できることも、HTMLの理解として現場では価値があります。なお、フリーランスのWebデザイナーの仕事内容や独立に必要なステップでは、Webデザイン案件における実務スキルの全体像も解説しています。
段階2: CSSは見た目の制御を自分で行える状態
CSSの役割は、HTMLで作った骨格に色・余白・文字サイズ・配置を付けることです。色（color, background-color）・余白（margin, padding）・文字サイズ（font-size）・フォント（font-family）の基本調整が自分で行えることが、CSSの第一段階です（Webデザイナー・HTMLコーダーの仕事内容整理）。
「調整できる」の意味が重要です。Figmaで作ったデザインカンプを見て、「この余白はmarginで出す」「この文字の大きさはfont-size: 16pxで再現できる」という判断が自分でできることを指します。ツールで自動生成されたCSSを貼り付けるだけでは、修正が必要なときに対応できなくなります。
段階3: レイアウトをコードで組める状態
デザインカンプを渡されて「このレイアウトをどうコードで実現するか」を自分で考えられる状態が、フリーランス実務での標準ラインです。Flexbox・Gridを使った2次元レイアウト、メディアクエリを使ったレスポンシブ対応がここに含まれます（実務でのHTML/CSSの必要レベル）。
細かい記法より、要素をどういう規則で配置するかという考え方が実務では核心になります。Flexboxのプロパティを全部暗記するより、「横並びにしたいときはFlexboxを使う」という判断軸を持てるかどうかが、実務で使えるかどうかを決めます。
CHECK
▶ 今すぐやること: 手元のデザインカンプまたはWebサイトを1つ選び、「このレイアウトはどのCSSプロパティで実現しているか」を5分間分析してください（5分）
Q: HTMLはすべてのタグを暗記する必要がありますか？
A： 暗記は必要ありません。よく使うタグ（h1〜h6, p, a, img, div, section, header, nav, footer, form, input）を意味と一緒に理解し、必要に応じて調べながら書ける状態が実務の標準です。
Q： CSSのプロパティは全部覚える必要がありますか？
A： 全プロパティの暗記は必要ありません。color・margin・padding・font-size・display・position・width・heightなど頻出プロパティは手が覚える状態を目指し、それ以外は調べながら対応できれば十分です。
フリーランス実務で必要なCSS知識は5項目
HTMLの構造理解ができた後、CSSをどの順番で習得するか迷う人は多くいます。レスポンシブ対応や動的な装飾まで含めると範囲が広いため、「まずどれから習得するか」の優先順位を決めることが学習効率に直結します。
優先項目1: ボックスモデルで余白を自在に操る
ボックスモデルはCSSレイアウトの基礎概念です。すべての要素はcontent・padding・border・marginの4層構造で成り立っており、この理解なしにはレイアウトがずれたときの原因を特定できません（HTML/CSSの具体的な知識レベルの整理）。
「デザインカンプ通りに組んだのに余白が合わない」という場面は、フリーランスの実務でも繰り返し起きます。このとき原因がpaddingなのかmarginなのかborderなのかを切り分けられるかどうかで、修正にかかる時間が変わります。ボックスモデルを「説明できるレベル」で理解していると、こうした場面での判断速度が上がります。
優先項目2: Flexboxで横並びレイアウトを組む
Flexboxは1次元（横方向または縦方向）のレイアウトを組むための仕組みです。ナビゲーションメニューの横並び、カードの並列表示、フッターの2列構成など、Webサイトで繰り返し登場するレイアウトパターンのほとんどにFlexboxが使われています（実務でのHTML/CSSの必要レベル）。
display: flex・justify-content・align-itemsの3プロパティを実際に使って組んでみることが習得の近道です。Flexboxはブラウザで確認しながら調整する作業で感覚をつかむほうが、テキストを読んで覚えるより実務での定着が早くなります。
優先項目3: Gridで2次元レイアウトを組む
Gridは縦横の2次元レイアウトを組むための仕組みです。3カラムのギャラリーレイアウト、ヘッダー・メイン・サイドバー・フッターを1つのグリッドで管理するような構成に使われます（HTML/CSSの具体的な知識レベルの整理）。
Flexboxを先に習得してからGridに進む順序が、実務では理解しやすいです。Flexboxが「1列の中の並び方を決める」ものに対し、Gridは「ページ全体の骨格を決める」という使い分けを意識すると混乱が少なくなります。
優先項目4: メディアクエリでレスポンシブ対応を実装する
メディアクエリはブラウザの幅に応じてCSSを切り替える仕組みです。スマートフォン・タブレット・PC別にレイアウトを変えるレスポンシブデザインの実装に使います（HTML/CSS/JavaScriptの学習ガイド）。
スマートフォンからのWebアクセスが主流となっている現在、レスポンシブ対応を省いたサイト納品は実務ではほぼ成立しません。ブレイクポイント（768px, 1024pxなど）の設定とFlexbox・Gridと組み合わせたレイアウトの切り替えができると、静的サイト案件を一人で完結させられます。
優先項目5: positionと疑似要素で表現の幅を広げる
positionプロパティ（static・relative・absolute・fixed・sticky）は、要素を重ねたり固定したりするための仕組みです。ファーストビューのテキストオーバーレイ、ヘッダーの固定表示などでよく使います。疑似要素（::before・::after）はCSSだけで装飾を加える方法で、見出しの左線・ホバー時のアンダーラインなどに活用されます（HTML/CSSの具体的な知識レベルの整理）。
これら2つはHTMLのコードを変えずにCSSだけで見た目を調整できる点が実務では便利です。ただしpositionのabsoluteは親要素のpositionがrelativeでないと期待通りに動かないという落とし穴があり、「確認したら全体がずれていた」というミスは経験の浅いうちに限らず起きます。このずれが発生したときに原因を特定できる理解を持っておくことが、実務での対応速度を上げます。
Q: transitionとanimationはすぐに習得すべきですか？
A： 上記5項目より優先度は下です。ホバー時の色変化（transition）や簡単な動き（animation）はページの完成度を上げますが、まず静的なレイアウトを正確に組める状態を先に作ってください。
Q： FlexboxとGridはどちらを先に学ぶべきですか？
A： Flexboxを先に習得してください。Flexboxは1方向の並びに使い、ナビゲーションや横並びカードなど実務での登場頻度が高いです。Gridはページ全体の骨格設計に使うため、Flexboxで1次元の感覚をつかんでから進む方が理解しやすくなります。
習得レベルは4問で診断できる
「自分はどの段階にいるか」を判断できないと、学習の優先順位が決まりません。以下の4問で現在地を確認してください（所要時間: 3分）。
Q1: デザインカンプを見て、どのHTMLタグで構造を作るか見当がつきますか？
Yesの場合はQ2へ進みます。Noの場合はHTMLの基本構造（見出し・段落・リンク・画像・セマンティック要素）の習得を優先します。
Q2: ボックスモデル（margin・padding・border・content）を説明できますか？
Yesの場合はQ3へ進みます。Noの場合はCSSの余白・配置の基礎からおさえてください。Flexboxの前に必要な知識です。
Q3: Flexboxを使って横並びのナビゲーションメニューを自力で組めますか？
Yesの場合はQ4へ進みます。Noの場合はFlexboxを優先して習得してください。display: flex・justify-content・align-itemsの3プロパティを実際に手を動かして覚えることが近道です。
Q4: メディアクエリでスマートフォン表示とPC表示を切り替えられますか？
Yesの場合は結果Aです。Noの場合は結果Bです。
結果A: 実務対応ラインに到達しています
Flexbox・Grid・レスポンシブ対応の基礎が揃っている状態です。次のステップとして、positionや疑似要素での表現追加、またはWordPressの軽微なカスタマイズ対応を加えると受注できる案件の範囲が広がります。
結果B: レスポンシブ対応の習得を次の優先課題にしてください
HTMLとCSSの基礎は揃っていますが、スマートフォン対応の実装が実務では必須です。メディアクエリ（@media）の書き方とFlexboxとの組み合わせ方を実際に手を動かして練習してください。
CHECK
▶ 今すぐやること: Q4まで到達しなかった項目を1つ特定し、今週中に練習用HTMLファイルを作成して動作確認してください（初回作業: 30分）
Q: 診断でA判定が出たらすぐに受注活動を始めても問題ありませんか？
A： 受注活動を始めること自体は問題ありません。ただし案件受注後に「要件を満たせなかった」という状況を避けるために、まず小規模な案件（静的サイト1〜3ページ程度）から実績を積む方が実務の感覚をつかみやすくなります。
A： どちらでも習得できますが、フリーランスとして実務対応レベルを目指すなら、「デザインカンプを渡されてコーディングする」実習形式の練習が独学・スクール問わず必要です。知識を覚えるより、実際に組む経験を積む機会があるかが判断の軸になります。
案件タイプ別のHTML/CSS要件は3パターン
フリーランスとして受注する案件によって、求められるHTML/CSSのレベルは変わります。どの案件タイプを狙うかで、今習得すべきスキルの優先順位も変わります。
パターン1: 静的サイト・LP制作（HTML/CSS中心）
バナー制作・LPデザインから静的HTMLサイト制作まで、HTML・CSSが実装の中心になる案件タイプです。Flexbox・Grid・メディアクエリによるレスポンシブ対応が標準的に求められます（最低限必要なHTML/CSS理解の整理）。
JavaScriptの知識は「あると対応できる幅が広がる」程度で、必須とはされないケースが多いです（採用時に必要な技術の整理）。フリーランス初期の受注で最も現実的な入り口であり、HTML/CSSの3段階（構造・制御・レイアウト）をすべてクリアしていれば対応できる案件が存在します。フリーランスの開業資金や初期費用の目安を把握した上で、スキル習得と並行して受注準備を進めるのが現実的な流れです。
ただし「デザインカンプ通りに1pxも崩れないコーディング」を求めるクライアントもいれば、「大まかなレイアウトが合っていればよい」クライアントもおり、要件の粒度はクライアントによって異なります。受注前に成果物のクオリティ基準を確認することが、後のやり直しを防ぐ上で重要です。
パターン2: WordPress案件（テーマカスタマイズ）
既存WordPressテーマのカスタマイズや子テーマ作成が中心の案件タイプです。HTML/CSSの基礎に加え、PHPの読み書きができると対応範囲が広がりますが、軽微なカスタマイズ（CSSでデザインを変更するレベル）であればHTML/CSS知識で対応できる場面もあります（Webデザイナーになるロードマップ）。
WordPressのカスタマイズはHTMLのどこがWordPressのテンプレートと紐づいているかを理解する必要があります。PHPの基礎（変数・条件分岐・ループ）を軽く読める程度まで理解しておくと、テンプレートの構造を把握しやすくなります。
パターン3: 制作会社・チーム案件（コーダーとの分業）
制作会社やデザイン事務所と組む案件では、デザイナーがFigmaでデザインを作り、コーダーがHTML/CSSを実装する分業体制が多く取られています（Webデザイナー・HTMLコーダーの仕事内容整理）。
この体制でデザイナーとして参画する場合、HTML/CSSを自分で書けなくても「修正指示が的確に出せるか」「コーダーの質問に回答できるか」が重要になります。「このmarginを20pxに変えてください」という指示が正確に出せるかどうかが、コーダーとのやり取りの品質に直接影響します。コーダーとの協業を前提とする場合でも、HTML/CSSの基礎理解は持っておく価値があります。
Q: フリーランスとして案件を受注するなら、どのパターンから始めるのが現実的ですか？
A： 静的サイト・LP制作（パターン1）が、HTML/CSSの実務対応ラインを達成した段階で最も受注しやすい入り口です。まず1〜3ページ規模の案件実績を作り、その後WordPress案件や制作会社との協業へ展開していく流れが実務上現実的です。
Q： Figmaでデザインを作れれば、HTML/CSSは後回しにしてよいですか？
A： デザインを作ってコーダーに渡す受注スタイルであれば、HTML/CSSの優先度は下がります。ただし「修正対応・確認対応・クライアントへの説明」のすべてを外部コーダーに依存する体制は、コミュニケーションコストが高くなります。基礎理解だけでも持っておくと、コーダーとのやり取りがスムーズになります。
PR提供: 日本デザインスクール（デザスク）
JavaScriptは案件要件で判断する
「HTML/CSSの次にJavaScriptを学ぶべきか」という迷いは、フリーランスを目指す学習者に共通しています。すべての案件でJavaScriptが必須になるわけではありませんが、受注できる案件の幅と評価に影響します。
JavaScriptが必要になる典型的な場面
スライダーやモーダルウィンドウなどのインタラクション実装、フォームのバリデーション処理、スクロールに連動したアニメーションなどは、JavaScriptなしでは対応が難しい場面です（必要スキルの広範な整理）。
求人票では「HTML/CSS必須・JavaScript歓迎」と記載されることが多く、JavaScriptは「あると採用・受注の可能性が広がるスキル」として扱われます（採用時に必要な技術の整理）。「必須」と「歓迎」の違いを見分けることが、求人票や案件要件を読む上での基準になります。
JavaScriptよりHTML/CSSを優先すべき理由
HTML/CSSの3段階（構造・制御・レイアウト）が固まっていない段階でJavaScriptに進むと、2つの学習が中途半端になります。「JavaScriptで動きを付けたいが、そもそもレイアウトが崩れている」という状態は、学習コストが2倍になる典型的なパターンです。
HTML/CSSの基礎を確実に押さえてから次のステップに進む方が実務での定着は早くなります（Yahoo!知恵袋）。プログラミング学習ロードマップでも、HTML→CSS→JavaScriptの順序で学ぶことが推奨されており、各言語を段階的に固めていく方法が最短ルートとされています。
JavaScriptへの移行タイミングの目安
Flexbox・Grid・メディアクエリを使って、デザインカンプから静的サイトを1から組める状態になった段階が、JavaScriptの学習を始める現実的なタイミングです。静的サイト案件で実績を1〜2件積んでから、JavaScriptの基礎（DOM操作・イベント処理）へ進む順番が、実務との接続がしやすいです。
Q: ReactやVueなどのフレームワークは必要ですか？
A： WebデザイナーとしてHTML/CSS中心の案件を受注する段階では、ReactやVueの習得は優先度が低いです。フロントエンドエンジニアとの境界線に近い領域であり、デザイナーとして受注範囲を広げることを目的とするなら、JavaScriptの基礎・DOM操作・jQueryの読み書きが先に必要になります。
Q： CSSアニメーションとJavaScriptアニメーションの違いは何ですか？
A： CSSアニメーション（transitionやanimation）はブラウザが直接処理するため動作が軽く、単純な動きに向いています。JavaScriptアニメーションはスクロール位置・ユーザー操作・時間経過に応じた複雑な制御に使います。まずCSSアニメーションで対応できる範囲を把握し、それで実現できない動きが必要な案件でJavaScriptまたはJavaScriptライブラリの使用を検討する順番が現実的です。
フリーランス実務で使えるHTML/CSS習得の5つの進め方
HTML/CSSの習得は「知識を覚えること」より「手を動かして組む回数」が実務への定着を決めます。ここでは実務に接続しやすい5つの習得方法を整理します。
ハック1: デザインカンプを模写して3段階の定着を測る
【対象】: Flexboxまで学んだが実務レベルに届いているか不安なフリーランス志望者
【手順】: まずWebサイト（自分がよく使う3〜5ページ規模のサイト）を1つ選び、HTMLの構造を紙に書き出します（所要時間: 20分）。次にそのトップページをデザインカンプとして、CSSを書かずにHTMLのみで構造を再現します（所要時間: 30〜60分）。HTML構造が完成したらCSSを書き始め、Flexbox・Grid・メディアクエリを使ってレイアウトを再現し、スマートフォン表示とPC表示の両方で崩れがないか確認します（所要時間: 2〜4時間）。
【コツと理由】: 実務では「デザインを渡されてコードに落とし込む」作業が繰り返し求められます。模写では「デザインを見てHTMLタグを選ぶ→CSSプロパティで再現する→崩れたら原因を特定する」という実務の思考回路が鍛えられます。コードを覚えるだけでは、実際にデザインカンプを渡されたときに手が止まります。
【注意点】: 模写では完璧にコピーする必要はありません。「全体レイアウトの再現」と「各セクションの余白・文字サイズの再現」の2段階に分けて取り組むと、詰まったときに「どの段階で止まっているか」が特定しやすくなります。完璧を目指して1つのサイトに1週間以上かけるより、複数のサイトを粗削りで速く模写する方が定着は早くなります。また有名企業サイトはCSSが複雑すぎて途中で詰まるケースがあります。最初は構造がシンプルなサイトを選んでください。
ハック2: 既存コードを読んで修正箇所を特定する練習をする
【対象】: コードをゼロから書くことへのこだわりが強く、修正・改変の練習をしていないフリーランス志望者
【手順】: まずテンプレートサイト（Bootstrap使用または無料HTMLテンプレート）を1つダウンロードします（所要時間: 10分）。次にブラウザのデベロッパーツールで要素を選択し、どのCSSが当たっているかを確認する習慣をつけます（所要時間: 初回30分）。「この色を変えたい」「このmarginを広げたい」という修正要件を自分で設定し、既存コードの該当箇所を特定して書き換えます（所要時間: 修正1箇所あたり5〜15分）。
【コツと理由】: 実際の案件では既存サイトのカスタマイズや修正対応が初期案件として多く発生します。デベロッパーツールでCSSを特定し、修正箇所を見つける練習は、ゼロからの実装練習と同じくらい実務で必要です。この練習をしておくと修正案件の受注ハードルが下がります。
【注意点】: デベロッパーツールでの編集はブラウザ上の一時的な変更であり、ページを再読み込みすると元に戻ります。「変更したら消えた」という場面はよく起きますが、実際のファイルは変更されていません。修正を確定させるには、実際のCSSファイルを書き換えてください。デベロッパーツールはあくまで確認ツールとして使い、実際の変更はファイルを直接編集します。
ハック3: Flexboxの3プロパティを繰り返し使って手に覚えさせる
【対象】: Flexboxの概念は理解したが、使うたびにプロパティを調べている段階のフリーランス志望者
【手順】: まずdisplay: flex・justify-content・align-itemsの3プロパティだけを使い、横並びのナビゲーションメニューを5パターン作ります（所要時間: 45〜60分）。次にflex-wrap・gap・flex-directionを加え、カードの横並びでレスポンシブ対応（画面幅が狭くなったら縦並び）を実装します（所要時間: 60〜90分）。完成したコードを3日後に見返し、プロパティ名を確認せずに同じレイアウトを書けるか試します（所要時間: 30分）。
【コツと理由】: 実務で繰り返し使うのはdisplay: flex・justify-content・align-items・flex-wrap・gapの5プロパティが中心です。全プロパティを均等に覚えようとすると、よく使うものと使わないものが混ざって混乱します。使用頻度の高い5プロパティを「プロパティ名を見ずに使える」状態まで繰り返す方が、実務での作業時間が短くなります。
【注意点】: Flexboxは親要素と子要素どちらに書くかで挙動が変わります。justify-contentやalign-itemsは「親要素に書く」というルールを最初に覚えないと、「書いたのに効かない」という場面が続きます。order・flex-shrink・flex-growは特定のレイアウト課題が出てから調べる方が理解しやすくなります。最初から全部覚えようとしないことが定着の近道です。
ハック4: セマンティックHTMLをSEOの観点で理解する
【対象】: HTMLタグの使い分けがdivとspan中心になっており、セマンティック要素の意味が分からないフリーランス志望者
【手順】: まず自分が模写または作成した静的サイトのHTMLを開き、divとspanだけで書かれている箇所を洗い出します（所要時間: 20分）。次にそれぞれの箇所が「ページのどの役割を担っているか」（ナビゲーション・本文の見出し・補足説明・フッター等）を判断し、対応するセマンティック要素（nav・h2・p・aside・footer等）に書き換えます（所要時間: 30〜60分）。書き換え前後でブラウザの表示に変化がないことを確認し、ソースコードの構造が読みやすくなったかを確認します（所要時間: 10分）。
【コツと理由】: divのみで組んでも見た目は同じになるため、「どのタグを使っても同じ」と考えがちですが、検索エンジンはHTMLの構造からページの内容を読み取ります。セマンティック要素を正しく使うと、検索エンジンが「このサイトのナビゲーションはここ・本文はここ」と判断しやすくなり、SEOの観点での品質が上がります（Webデザイナーに必要な技術スキルの整理）。クライアントに「SEOを意識したコーディングができます」と説明できる点も実務での強みになります。
【注意点】: セマンティック要素に切り替えたことでCSSが崩れる場合があります。divに当てていたCSSスタイルがheaderやnavに引き継がれないケースがあるため、書き換えのたびにブラウザで確認してください。すべてのHTMLをセマンティック要素に完全置換しようとするより、まず「ナビゲーション・ヘッダー・フッター・メインコンテンツ」の4箇所から始めると変更範囲が管理しやすくなります。
ハック5: メディアクエリのブレイクポイントを1つに絞って最初の1本を完成させる
【対象】: レスポンシブ対応を「いずれやらなければ」と思いながら後回しにしているフリーランス志望者
【手順】: まず768px（スマートフォン・タブレットの境界）の1点だけをブレイクポイントに設定し、PC用レイアウトとスマートフォン用レイアウトを2段階で切り替えるコードを書きます（所要時間: 60〜90分）。次にブラウザのデベロッパーツールでデバイスシミュレーションを開き（Ctrl+Shift+Mまたは⌘+Shift+M）、iPhone・Androidの画面幅で表示を確認します（所要時間: 15分）。崩れた箇所を1箇所ずつ特定し、メディアクエリ内にCSSを追記して修正します（所要時間: 30〜60分）。
【コツと理由】: レスポンシブ対応の入門では「モバイルファーストで書く」という方法がよく推奨されますが、実務では「クライアントからPCデザインとスマートフォンデザインの両方が渡される」ケースが多く、PC→スマートフォンの順で対応する方が実務の流れに合っている場合もあります。どちらの方向でも1本完成させた経験があれば、案件の要件に応じて使い分けられます。ブレイクポイントを768pxの1点に絞ることで、最初の1本を「何が起きているか追える状態」で完成させられます。
【注意点】: ブレイクポイントの設定を増やすほど管理が複雑になります。最初から320px・480px・768px・1024px・1280pxと5点設定しようとすると、どの条件がどのデバイスに当たっているか分からなくなります。最初の1本は768pxの1点だけで完成させてください。その後案件要件に応じてブレイクポイントを追加する方が、管理しやすい状態を保てます。
HTML/CSS習得でよくある詰まりポイントと対処法
| 詰まりポイント | 原因 | 対処法 |
| レイアウトがずれる | ボックスモデルの理解不足 | デベロッパーツールでmargin/padding/borderを可視化する |
| Flexboxが効かない | 親要素に書いていない | justify-content・align-itemsは親要素に記述する |
| レスポンシブが崩れる | ブレイクポイントの競合 | ブレイクポイントを768pxの1点に絞って動作確認する |
| セマンティック変更後にCSSが崩れる | タグ変更でスタイルが引き継がれない | 書き換えのたびにブラウザで確認する |
| 模写で途中から分からなくなる | 複雑なサイトを選んだ | 3〜5ページ規模のシンプルなサイトから始める |
WebデザイナーのHTML/CSSを固める：今週の5ステップ
HTML/CSSの習得ゴールは「全プロパティの暗記」ではなく、「デザインを見てどのコードで実現するかを判断できること」と「既存コードを修正できること」です。Flexbox・Grid・メディアクエリでレスポンシブ対応まで実装できる状態が、フリーランスとして静的サイト案件を一人で完結させられるラインです。JavaScriptはHTML/CSSの3段階（構造・制御・レイアウト）が固まった後に、案件要件に応じて習得する順番が実務への定着がしやすくなります。
学習のゴールが「覚えること」ではなく「判断できること」であると意識すると、次に何を練習するかが自然に見えてきます。デザインカンプ模写・既存コードの修正・Flexboxの繰り返し練習の3つから、今の自分のレベルに合う1つを選んで今週中に手を動かしてください。また、ポートフォリオサイト作り方の記事では、習得したHTML/CSSスキルをポートフォリオとして形にする方法を解説しています。
| 状況 | 次の一歩 | 所要時間 |
| HTMLの構造がまだ曖昧 | 見出し・段落・リンク・セマンティック要素を使ったHTMLを1から書く | 1〜2時間 |
| ボックスモデルが不安 | marginとpaddingの違いをデベロッパーツールで確認しながら余白を調整する | 30〜60分 |
| Flexboxを使うたびに調べている | ナビゲーションメニューの横並びを5パターン作る | 45〜60分 |
| レスポンシブ対応が未経験 | 768pxのブレイクポイント1点でPC/スマートフォン切り替えを1本完成させる | 2〜3時間 |
| 案件受注の準備を始めたい | 静的サイト1〜3ページを模写して実績として整理する | 3〜5時間 |
WebデザイナーのHTML/CSSに関するよくある質問
Q: WebデザイナーはHTML/CSSを書けない状態でも仕事になりますか？
A： デザインのみを担当する業務委託や、コーダーと組む制作体制であれば、HTML/CSSを自分で書けなくても仕事は成立します。ただし修正指示・確認対応・クライアント説明の場面でHTMLとCSSの基礎知識は必要になります。コードを書く必要はなくても、読んで意味がわかる状態は最低限持っておくと、コーダーとのやり取りがスムーズになります。
Q： フリーランス案件で「HTML/CSS必須」と書かれている場合、どのレベルが求められますか？
A： Flexbox・Grid・メディアクエリを使ったレスポンシブ対応が自分で実装できることと、既存コードを読んで修正できることが一般的に求められる水準です（最低限必要なスキルの整理）。案件詳細で「デザインカンプからのコーディング」と記載されている場合は、デザインを見てHTMLとCSSに落とし込む作業が全工程含まれると想定してください。
Q： CSS設計（BEMやFLOCSSなど）は覚える必要がありますか？
A： フリーランス初期の段階では必須ではありません。1〜3ページ規模の静的サイト案件であれば、CSS設計を知らなくても対応できます。ただしコードの規模が大きくなると、クラス名の命名規則がないコードは修正が複雑になります。BEMの基礎（Block・Element・Modifierの区別）を知っておくと、自分のコードを整理しやすくなります。
Q： フリーランスとして案件を継続受注するにはどうすればよいですか？
A： 案件受注後の継続は、納品物の品質・コミュニケーションの速さ・修正対応の的確さで決まります。フリーランスが案件を獲得する方法では、クラウドソーシングやエージェントを活用した継続受注の仕組みづくりについて解説しています。