HTML/CSSの学習を一通り終えたのに、真っ白なエディタを前にすると手が止まる。模写コーディングに挑戦しても、途中でレイアウトが崩れて心が折れそうになる。「html css コーディングの手順って、結局どの順番が正解なの？」と検索を繰り返していませんか。
その悩み、私も未経験からWebエンジニアになる過程で全部通ってきました。原因はセンスや才能ではありません。コードを書き始める前の「手順」を知らないだけです。
この記事では、現役エンジニアの私が実務でも使っているHTML/CSSコーディング手順を7ステップで解説します。後半では模写コーディングのやり方や、つまずいたときの対処法まで紹介します。読み終わる頃には「今日から手が動く」状態になっているはずです。
Section 01HTML/CSSコーディング手順を理解する前に知っておきたい基礎知識
手順の解説に入る前に、前提となる知識を3つだけ整理します。ここが曖昧なまま進むと、後の工程で必ず迷子になります。逆に言えば、ここさえ押さえれば残りはスムーズです。
HTMLとCSSの役割の違い
HTMLは「文章の構造」を作る言語で、CSSは「見た目」を整える言語です。家づくりに例えると、HTMLが柱や壁などの骨組み、CSSが壁紙や塗装にあたります。役割がまったく違うので、同時に書こうとせず、必ず分けて考えるのがコツです。
HTML
<p class="message">こんにちは</p>CSS
.message {
color: red; /* 文字を赤にする */
}表示結果は「こんにちは」という赤い文字です。HTMLが「これは段落だ」と意味を定義し、CSSが「赤くする」と見た目を決めています。HTMLの基本があやふやな人は、先にHTMLとは？基礎知識と書き方を初心者向けに解説を読んでおくと理解が早まります。
コーディング全体の流れを把握しよう
HTML/CSSコーディングの手順は、大きく次の流れで進みます。この地図を頭に入れておくだけで、作業中に「今どこにいるか」が分かるようになります。
- 環境を準備する（エディタ・フォルダ・ファイル）
- デザインを見てブロック分けをする
- HTMLで骨組みを作る
- CSSでレイアウトと装飾を整える
- レスポンシブ対応をする
- ブラウザで確認・修正する
初心者が最初に知っておくべき考え方
一番伝えたいのは、「上から順にコードを書く」のではなく「全体を分解してから書く」という考え方です。私が実務でコーディングするときも、コードを書く時間より「どう分けるか」を考える時間のほうが長いくらいです。この記事の手順②で詳しく解説するので、まずは全体像だけ掴んで次に進みましょう。
Section 02HTML/CSSコーディング手順①｜まずは環境を準備しよう
最初のステップは環境の準備です。とはいえ、HTML/CSSに複雑な環境構築は不要です。無料のエディタとブラウザがあれば、5分で書き始められます。
VSCodeをインストールする
エディタはVSCode（Visual Studio Code）一択で問題ありません。Microsoftが無料で提供していて、実務の現場でも広く使われています。私の職場でも、フロントエンドのコーディングはほぼ全員VSCodeです。公式サイトからOSに合ったものをダウンロードしてインストールしましょう。なお、将来サーバーサイドまで学ぶ予定なら、Linuxコマンド一覧｜初心者がまず覚える基本20選にも早めに目を通しておくと役立ちます。
入れておきたいVSCode拡張機能
拡張機能は入れすぎると重くなるので、最初は次の4つで十分です。
- Japanese Language Pack：メニューを日本語化できる
- Live Server：保存すると同時にブラウザへ自動反映される
- Prettier：コードを自動で整形してくれる
- Auto Rename Tag：開始タグを変えると閉じタグも自動で変わる
特にLive Serverは必須級です。「保存→ブラウザ更新」の手作業がなくなり、作業スピードが目に見えて上がります。
ディレクトリ（フォルダ）構成を作る
ファイルを1か所に散らかすと、画像のパス間違いなどのトラブルが増えます。最初にシンプルな構成を作っておきましょう。
テキスト
project/
├── index.html
├── css/
│ └── style.css
└── img/
└── （画像を入れる）実務の案件でも、規模の差はあれど基本はこの形です。HTMLと同じ階層にcssフォルダとimgフォルダを置くと覚えてください。
HTML・CSSファイルを準備する
index.htmlとstyle.cssを作ったら、2つをlinkタグでつなぎます。ここを忘れると「CSSが反映されない」と悩む原因になります。
HTML
<head>
<link rel="stylesheet" href="css/style.css">
</head>リセットCSSは入れるべき？
ブラウザには最初から余白などのデフォルトCSSが当たっていて、ブラウザごとに微妙に差があります。それを打ち消すのがリセットCSSです。代表的なものにdestyle.cssやress、sanitize.cssがあります。デメリットは、リセットの強さによっては装飾をすべて自分で書く必要がある点です。ただ模写コーディングでは、デフォルトCSSの差に悩む時間がもったいないので、初心者ほど入れておくのがおすすめです。環境が整ったら、次はいよいよデザインの読み解きに進みましょう。
Section 03HTML/CSSコーディング手順②｜いきなりコードを書かずにブロック分けをする
ここがこの記事で一番伝えたいステップです。初心者が挫折する最大の原因は、デザインを見た瞬間にコードを書き始めることにあります。上手い人ほど、書く前に「分ける」作業に時間をかけています。
デザインカンプはどう見る？
デザインカンプとは、完成イメージを示したデザイン画像のことです。カンプを受け取ったら、まず細部ではなく全体を眺めます。「大きな塊がいくつあるか」「同じ形の繰り返しはないか」の2点だけ意識してください。文字の色やボタンの角丸は、この段階では見なくて大丈夫です。
ページを「箱（div）」で考える
Webページは、大小の箱が積み重なってできています。divはその箱を作る汎用タグです。デザインを見たら「この範囲がひとつの箱、その中に小さい箱が3つ」と、マトリョーシカのような入れ子構造に置き換えて考えます。この見方が身につくと、どんなデザインでも怖くなくなります。
header・main・footerを先に分けよう
最初の分割は、ほぼすべてのサイトで共通です。上部のロゴやナビがheader、中央のコンテンツがmain、下部の情報がfooterです。まずこの3つに割ってから、mainの中をさらにsectionで分けていきます。
HTML
<header>ロゴ・ナビゲーション</header>
<main>
<section>メインビジュアル</section>
<section>サービス紹介</section>
<section>お問い合わせ</section>
</main>
<footer>コピーライト</footer>この3行の骨格だけで、ページの構造は8割決まります。
手書きでレイアウト図を書くメリット
私は今でも、初見のデザインは紙に四角を書いて分解します。手書きだと「どこまでがひとつの箱か」を強制的に決めることになり、曖昧なまま進めなくなるからです。印刷したカンプに赤ペンで線を引くだけでも効果があります。5分の手間で、後の手戻りが大きく減ります。
共通パーツを先に見つけるコツ
ブロック分けの最後に、同じ見た目の繰り返しを探します。カード、ボタン、見出しデザインなどが典型です。共通パーツを先に洗い出しておくと、CSSを1回書くだけで使い回せます。実務でもこの「共通化」がコード量と修正コストを大きく左右します。コーディング開始前に、次のチェックリストで準備を確認しましょう。
- デザイン全体を眺めた
- フォルダとファイルを作成した
- header・main・footerに分けた
- mainの中のsectionを分けた
- 共通パーツを書き出した
全部チェックできたら、いよいよコードを書き始めます。
Section 04HTML/CSSコーディング手順③｜HTMLからCSSまで正しい順番で進めよう
ここからが実際のコーディングです。実務でも通用する7つの手順に分けて解説します。「HTMLを先に完成させて、CSSは後」が大原則です。
手順1 HTMLの雛形を作る
まずHTMLの決まり文句である雛形を書きます。VSCodeなら「!」と入力してTabキーを押すだけで自動生成されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイト名</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>lang="ja"への変更と、viewportの行が残っているかだけ確認してください。viewportは後述のレスポンシブ対応に必須です。
手順2 HTMLだけで骨組みを完成させる
ブロック分けの結果を、そのままHTMLに落とし込みます。この段階ではCSSを1行も書きません。見た目は文字が並んだだけの状態で正解です。「HTMLだけで内容がすべて読める」状態を先に作ることで、構造の間違いに早く気づけます。骨組みが完成したら、タグ選びの質を上げるためにSEOに強いHTMLの書き方も参考にしてください。
手順3 class名を付けるポイント
class名は「見た目」ではなく「役割」で付けます。red-textのような名前だと、デザイン変更で色が変わった瞬間に破綻します。news-titleのように役割で命名すれば、色が何色になっても意味が通ります。
HTML
<!-- NG：見た目で命名 -->
<h2 class="red-text">お知らせ</h2>
<!-- OK：役割で命名 -->
<h2 class="news-title">お知らせ</h2>手順4 CSSでレイアウトを整える
HTMLが完成してから、CSSに移ります。最初にやるのは装飾ではなく「配置」です。大きな箱の並びをFlexboxなどで組み、外側から内側へ整えていきます。CSSの基礎に不安があれば、CSSとは？書き方とHTMLへの適用を初心者向けに解説で復習してから進むのが近道です。
CSS
.cards {
display: flex; /* 子要素を横並びにする */
gap: 24px; /* 箱同士の間隔 */
}表示結果は、縦に積まれていたカードが24pxの間隔で横一列に並んだ状態です。
手順5 CSSで装飾する
レイアウトが組めたら、色・フォント・余白などの装飾を加えます。順番のコツは、ページの上から下ではなく「共通パーツ→各セクション」の順で書くことです。ボタンや見出しの共通スタイルを先に作れば、各セクションでは差分を書くだけで済みます。
手順6 レスポンシブ対応を追加する
レスポンシブ対応とは、スマホでも崩れず表示させることです。メディアクエリという仕組みで「画面幅◯px以下のときだけ適用するCSS」を書きます。
CSS
@media (max-width: 768px) {
.cards {
flex-direction: column; /* スマホでは縦並びに */
}
}画面幅768px以下では、横並びだったカードが縦一列に切り替わります。PC表示を作り切ってからスマホ対応へ進むと、修正箇所が明確になります。
手順7 ブラウザ確認・検証ツールで修正する
最後に、ブラウザで表示を確認しながら微調整します。Chromeで右クリック→「検証」を開くと、要素ごとのCSSをその場で書き換えて試せます。完成したら次のチェックで品質を確認しましょう。
- HTMLの文法エラーがないか（W3Cのバリデーターで確認）
- スマホ幅でレイアウトが崩れていないか
- 画像にalt属性を付けたか
- 見出しがh1→h2→h3の順で並んでいるか
- 画像のファイルサイズが重すぎないか
7つの手順は以上です。この流れを体に染み込ませる練習として、次章の模写コーディングに進みましょう。
Section 05模写コーディングのやり方｜初心者でも効率よく上達する方法
ここからは模写コーディングのやり方を解説します。私自身、学習期に一番力がついたのはこの練習でした。やり方を間違えると「答えを写しただけ」になるので、進め方が肝心です。
模写コーディングとは？
模写コーディングとは、既存のWebサイトを見本にして、同じ見た目を自力で再現する練習法です。教材と違って答えの手順書がないため、「デザインを見て、自分で構造を考える」実務と同じ頭の使い方ができます。ここまで解説したコーディング手順を、そのまま実践する場だと考えてください。
模写するサイトの選び方
最初の1本は、シンプルな1ページ構成のサイトを選びます。目安は「セクションが5個前後」「アニメーションが少ない」「1〜3日で終わりそう」の3つです。いきなり凝ったサイトを選ぶと、完成前に挫折します。私も最初に多機能なサイトを選んで1週間で投げ出した経験があるので、簡単すぎるくらいが丁度いいです。
検証ツールを使う方法
どうしても分からない箇所は、Chromeの検証ツールで答え合わせができます。見本サイト上で右クリック→「検証」を選ぶと、その要素のHTMLと適用中のCSSが表示されます。ただし最初から見るのはNGです。「15分考えて分からなければ見る」のようにルールを決めると、考える力と効率を両立できます。
FigmaやXDから余白を確認する方法
デザインデータ付きの教材なら、余白やフォントサイズを正確に測れます。Figmaでは要素を選択した状態で他の要素にカーソルを乗せると、間隔の数値が表示されます。目分量で「だいたい30pxかな」と進めるより、数値で確認する癖をつけたほうが、実務への移行がスムーズです。
Emmetで入力速度を上げよう
EmmetはVSCodeに標準搭載されている入力補完機能です。短い記法を書いてTabキーを押すと、HTMLが展開されます。
HTML
<!-- 「ul>li*3」と入力してTabキーを押すと…… -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>リスト3件がワンアクションで生成されます。タイピング量が減る分、構造を考えることに集中できます。
AI（ChatGPT・GitHub Copilot）の活用方法
AIに丸ごと書かせると練習になりませんが、使い方次第で最高の家庭教師になります。おすすめは「自分で書いたコードを貼ってレビューしてもらう」「エラーの原因を質問する」の2つです。逆に「このサイトを模写して」と頼むのは、上達の機会を捨てる使い方です。書くのは自分、添削はAIという分担で進めましょう。まずは今夜、見本サイトを1つ選ぶところから始めてみてください。
未経験エンジニアのためのChatGPT学習法模写コーディングでつまずきやすいポイントと対処法
模写を始めると、誰もが同じ場所でつまずきます。ここでは質問されることが多い順に、原因と対処法をまとめました。困ったときに戻ってくる「駆け込み寺」として使ってください。
CSSが反映されない
原因の大半は、linkタグのパス間違いかclass名のスペルミスです。まずhrefの値が実際のファイル位置と一致しているか確認します。次にHTML側のclassとCSS側のセレクタを見比べます。それでも直らないときは、ブラウザのキャッシュが古い可能性があるので、スーパーリロード（WindowsはCtrl+Shift+R）を試してください。
画像が表示されない
画像のトラブルもほぼパスが原因です。「img/photo.jpg」と書いたのに実際は「images」フォルダだった、拡張子が「.jpeg」だった、というケースが定番です。検証ツールのConsoleタブに404エラーが出ていれば、パス間違いが確定します。ファイル名は半角英数字の小文字で統一しておくと、この種のミスが激減します。
レイアウトが崩れる
横並びが縦になる、余白が想定と違う、といった崩れの多くはボックスの幅計算が原因です。paddingやborderを足すと要素の合計幅が親を超え、折り返しが起きます。次の1行をCSSの先頭に入れておくと、幅の計算が直感的になり崩れにくくなります。
CSS
* {
box-sizing: border-box; /* paddingとborderを幅に含める */
}background-colorで要素を可視化する
「どの箱がどこまで広がっているか分からない」ときは、要素に一時的に背景色を付けます。私も実務で崩れの原因を探すとき、今でもこの方法を使います。
CSS
.container {
background-color: rgba(255, 0, 0, 0.2); /* 調査用。確認後に消す */
}薄い赤で箱の範囲が浮かび上がり、「思ったより幅が広い」「余白がmarginではなく高さだった」などが一目で分かります。
Chrome検証ツールで原因を探す
検証ツールのElementsタブで要素を選ぶと、適用中のCSSが右側に一覧表示されます。打ち消し線が付いたプロパティは、他のCSSに上書きされている印です。ここを見れば「書いたのに効かない」の原因を特定できます。エラーは敵ではなく、原因を教えてくれるヒントです。焦らず1つずつ潰していきましょう。
Section 07模写コーディングにおすすめの練習サイト【レベル別】
模写の練習に使えるサービスをレベル別に紹介します。自分の現在地に合わせて選んでください。
| レベル | サービス例 | 特徴 |
|---|---|---|
| 初級 | Progate／ドットインストール | 環境構築不要で基礎文法を学べる。模写の前準備に最適 |
| 初中級 | Codejumpなどの模写練習サイト | 模写用に作られたお手本サイトをレベル別に選べる |
| 中級以上 | Figma Community／実在サイトのLP模写 | デザインデータから数値を測って作る、実務に近い練習 |
初級：Progate・ドットインストール
タグやプロパティの意味がまだ怪しい段階なら、まず学習サービスで基礎を固めます。Progateはブラウザだけで進められ、ドットインストールは短い動画で手を動かせます。両方を完璧にする必要はなく、HTML/CSSのコースを1周したら模写に進んでOKです。
初中級：模写用の教材サイト・Codejump
基礎を終えたら、模写用に公開されているお手本サイトに挑戦します。Codejumpのようなサービスは難易度が段階分けされていて、初心者向けのお手本から始められます。実在の企業サイトと違い、練習用として公開されているため安心して取り組めるのも利点です。
中級以上：Figma Community・LP模写
Figma Communityには無料で使えるデザインファイルが多数公開されています。デザインデータから余白やフォントを測って作る工程は、実務のコーディングとほぼ同じです。1枚もののランディングページ（LP）を数本仕上げれば、ポートフォリオの土台にもなります。
練習サイトを選ぶポイント
選ぶ基準は「今の実力より少しだけ難しい」ことです。簡単すぎると作業になり、難しすぎると挫折します。1本を完璧にするより、難易度を上げながら3〜5本完走するほうが力がつきます。この記事を閉じる前に、最初の1本を決めてしまいましょう。
Section 08HTML/CSSコーディングに関するよくある質問（FAQ）
最後に、コーディング手順についてよく受ける質問に答えます。
HTMLとCSSは同時進行で書くべき？
初心者のうちは、HTMLを完成させてからCSSに移るのがおすすめです。同時に書くと、表示が崩れたときに構造とスタイルのどちらが原因か切り分けられなくなります。慣れてくるとセクション単位で交互に書くスタイルも選べますが、それは基本の順番が身についてからで十分です。
デザインカンプの余白はどう測る？
FigmaやXDのデータがあれば、要素を選択して数値を確認します。画像しかない場合は、スクリーンショットを撮って画像編集ソフトで測るか、キリのいい数値（8の倍数など）に寄せて再現します。1px単位の完全一致より、余白のリズムを揃えることを優先してください。
模写サイトをポートフォリオに載せてもいい？
実在サイトの模写は著作権の問題があるため、そのまま公開するのは避けてください。ポートフォリオに載せるなら、練習用に公開されているデザインで利用条件を確認するか、自分でデザインから作った作品にします。学習の過程としてコードをGitHubに置く場合も、公開範囲には注意が必要です。
レスポンシブ対応はいつ行う？
PC表示のコーディングが一通り終わってからで大丈夫です。作りながら両対応しようとすると、修正のたびに2倍の確認が必要になります。ただしviewportの記述と「PCで幅を固定しすぎない」意識だけは、最初から持っておくと後がラクです。
レイアウトが崩れたらどうする？
まず検証ツールで崩れた要素を選択し、幅と余白を確認します。原因が分からなければ、background-colorで箱を可視化して範囲を目で確かめます。この2つで原因の9割は特定できます。詳しい手順は本文の「つまずきやすいポイントと対処法」を読み返してください。
Section 09まとめ｜HTML/CSSコーディングは「ブロック分け」が上達への近道
HTML/CSSコーディングの手順を、環境準備からブロック分け、7つの実装ステップ、模写コーディングのやり方まで解説しました。あらためて核心をひとつだけ挙げるなら、「コードを書く前に、デザインを箱に分ける」ことです。この習慣があるだけで、書くスピードも崩れの少なさも別人のように変わります。
今日から実践すべきこと
やることは3つです。VSCodeとフォルダを準備する。模写する見本サイトを1つ決める。紙にブロック分けの図を書く。ここまでなら今日中に終わります。完璧な理解より、不完全でも1本完成させる経験のほうが何倍も価値があります。
次に学ぶべき内容
HTML/CSSの次は、以下の順で学ぶと遠回りしません。
- セマンティックHTMLでタグ選びの質を上げる
- JavaScriptで動きを付ける
- Git・GitHubでコードを管理する
- 模写を重ねてポートフォリオを作る
動きのあるサイトに興味が出てきたら、JavaScriptとは？できること・違いを初心者に解説で次の一歩を踏み出してください。あなたの最初の1本が完成することを楽しみにしています。
