HTMLやCSSを学習サイトで練習しても、白紙の状態からWebページを1枚作ろうとすると手が止まることがあります。

原因の一つは、HTMLを書く前に何を決めるか、CSSをどの順番で当てるか、いつスマートフォン表示を確認するかが決まっていないことです。

この記事では、シンプルなサービス紹介ページを想定して、HTML・CSS・JavaScriptで1ページを完成させる基本の流れを整理します。

情報の基準日：2026年8月12日
HTML・CSS・JavaScriptの仕様や推奨手法は更新されます。実装時はMDN Web Docs公式とMDN公式のResponsive Web Design解説も確認してください。

先に結論：HTMLから始める前に「ページの役割」を決める

最初の1ページでは、次の順番が分かりやすいです。

  1. ページの目的を決める
  2. 必要なセクションを書き出す
  3. HTMLの意味構造を作る
  4. CSSで大きなレイアウトを作る
  5. 余白・文字・画像を整える
  6. スマートフォン表示を調整する
  7. 必要なJavaScriptを追加する
  8. アクセシビリティとリンクを確認する
  9. 実ブラウザで最終確認する

「見た目を作る」より前に、何を伝えるページなのかを固定します。

今回作るページの例

架空のWeb制作サービスLPなら、次のような構成にできます。

header
  ロゴ / ナビゲーション
main
  FV
  特徴
  制作の流れ
  料金
  FAQ
  CTA
footer

最初からカルーセルや複雑なアニメーションを入れず、1ページの情報が自然に読める状態を先に作ります。

Webページを1枚作る基本の流れ【2026年8月時点】

Step 1：ページの目的を1文で書く

例えば、

個人事業主向けのWeb制作サービスを紹介し、問い合わせにつなげる。

と決めます。

目的が曖昧なまま作ると、セクションやボタンが増えやすくなります。

Step 2：必要な情報を見出し単位で並べる

  • 誰向けか
  • 何ができるか
  • どんな流れか
  • 料金の考え方
  • よくある質問
  • 問い合わせ

を並べます。この段階ではCSSを書きません。

Step 3：HTMLの意味構造を作る

HTMLでは見た目ではなく役割を考えます。

<header class="site-header">
  <a href="/" class="site-logo">Sample Studio</a>
  <nav aria-label="メインナビゲーション">
    <a href="#features">特徴</a>
    <a href="#flow">制作の流れ</a>
    <a href="#contact">お問い合わせ</a>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>小さな事業のためのWeb制作</h1>
    <p>必要な情報が伝わる1ページを丁寧に作ります。</p>
    <a href="#contact">相談する</a>
  </section>
</main>

divだけで組まず、header、nav、main、section、footerなど、意味に合う要素を使います。

Step 4：CSSの土台を作る

最初に、box-sizing、bodyのmargin、font-family、line-height、画像の基本を整えます。

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Step 5：コンテナと大きなレイアウトを作る

個々の要素のmarginより先に、ページ全体の幅を決めます。

.container {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

Step 6：FlexboxやGridで主要レイアウトを作る

例えばFVを2カラムにするなら、

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

のように大枠を作ります。

Step 7：レスポンシブ対応を入れる

MDN公式ではレスポンシブWebデザインを、さまざまな画面サイズや解像度でも使いやすく表示するためのアプローチとして説明しています。

@media (max-width: 767px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

ただし767pxだけでなく、ブラウザ幅を少しずつ変えながら、見出し・カード・ボタン・画像が不自然にならないか確認します。

Step 8：文字サイズと余白を整える

ページの大枠ができたあとで、h1 / h2 / bodyの文字サイズ、セクション上下余白、カード内余白、ボタン高さ、行間を調整します。

1px単位の調整を先にすると、後でレスポンシブ対応したときにやり直しやすくなります。

Step 9：画像を適切に配置する

  • 意味のある画像か
  • altが必要か
  • 元サイズが大きすぎないか
  • 縦横比が崩れていないか

を確認します。

Step 10：必要なJavaScriptだけ追加する

FAQアコーディオンなら、最初は1つの機能に絞ります。

<button class="faq-button" aria-expanded="false" aria-controls="faq-1">
  納期はどのくらいですか？
</button>
<div id="faq-1" hidden>
  内容により異なります。まず対象ページと希望日を確認します。
</div>

JavaScriptではaria-expandedとhiddenを一緒に更新します。

Step 11：リンクとボタンを確認する

  • 別ページや別位置へ移動 → リンク
  • メニューを開く、送信するなど操作 → ボタン

のように用途に合う要素を使います。

Step 12：フォームがある場合は状態を確認する

label、必須項目、エラー表示、送信中、成功、失敗の状態を考えます。

見た目だけのフォームを公開し、送信できない状態にしないよう注意します。

Step 13：ブラウザで最終確認する

  • PC
  • スマートフォン幅
  • 中間幅
  • リンク
  • JavaScript UI
  • console error
  • 横スクロール
  • 画像404

を確認します。可能なら実機でも確認します。

CSSは「部品」と「ページ固有」を分ける

ページが増える予定なら、button、card、container、headerなど再利用できる部品と、hero、price-table、faqなどページ固有部分を意識して分けます。

小規模な1ページでは無理に複雑な設計を導入する必要はありませんが、同じスタイルを何度もコピーし始めたら共通化を考えると分かりやすいです。

レスポンシブで避けたい作り方

ページ全体を固定幅にする

スマートフォンで横スクロールが出る原因になります。

PCを縮小しただけにする

PCで横並びの要素は、スマートフォンでは順番や情報量を変えたほうが読みやすい場合があります。

breakpointを端末名だけで決める

特定端末の幅だけでなく、実際にレイアウトが崩れる位置も見ます。

1ページ完成後に次へ進む

1ページを作れたら、次はデザインカンプからの再現へ進めます。

FigmaデザインからHTML/CSSへ実装する実務レシピでは、余白・文字・画像・コンポーネントを確認して実装する順番を整理しています。

案件として進める場合はWeb制作案件の受注後フローで、途中確認や修正・納品までの進め方も確認してください。

体系的に学びたい場合はWeb制作オンラインスクールの比較へ進めます。

まとめ

Webページを1枚作るときは、HTML・CSS・JavaScriptの機能を順番に覚えるより、目的 → 情報構造 → HTML → 大枠CSS → レスポンシブ → 必要なJavaScript → QAという制作工程を一度通すことが大切です。

1ページを最後まで完成させられるようになったら、Figmaからの実装、Git運用、Preview公開へ少しずつ範囲を広げていきましょう。

次に読む記事

今のテーマから次の行動へ進むときは、以下の記事も参考にしてください。