HTMLサイトの作り方ロードマップ｜ゼロから公開までの8ステップ

このガイドで分かること・こんな人向け

このページは、Web制作がまったくはじめての人が、自分で作ったHTMLのWebサイトをインターネットに公開するまでを、8つのステップで順番に進めるためのロードマップです。

分からない言葉は、ページの後ろの「用語ミニ辞典」で確かめられます。

結論から言うと、Webサイト作りは「仕組みを知る → 道具をそろえる → HTMLで中身を書く → CSSで見た目を整える → スマホ対応 → JavaScriptで動き → 公開 → 確認」の順に進むのが一番つまずきにくい道です。ただし、全部を一度に覚える必要はありません。各ステップの「次へ進む前のチェック」が全部付いたら、次に進みます。

こんな人に向けて書いています。

  • パソコンは使えるが、HTMLやCSSという言葉を聞いたことがある程度の人
  • 「HTML 書き方」などの記事を読みに来たが、全体のどこに当たるのか分からなくなった人
  • 自己紹介ページやお店の紹介ページを、自分の手で作って公開してみたい人

各ステップの「ここで読む記事」は、もっと知りたい人向けです。読まなくても次のステップに進めます。記事名の後ろに「（近日公開）」と付いているものは、公開日まではリンクが無い文字だけの表示です。

このガイドでは、1つの例として「はじめての自己紹介サイト」を最後まで作ります。コードはすべて、筆者がブラウザ（Microsoft Edge）で実際に表示し、ボタンの動作や画面幅ごとの表示を確認したものです（2026年10月時点）。操作の説明は Windows 11 と Microsoft Edge を基本にし、Mac や Chrome で違うところは書き添えています。

全体像：HTMLサイトができるまでの8ステップとは

HTMLサイトを作って公開するまでの8ステップのロードマップ図
全体のロードマップ。上から順に進む。灰色は準備、青は作る、緑は公開

Webサイト作りは、家づくりにたとえると分かりやすくなります。HTMLは家の「骨組み」と「部屋の名前」、CSSは「壁紙や家具の配置」、JavaScriptは「スイッチを押すと電気がつく仕掛け」です。サーバーは「ファイルを置いておく倉庫」、ドメインは「その倉庫の住所」です。

ステップ やること 主な道具
1 Webサイトが表示される仕組みを知る ブラウザ
2 エディタとブラウザを準備し、フォルダを作る エディタ、ブラウザ
3 HTMLで中身（見出し・文章・画像など）を書く エディタ
4 CSSで見た目を整える エディタ
5 スマホでも崩れないようにする（レスポンシブ） 開発者ツール
6 JavaScriptで動きを付ける エディタ
7 サーバーとドメインを用意して公開する サーバー、SFTPソフト
8 公開後に表示・速度・検索・安全を確認する スマホ、確認用のWebサービス

ステップ1〜6は、自分のパソコンの中だけで進められ、お金はかかりません。お金がかかるのはステップ7からです。

始める前のチェックリスト

次の4つがそろっていれば、ステップ1から始められます。

  • Windows か Mac のパソコンと、インターネットにつながる環境がある
  • Microsoft Edge か Google Chrome などのブラウザが入っている
  • ソフトをダウンロードして、パソコンに入れる（インストールする）ことができる
  • 1日30分〜1時間ほど、手を動かす時間が取れる

エディタの入れ方やフォルダの作り方は、ステップ2で説明します。

ステップ1：Webサイトが表示される仕組みとは

このステップのゴール

ブラウザにURLを入れてからページが表示されるまでに、何が起きているかを、自分の言葉で3行で説明できるようになることです。

やること

  1. 下の図を見て、「ブラウザ」「DNS」「サーバー」の3つの役割を確認します。
  2. URL を部品に分けて読む練習をします（下の表）。
  3. 「Webページの正体は、サーバーに置いてあるファイル（HTML・CSS・画像など）」だと理解します。
ブラウザがDNSで住所を調べ、サーバーにHTMLなどのファイルを頼み、受け取って表示する流れの図
URLを入れてから表示されるまで。ブラウザが頼み、サーバーがファイルを返す

流れを順番に言うと、こうなります。

  1. あなたがブラウザにURL（例：https://example.com/）を入力します。
  2. ブラウザは、DNS に「example.com はどのコンピュータ？」と聞き、IPアドレス（数字の住所）を教えてもらいます。
  3. ブラウザは、そのサーバーに「ページをください」と頼みます。この頼み方のルールが HTTP です。
  4. サーバーは、HTML ファイルを返します。ブラウザは HTML を読み、そこに書かれた CSS や画像も続けて受け取ります。
  5. ブラウザが全部を組み立てて、画面に表示します。

URL は、次のように分けて読みます。

URL の例 スキーム（会話のルール） ドメイン（住所） 残りの部分
https://example.com/about.html https example.com /about.html（サーバーの中のファイルの場所）
https://www.example.com/search?q=html https www.example.com /search が場所、? から後ろは検索した言葉などの追加の情報

つまり、Webサイトを作るとは、ブラウザに渡すファイルを作ることです。そして公開とは、そのファイルをサーバーに置くことです。ただし、お問い合わせフォームの送信やログインのように、サーバー側でプログラム（PHP など）が動く仕組みは、このガイドの範囲外です。

つまずきやすい点

  • 「インターネット＝ブラウザ」と考えてしまうことです。ブラウザは見るための道具で、ページのファイルはサーバーにあります。
  • 自分のパソコンでファイルを開いたとき、アドレスバーは file:///C:/... で始まります。これはまだ誰にも公開されていない状態です。公開はステップ7です。

次へ進む前のチェック

  • ブラウザ・DNS・サーバーの役割を1つずつ言える
  • URL を、スキーム・ドメイン・残りの部分に分けられる
  • Webページの正体はファイルだと説明できる

ここで読む記事

ここまでで覚えておくこと

  • Webページの正体は、サーバーに置かれたファイル
  • ブラウザが頼み、サーバーが返し、ブラウザが組み立てて表示する
  • 自分のパソコンで開いているだけでは、まだ公開されていない

ステップ2：エディタとブラウザの準備、フォルダの作り方

このステップのゴール

エディタを入れ、デスクトップに my-site フォルダを作り、その中に最初のファイルを UTF-8（日本語が文字化けしない保存の形式）で保存できることです。

やること

  1. エディタを入れます。 迷ったら、Microsoft が無料で配布している Visual Studio Code（略して VS Code）を使います。このガイドの操作説明は VS Code で書いています。公式サイト（https://code.visualstudio.com/）の「Download」ボタンから、自分のパソコン（Windows か Mac）用を入れます。ただし、「色分け表示（タグや文字の種類ごとに色が付き、書き間違いに気づきやすい）がある」「UTF-8 で保存できる」「無料」の3つを満たせば、ほかのエディタでもかまいません。
  2. メモ帳ではなくエディタを使う理由： Windows のメモ帳でも HTML は書けます。ただし、色分け表示が無く、書き間違いに気づきにくいので、エディタを使います。Word のような文書作成ソフトは、見た目の情報を一緒に保存してしまうので、HTML を書くのには使えません。
  3. 拡張子を表示する設定にします。 ファイルの種類を見分けるためです。
    • Windows 11：エクスプローラーを開き、上の並びの「表示」ボタンを押し、出てきたメニューの「表示」にマウスを乗せて、「ファイル名拡張子」にチェックを付けます。
    • Mac：Finder のメニューで「Finder」→「設定」→「詳細」を開き、「すべてのファイル名拡張子を表示」を選びます。
  4. デスクトップに my-site フォルダを作ります。 デスクトップで右クリック →「新規作成」→「フォルダー」（Mac は「新規フォルダ」）を選び、名前を my-site にします。
  5. VS Code で my-site を開きます。 VS Code のメニュー「File」→「Open Folder…」（Mac は「Open…」）で my-site を選びます。VS Code の画面は、最初は英語で表示されます。
  6. 中にフォルダとファイルを作ります。 ファイルやフォルダは、作りたい場所のフォルダの行をクリックしてから作ります。
    • VS Code の左側のファイル一覧（EXPLORER と書かれた欄）で、一番上の MY-SITE の行をクリックします。
    • 行にマウスを乗せると横に小さなアイコンが並びます。アイコンにマウスを乗せると「New File…」「New Folder…」と名前が出ます。
    • 「New Folder…」で css・js・images の3つのフォルダを作ります。
    • もう一度 MY-SITE の行をクリックしてから「New File…」で index.html を作ります。
    • 左側の並びが下のフォルダの形と同じか（index.html がほかのフォルダの中に入っていないか）を確かめます。
  7. UTF-8 で保存されているか確かめます。 VS Code の画面の一番下（右側）に「UTF-8」と表示されていれば大丈夫です。違う表示なら、そこをクリックして「Save with Encoding」から「UTF-8」を選びます。

作り終わると、フォルダは次の形になります（中身のファイルは、ステップ3〜6で1つずつ作ります）。

デスクトップ/my-site/
├─ index.html      … トップページ（ステップ3）
├─ about.html      … 2ページ目（ステップ3）
├─ css/
│   └─ style.css   … 見た目のルール（ステップ4）
├─ js/
│   └─ main.js     … 動きのプログラム（ステップ6）
└─ images/
    └─ photo.png   … 画像（ステップ3）
サイトのフォルダ構成と、index.htmlから見た画像やCSSへの相対パスの図
フォルダの形と、index.html から見たファイルの場所（相対パス）

HTML の中でほかのファイルを指すときは、今のファイルから見た道順（相対パス）で書きます。images/photo.png は「今のファイルと同じ場所にある images フォルダの中の photo.png」という意味です。1つ上のフォルダに戻るときは ../ を使います（例：blog フォルダの中のページから画像を指すなら ../images/photo.png）。

ファイル名とフォルダ名のルールは3つです。

  • 半角の小文字だけを使う。 多くのサーバーは大文字と小文字を区別するので、Photo.png と photo.png は別のファイルになります。
  • 空白（スペース）を入れない。 単語を区切るときはハイフン（-）を使います。
  • 日本語のファイル名にしない。 URLに変換されたときに読みにくくなり、トラブルのもとになります。

最後に、ブラウザの開発者ツールを開けるか試します。

  • Edge・Chrome とも、F12 キーで開きます（Mac は Command＋Option＋I）。
  • ノートパソコンで F12 を押しても音量などが変わるときは、Fn キーを押しながら F12 を押します。
  • キーで開かないときは、Edge は右上の「…」→「その他のツール」→「開発者ツール」、Chrome は右上の「︙」→「その他のツール」→「デベロッパー ツール」です。
  • 開いたら「要素（Elements）」と「コンソール（Console）」のタブがあることを確かめます（表示は日本語か英語です）。

つまずきやすい点

  • 保存したのに表示が変わらないのは、多くの場合「保存していない」か「別のファイルを開いている」ことが原因です。VS Code では、保存していないファイルのタブに「●」が付きます。保存は Ctrl＋S（Mac は Command＋S）です。
  • index.html.txt のように、拡張子が2つ付いてしまうことがあります。拡張子を表示する設定にしておけば気づけます。

次へ進む前のチェック

  • エディタを入れ、my-site フォルダを開けた
  • css・js・images のフォルダと index.html を作った
  • 画面の右下が「UTF-8」になっている
  • 拡張子が見える設定にした
  • 開発者ツールを開き、Console タブを表示できた

ここで読む記事

ここまでで覚えておくこと

  • エディタは「色分け表示・UTF-8・無料」の3つで選ぶ
  • my-site はデスクトップに作り、エディタでフォルダごと開く
  • ファイル名は半角小文字、空白なし、区切りはハイフン

ステップ3：HTMLの基本（見出し・段落・リンク・画像・リスト・表・フォーム）

このステップのゴール

index.html に、見出し・段落・リンク・画像・リスト・表・フォームを正しいタグで書き、ブラウザで表示できることです。

やること

  1. 画像を用意します。 パソコンの中にある写真を1枚選び、名前を photo.png に変えて images フォルダに入れます。元が .jpg・.jpeg・.JPG の写真なら、名前を小文字の photo.jpg にして、下のコードの photo.png を photo.jpg に書き換えます。パソコンに写真が無い、スマホから移す方法が分からないときは、画像なしで進みます（表示のされ方は下で説明します）。
  2. VS Code で index.html を開き、下のコードを写して保存します（コピーして貼り付けてかまいません）。
  3. Windows のフォルダの画面（エクスプローラー。Mac は Finder）で、デスクトップの my-site の中の index.html をダブルクリックして、ブラウザで開きます。
  4. MY-SITE の行をクリックしてから「New File…」で about.html を作り、下の短いコードを写して保存します。
  5. 文章を自分の内容に書き換えて保存し、ブラウザを再読み込み（F5 キー、Mac は Command＋R）して変わることを確かめます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>はじめての自己紹介サイト</title>
  <meta name="description" content="Web制作を勉強中の私の自己紹介ページです。">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>はじめての自己紹介サイト</h1>
  </header>
  <main>
    <section>
      <h2>はじめまして</h2>
      <p>Web制作を勉強中です。<a href="about.html">くわしいプロフィール</a>も見てください。</p>
      <img src="images/photo.png" alt="青空と海の写真" width="320" height="200">
    </section>
    <div class="cards">
      <section>
        <h2>好きなもの</h2>
        <ul>
          <li>コーヒー</li>
          <li>散歩</li>
        </ul>
      </section>
      <section>
        <h2>勉強の記録</h2>
        <table>
          <tr><th>月</th><th>内容</th></tr>
          <tr><td>1か月目</td><td>HTML</td></tr>
          <tr><td>2か月目</td><td>CSS</td></tr>
        </table>
      </section>
    </div>
    <section>
      <h2>ひとこと</h2>
      <button id="hello-btn" type="button">あいさつする</button>
      <p id="message"></p>
    </section>
    <section>
      <h2>お問い合わせ</h2>
      <form>
        <label for="name">お名前</label>
        <input id="name" name="name" type="text" required>
        <button type="submit">送信</button>
      </form>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 はじめての自己紹介サイト</p>
  </footer>
  <script src="js/main.js" defer></script>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>プロフィール</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main>
    <h1>プロフィール</h1>
    <p><a href="index.html">トップへ戻る</a></p>
  </main>
</body>
</html>

期待する表示： 白い背景に、大きな見出し「はじめての自己紹介サイト」、その下に小見出しと文章、画像、「コーヒー」「散歩」の箇条書き、2行の表、ボタン、名前の入力欄が上から順に並びます。CSS をまだ作っていないので、飾りのない表示で正しい状態です。「くわしいプロフィール」を押すと about.html が開きます。「あいさつする」ボタンは、ステップ6で動くようにするので、今は押しても何も起きないのが正常です。写真の部分は、自分の写真なので見本の画面と見た目が違って当然です。

画像を入れていない場合は、画像の場所に小さなアイコンと「青空と海の写真」という文字が出ます。これは alt（画像の代わりの文章）が表示されている状態で、失敗ではありません。また、開発者ツールを開いた人は、Console に「Failed to load resource」という赤い表示が見えますが、style.css と main.js をまだ作っていないためで、正常です（ステップ4・6で消えます）。

ステップ3の完成（CSSなし）とステップ4の完成（CSSあり）の実際の画面の比較
実際の画面。左がステップ3の完成、右がステップ4の完成（幅540pxで表示）

コードの読み方です。

  • 開始タグ（<p>）から終了タグ（</p>）までのひとまとまりを「要素」と呼びます。
  • <!DOCTYPE html> は「これは今の HTML です」という宣言で、1行目に書きます。lang="ja" は「日本語のページ」という印です。
  • <head> は画面には出ない設定（文字コード、タブに出るタイトル、CSS の読み込みなど）、<body> は画面に表示される中身を書く場所です。
  • 見出しは <h1>〜<h6>。<h1> はページの一番大きな見出しで、1ページに1つ置くのが一般的です。
  • 段落は <p>、リンクは <a href="行き先">、画像は <img src="場所" alt="代わりの文章"> です。
  • 箇条書きは <ul> と <li>、表は <table>・<tr>（行）・<th>（見出しのマス）・<td>（ふつうのマス）です。
  • 入力欄は <input> で、<label for="name"> と id="name" を合わせると、文字をクリックしても入力欄が選ばれます。required は「入力しないと送信できない」という印、<button> はボタンです。
  • <header>（ページの頭）・<main>（主な内容）・<footer>（ページの終わり）・<section>（話題のまとまり）は、内容の区切りを表す箱です。<div> は意味を持たない箱で、class="cards" のように名前（class）を付けて、CSS で見た目を当てるときに使います。
  • <meta> は、ページについての設定を書くタグです。<meta name="description"> は検索結果の説明文に使われることがある紹介文、<meta name="viewport"> はスマホでの表示の設定です（ステップ5）。
HTMLの基本構造と、見出し・段落・リンク・画像・リスト・表・フォームのタグの対応図
よく使うタグと、その役割

つまずきやすい点

  • 閉じタグの書き忘れです。<p> を開いたら </p> で閉じます。ただし、<img> や <input>、<meta> のように閉じタグの無い要素もあります。
  • フォームを送信すると同じページに戻るだけなのは正常です。送られた内容をメールで受け取るには、サーバー側のプログラム（PHP など）が必要です。
  • 文字を大きくしたいだけで <h1> を使うのは間違いです。大きさは CSS で変えます。

次へ進む前のチェック

  • コードを写して保存し、ブラウザで表示できた
  • 文章を自分の内容に書き換えて、表示が変わった
  • <head> と <body> の役割の違いを言える
  • 「くわしいプロフィール」から about.html に移動できた

ここで読む記事

ここまでで覚えておくこと

  • <head> は設定、<body> は画面に出る中身
  • タグは意味で選ぶ。見た目は CSS で変える
  • 画像には必ず alt を付ける

ステップ4：CSSで見た目を整える

このステップのゴール

別ファイルの CSS を HTML から読み込み、色・文字・余白・枠線を自分で変えられることです。

やること

  1. VS Code の左側のファイル一覧で css フォルダの行をクリックしてから「New File…」で style.css を作り、下のコードを写して保存します。style.css が css の下に字下げされて並んでいれば、場所は正しいです。my-site の直下にできてしまったら、css フォルダの上へドラッグして移します。
  2. ブラウザを再読み込みして、色が付いたことを確認します（index.html には、ステップ3で <link rel="stylesheet" href="css/style.css"> を書いてあります）。
  3. header のルールの background: #1d4ed8; の #1d4ed8 だけを red や green に変えて保存し、帯の色が変わることを試します。#1d4ed8 は青を表す「カラーコード」で、red のような色の名前でも書けます。
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.8;
  color: #222222;
}
header {
  background: #1d4ed8;
  color: #ffffff;
  padding: 16px;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}
h2 {
  border-left: 6px solid #1d4ed8;
  padding-left: 8px;
}
img {
  max-width: 100%;
  height: auto;
}
footer {
  padding: 16px;
  text-align: center;
}
th, td {
  border: 1px solid #cccccc;
  padding: 4px 12px;
}

期待する表示： 一番上の見出しの帯が青になり、文字が白になります。小見出しの左に青い線が付き、表のマスに薄い灰色の線が付きます（上の画面比較の右側）。

CSSのルールの読み方（セレクタ・プロパティ・値）と、余白（margin・padding）の図
CSSの1つのルールの読み方と、内側の余白・外側の余白の違い

CSS は「どこを（セレクタ）」「何を（プロパティ）」「どうする（値）」の3つで書きます。h2 { border-left: 6px solid #1d4ed8; } は「すべての h2 の、左の線を、6px の青い実線にする」という意味です。px（ピクセル）は画面の点の数を表す単位で、スマホの画面の幅はおよそ 360〜430px です。

余白は2種類あります。padding は枠の内側の余白、margin は枠の外側の余白です。margin: 0 auto; は「上下0、左右は自動」で、幅を決めた箱を中央に寄せる定番の書き方です。

つまずきやすい点

  • CSS が全く効かない原因の多くは、読み込みのパスの間違いです。開発者ツールの Console に「Failed to load resource」が残っていたら、<link> の href とフォルダ名を見直します。
  • 一部だけ効かないときは、開発者ツールの「要素」タブでその部分をクリックします。右側に当たっている CSS が並び、ほかのルールに負けたものには打ち消し線が付きます。class などを使った、より具体的な指定が勝ちます（この強さを「詳細度」と呼びます）。
  • ;（セミコロン）や } の書き忘れで、その後ろのルールが効かなくなることがあります。

次へ進む前のチェック

  • style.css を作り、色が付いた
  • セレクタ・プロパティ・値を区別して説明できる
  • 色や padding の数字を変えて、どこが変わるか試した

ここで読む記事

ここまでで覚えておくこと

  • CSS は別ファイルにして <link> で読み込む
  • 「セレクタ { プロパティ: 値; }」が1つのルール
  • 効かないときは、パス・打ち消し線・書き間違いの順に疑う

ステップ5：レスポンシブ（スマホ対応）にする

このステップのゴール

同じ HTML が、スマホでは1列、パソコンでは2列に並び替わるようにし、開発者ツールで両方の見え方を確かめることです。

やること

  1. <head> に <meta name="viewport" content="width=device-width, initial-scale=1"> があることを確認します（ステップ3のコードに入っています）。これが無いと、スマホはパソコン用の広い画面として縮小表示します。
  2. style.css の最後に、下のコードを足して保存します。
  3. 開発者ツールを開き、スマホ表示に切り替えます。Edge では、開発者ツールの左上の並び（アクティビティ バー）にある「デバイス エミュレーションの切り替え」ボタン（スマホとタブレットの形のアイコン）を押します。Chrome では「デバイス ツールバーの切り替え」ボタンです。
  4. ページの上に出たバーの、幅と高さの数字の入力欄の左側（幅）に 375 と入れて表示を見ます。次に 1024 と入れて見比べます。入力欄が無いときは、バーの一番左の選択を「レスポンシブ」（Responsive）に変えると出ます。
  5. 終わったら、同じボタンをもう一度押すと元の表示に戻ります。
/* スマホでは1列、画面幅768px以上で2列 */
.cards {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

期待する表示： 幅 375px では「好きなもの」と「勉強の記録」が縦に1列で並びます。幅 1024px では2つが横に並びます。どちらの幅でも、画面が横にスクロールしません。

スマホでは1列、画面幅768px以上で2列になるレスポンシブの図
@media で「幅768px以上」のときだけ2列にする。図はイメージで、実際の画面には箱の枠線は出ない

コードの意味です。

  • .cards は、ステップ3で書いた <div class="cards"> を指します。先頭の . は「class の名前で探す」という印で、この箱の中の「好きなもの」と「勉強の記録」の2つが並び替わります。
  • display: grid; は「中身をマス目に並べる」指定、gap: 16px; はマスとマスのすき間です。
  • grid-template-columns: 1fr 1fr; は「同じ幅の列を2つ作る」という意味で、1fr 1fr 1fr にすれば3列になります。
  • @media (min-width: 768px) { ... } は「画面の幅が 768px 以上のときだけ、中のルールを使う」という意味です。この書き方を「メディアクエリ」と呼びます。
  • 先にスマホ用（1列）を書き、広い画面のルールを後から足す書き方を「モバイルファースト」と呼びます。

つまずきやすい点

  • viewport の meta を書き忘れると、メディアクエリを書いてもスマホで効いていないように見えます。
  • 横にはみ出す原因の多くは、幅を px で固定した要素です。width: 800px; のような指定は、max-width に変えます。
  • 768px のような切り替えの境目（ブレークポイント）に正解はありません。幅の数字を少しずつ変えて、崩れ始める幅を探して決めます。
  • 開発者ツールのスマホ表示は、画面の幅をまねたものです。実際のスマホでの確認は、公開後のステップ8で行います。

次へ進む前のチェック

  • viewport の meta が <head> に入っている
  • 開発者ツールで 375px と 1024px に切り替え、並び方が変わった
  • どの幅でも横スクロールが出ない

ここで読む記事

ここまでで覚えておくこと

  • viewport の meta が無いと、スマホでは縮小表示になり、メディアクエリが効いていないように見える
  • 先にスマホ用、広い画面は @media (min-width: …) で足す
  • 開発者ツールのスマホ表示で幅を入れて確かめる

ステップ6：JavaScriptで動きを付ける（基本）

このステップのゴール

ボタンを押したら文字が表示される、という小さな動きを JavaScript で作り、エラーが出たときに Console で原因を探せることです。

やること

  1. VS Code の左側のファイル一覧で js フォルダの行をクリックしてから「New File…」で main.js を作り、下のコードを写して保存します。main.js が js の下に字下げされて並んでいるかを確かめます。
  2. ブラウザを再読み込みし、「あいさつする」ボタンを押します（index.html の最後には、ステップ3で <script src="js/main.js" defer></script> を書いてあります）。
  3. エラーの練習をします。main.js の1行目の '#hello-btn' を '#hello' に書き換えて保存し、再読み込みしてボタンを押します。Console に赤いエラーが出ることを確かめたら、'#hello-btn' に戻して保存します（index.html の id="hello-btn" は変えません）。
const btn = document.querySelector('#hello-btn');
const msg = document.querySelector('#message');

btn.addEventListener('click', () => {
  msg.textContent = 'こんにちは！見に来てくれてありがとう。';
});

期待する表示： 最初はボタンだけが見えます。ボタンを押すと、すぐ下に「こんにちは！見に来てくれてありがとう。」と表示されます。ページは再読み込みされません。このステップの手順3で書き換えたときは、Console に Cannot read properties of null (reading 'addEventListener') というエラーが出て、ボタンを押しても何も起きません。

JavaScriptが「要素を探す→出来事を待つ→中身を書き換える」の3段階で動く図
JavaScript の基本の3段階：探す（querySelector）、待つ（addEventListener）、変える（textContent）

このコードは3段階で動いています。

  1. 探す： document.querySelector('#hello-btn') で、id="hello-btn" の要素を見つけます。const btn = は「見つけたものに btn という名前を付けて取っておく」という意味です。
  2. 待つ： btn.addEventListener('click', () => { ... }) で、「クリックされたら、{ } の中の処理をする」と登録します。() => { ... } は「あとで実行する処理のまとまり（関数）」の書き方です。
  3. 変える： msg.textContent = '...' で、id="message" の段落の文字を書き換えます。

このガイドでは、<script> を </body> の直前に置き、defer も付けています。defer は「HTML を最後まで読み終えてから、このプログラムを動かす」という指定で、付けておけば、置く場所を変えても同じように動きます。

つまずきやすい点

  • null のエラーは「要素が見つからなかった」という意味です。id のつづりの違いか、defer の付け忘れを疑います。
  • 全角の記号（（ や ；）や全角スペースが混じると動きません。プログラムの部分は半角で書きます。

次へ進む前のチェック

  • ボタンを押すと文字が表示された
  • わざと書き換えて、Console でエラーを見つけ、元に戻した
  • 「探す・待つ・変える」の3段階を説明できる

ここで読む記事

ここまでで覚えておくこと

  • JavaScript の基本は「探す・待つ・変える」
  • defer を付けると、HTML を読み終えてから動く
  • 動かないときは、まず Console のエラーを見る

ステップ7：サーバーとドメインを用意して公開する

このステップのゴール

サーバー（ファイルを置く倉庫）とドメイン（倉庫の住所）を用意し、作ったファイルをアップロードして、https:// で始まる URL で誰でも見られる状態にすることです。

ドメイン名とサーバー会社を決め、サーバーとドメインを一緒に申し込み、HTTPSを有効にし、SFTPでファイルを送って公開するまでの流れの図
公開までの流れ。決める → 一緒に申し込む → HTTPS → SFTP で送る → 確認

7-1 ドメイン名とサーバー会社を決める

やることは3つです。ドメイン名の候補を考える、2〜3社を比べる、1年分の料金を計算する。

公開の場所は、サーバーを月額などで借りる「レンタルサーバー」にします。ドメインは、サーバーと同じ会社で一緒に申し込みます。そのため、申し込む前に、ドメイン名とサーバー会社の両方を決めておきます。

ドメイン名を決めます。 自分だけの名前で取るドメイン（例：my-name.com）を「独自ドメイン」と呼びます。

  1. 名前： example.com の example の部分です。半角の英字・数字・ハイフンで、短く、サイトの内容が分かるものにします。ほかの人が使っている名前は取れないので、候補を2〜3個考えておきます。
  2. 末尾： .com・.net・.jp などです。.go.jp（政府機関）のように使える人が決まっている末尾もあるので、迷ったら .com のように誰でも使える末尾を選びます。
  3. 年数： ドメインは買い切りではなく、1年または数年ごとに使う権利を借りるものです。期限が来たら更新料がかかり、更新しないと使えなくなります。

サーバー会社を選びます。

  1. 「レンタルサーバー 比較」「レンタルサーバー 初心者 料金」などで検索し、候補を2〜3社に絞ります。
  2. 候補の会社の公式サイトの料金表と仕様のページで、次の5つを見比べます。
    • HTTPS（無料の SSL 証明書）が使えるか
    • SFTP でアップロードできるか（仕様のページで「SFTP」「SSH」の語を探す。書いていなければ問い合わせで確かめる）
    • 独自ドメインを一緒に申し込めるか
    • 料金（初期費用・月額・ドメイン代、それぞれ初年度と更新時）と、契約期間・自動更新の有無・解約のしかた
    • 問い合わせ先が日本語か
  3. 5つを満たす会社の中から、1年分の合計が予算に合う会社を選びます。

1年分の料金は、次の式で計算します。 下の金額は計算のしかたを示すための仮の数字で、実際の料金や相場ではありません。

項目 仮の数字 計算
初期費用 0円 0円
サーバーの月額 月500円 500円 × 12か月 ＝ 6,000円
ドメイン代 年1,500円 1,500円
1年目の合計 0円 ＋ 6,000円 ＋ 1,500円 ＝ 7,500円

この例なら、申し込みのときに1年分の7,500円を用意します。2年目からは、公式の料金表で「更新時」の金額を同じ式に入れて計算します。初年度だけ安く、更新時に上がる会社もあるからです。

7-2 サーバーとドメインを一緒に申し込む

  1. サーバー会社の申し込み画面で、プラン（このガイドのサイトなら一番小さいプランで足ります）と契約期間を選びます。契約期間は、7-1 で計算した1年（12か月）にします。意味の分からない有料のオプションは付けません。
  2. 同じ画面の中で、ドメインも申し込みます。7-1 で決めた名前を入れて空いているかを調べ、空いていた名前と末尾を選びます。
  3. 支払い方法を入れて申し込みます。
  4. 届いたメールか管理画面（契約者用のWebページ）で、「SFTP」「FTP」「接続情報」などと書かれた欄を探し、ホスト名（接続先のサーバーの名前。例：sv1234.example-server.jp のような形）、ユーザー名、パスワード、公開用フォルダの名前（例：public_html）を確かめます。公開用フォルダに置いたファイルが公開されます。パスワードは紙やパスワード管理アプリなど人に見られない所に控え、HTML などの公開するファイルには書き込みません。
  5. 数時間〜1日たったら、ブラウザで http://自分のドメイン/ を開きます。

成功かどうかの見分け方： まだファイルを送っていないので、サーバー会社の仮のページや、「403」「ページが見つかりません」などのページが出れば成功です（ドメインとサーバーはつながっています）。ブラウザ自身が「このサイトにアクセスできません」（Chrome）や「このページに到達できません」（Edge）と出す状態は、まだつながっていません。新しいドメインの住所が世界中の DNS に伝わるまでには、数時間かかるとされています。1日待っても変わらなければ、サーバー会社のサポートに問い合わせます。

すでに別の会社でドメインを持っている人だけ読む

ドメインの会社の管理画面で「ネームサーバー」（そのドメインの住所の案内を、どの会社に任せるかの設定）の欄を、サーバー会社が指定する値（ns1.example-server.jp のような名前が2つほど）に書き換えます。ネームサーバーを変えずに、ドメインの会社の DNS の設定で「A レコード」（ドメインと IP アドレスを結ぶ設定）にサーバーの IP アドレスを入れる方法もあります。どちらを使うかは、サーバー会社のマニュアルに従います。

7-3 HTTPS を有効にする

  1. サーバーの管理画面で「SSL」「HTTPS」「無料SSL」といった名前のメニューを開き、自分のドメインを選んで有効（オン）にします。SSL 証明書は、HTTPS を使うために必要な「サイトの身分証」のようなものです。
  2. ブラウザで https://自分のドメイン/ を開きます。

成功かどうかの見分け方： 7-2 の手順5と同じ画面が、https:// の URL で出れば成功です。「この接続ではプライバシーが保護されません」のような警告が出るうちは、まだ有効になっていません。有効になるまでの時間はサーバーによって違うので、1日待ちます。ただし、1日たっても警告が消えなければ、サポートに問い合わせます。

7-4 SFTP ソフトで接続する

  1. サーバー側の準備を確かめます。 サーバーのマニュアルの「SFTP」の項を読み、管理画面で SFTP（SSH）を有効にする設定が要る会社なら、先に有効にします。
  2. SFTP ソフトを入れます。 このガイドでは例として、無料の FileZilla（Windows・Mac 対応）を使います。公式サイト（https://filezilla-project.org/）の「Download FileZilla Client」ボタンから入れます。インストーラーが別のソフトも一緒に入れるかを聞いてきたら、断ります。ほかの SFTP ソフトでも、入れる値は同じです。

FileZilla を開くと、画面の上に入力欄が横に並び、その右端に「クイック接続」ボタンがあります。7-2 で確かめた値を、次のように入れます（下の値は架空の例です）。

欄 入れる値 例
ホスト sftp:// の後にホスト名。sftp:// を付けると SFTP で接続する sftp://sv1234.example-server.jp
ユーザー名 確かめたユーザー名 myname
パスワード 確かめたパスワード （人に見せない）
ポート 接続の入口の番号。マニュアルに書いてある番号（SFTP は多くの場合 22） 22

入れたら、右端の「クイック接続」ボタンを押します。初めての接続では、「サーバーの鍵を信頼するか」を聞く画面が出ます。接続先が本物かを確かめるための、初回だけの確認です。ホスト名が自分のサーバーであることを確かめて「OK」を押します。

FileZillaの画面の模式図。上にホスト・ユーザー名・パスワード・ポートの欄とクイック接続ボタン、左にパソコン、右にサーバーのファイル一覧
FileZilla の画面の模式図（実際の画面とは見た目が違います）。①〜④の欄に入れて⑤で接続し、左から右へドラッグする

成功かどうかの見分け方： 入力欄の下に接続の記録が流れ、画面の右半分に、サーバーの中のフォルダの一覧が出れば成功です。接続できないときは、ホスト名・ユーザー名・パスワード・ポートの打ち間違いと、管理画面で SFTP を有効にする設定が要らないかを確かめます。FTP は暗号化されないので使わず、SFTP を選びます。ただし、サーバーの説明では「FTP」という言葉が SFTP を含めた広い意味で使われることがあるので、ホストが sftp:// で始まっているかを確かめます。

7-5 ファイルを送って確かめる

  1. 練習用のお問い合わせフォームは、送信しても内容がどこにも届きません。index.html の <h2>お問い合わせ</h2> を含む <section> から、その </section> までを消して保存します。消したあとは、「ひとこと」の </section> のすぐ次の行が </main> になります。
  2. FileZilla の右側（サーバー）で、公開用フォルダ（例：public_html）をダブルクリックして開きます。
  3. 左側（パソコン）で、デスクトップの my-site フォルダを開きます。
  4. 左側の my-site の中身（index.html・about.html・css・js・images）を、Ctrl キー（Mac は Command キー）を押しながら1つずつクリックしてまとめて選び、右側へドラッグします。my-site フォルダごと送らないようにします。同じ名前のファイルがあると上書きするかを聞かれるので、「上書き」を選びます。
  5. ブラウザで https://自分のドメイン/ を開きます。

成功かどうかの見分け方： 自分のパソコンで見ていたのと同じ「はじめての自己紹介サイト」が表示され、2ページ目・画像・CSS・JavaScript（あいさつボタン）がすべて動けば成功です。

つまずきやすい点

  • トップページのファイル名は index.html にします。多くのサーバーは、ドメインだけの URL を開いたときに index.html を表示します。
  • 公開用フォルダ以外に置くと、URL を開いても表示されません。
  • 自分のパソコンでは見えるのに、公開すると画像が出ないときは、大文字と小文字の違いを疑います。

次へ進む前のチェック

  • 2〜3社を5つの観点で比べ、1年分の料金を計算してから申し込んだ
  • http://自分のドメイン/ で、ブラウザの「アクセスできません」が出なくなった
  • https://自分のドメイン/ で、警告が出ずに開けた
  • FileZilla などで SFTP 接続し、my-site の中身を公開用フォルダに送った
  • https://自分のドメイン/ で、全ページと画像・CSS・JavaScript が動いた

ここで読む記事

ここまでで覚えておくこと

  • 先にドメイン名とサーバー会社を決め、一緒に申し込む
  • 順番は「決める → 申し込む → HTTPS → SFTP で送る → 確認」
  • 送るのは my-site の中身。置き場所は公開用フォルダ

ステップ8：公開後の確認（表示・速度・検索・安全）

このステップのゴール

公開したサイトを、スマホとパソコンで確認し、表示速度と検索に出るための基本、安全の基本をチェックすることです。

表示速度の目安には、Google が示す Core Web Vitals（ページの使いやすさを測る3つの数字）があります。

指標 何を測るか 良いとされる目安
LCP 一番大きな画像や文章が表示されるまでの時間 2.5秒以内
INP ボタンを押すなどの操作への反応の速さ 200ミリ秒（0.2秒）未満
CLS 読み込み中に画面がずれる量。単位の無い点数で、小さいほど良い 0.1未満

やること

  1. 表示： 自分のスマホで https://自分のドメイン/ を開き、すべてのページ・リンク・画像を確かめます。パソコンでも、ふだんと別のブラウザで見ます。
  2. 速度： 次の3つを順に行います。
    • Google の PageSpeed Insights（https://pagespeed.web.dev/。無料で表示速度を測るWebサービス）に公開 URL を入れて「分析」を押します。
    • 結果の上の「実際のユーザー エクスペリエンス」の欄は、公開したばかりのサイトでは、利用者のデータが足りず数字が出ないのが普通です。その下の、Lighthouse（決まった条件のスマホやパソコンで読み込んだと仮定して測る仕組み）の診断の欄で、LCP と CLS を上の表の目安と比べます。INP は実際の操作が必要な数字なので、この欄には出ません。今回は見なくてかまいません。
    • LCP が 2.5秒より遅いときは、画像を縮めます。Windows の「ペイント」や Mac の「プレビュー」の「サイズ変更」で、横幅を表示する大きさの2倍（このガイドの写真なら 640px。px は画面の点の数）くらいまで縮め、同じ名前で保存して送り直します。
  3. 検索： 各ページの <title> と <meta name="description" content="…">（検索結果の説明文に使われることがある紹介文）を、ページごとに違う内容にします。about.html には description の行が無いので、index.html の <meta name="description" …> の行を about.html の <head> に写し、文章を変えます。
  4. 安全： URL が https:// で開けること、SFTP で更新していること、公開したファイルにパスワードを書いていないことを確かめます。
  5. 直したら、もう一度アップロードして確認します。 古い表示のままなら、キャッシュ（前に受け取ったファイルの使い回し）の影響なので、再読み込みします。
やってもよいこと：Google Search Console に登録する（任意）

Google Search Console（https://search.google.com/search-console/about）は、Google が無料で提供する、自分のサイトが検索でどう見えているかを確かめる道具です。登録しなくても検索結果には出ますが、Google がページを見つけたかを確かめられます。

  1. Google アカウントでログインし、「プロパティを追加」（ここでのプロパティは登録するサイトのことで、CSS のプロパティとは別物）を選びます。
  2. 2つの入力欄のうち「URL プレフィックス」（URL の先頭で登録する方式）の欄に https://自分のドメイン/ を入れます。
  3. 所有者だと確かめる方法は、HTML ファイルのアップロードが簡単です。表示されたファイルをダウンロードし、FileZilla で公開用フォルダに送ってから、Search Console の画面に戻って「確認」を押します。ただし、ファイルを消すと確認が外れるので、送ったファイルは残しておきます。
  4. 所有権を確認できた旨が表示されれば完了です。

つまずきやすい点

  • 公開してすぐに検索しても出てこないのは、よくあることです。検索エンジンが見つけて登録するまでには時間がかかります。
  • すべてのページで同じ <title> にするのは避けます。どのページか区別できなくなります。

次へ進む前のチェック

  • スマホとパソコンで、すべてのページとリンクを確認した
  • PageSpeed Insights の Lighthouse の LCP と CLS を目安と比べ、遅ければ画像を縮めた
  • index.html と about.html に、違う <title> と description を書いた
  • https:// で開け、公開したファイルにパスワードを書いていない

ここで読む記事

  • 表示速度の確認方法｜PageSpeed Insightsの見方
    PageSpeed Insights の見方と、まず直すところです。
  • SEOの基本と公開前チェックリスト【ホームページ制作入門 第9回】（近日公開）
    SEO の基本と、公開前のチェックリストです。

ここまでで覚えておくこと

  • 公開後は「表示 → 速度 → 検索 → 安全」の順で確認する
  • Core Web Vitals の目安は LCP 2.5秒以内・INP 0.2秒未満・CLS 0.1未満
  • 検索に出るまでには時間がかかる。題名と中身を分かりやすくするのが基本

用語ミニ辞典

本文で分からない言葉が出たら、ここで確かめます。

用語 やさしい言い換え 一言の例
タグ HTMLの印。< と > で囲む <p> は段落の始まり、</p> は終わり
属性 タグに付けるおまけの情報 <img src="photo.png"> の src
拡張子 ファイル名の最後の「.」から後ろ。ファイルの種類を表す .html、.css、.png
UTF-8（文字コード） 文字をファイルに保存するときの形式の一つ。これで保存すると日本語が文字化けしない エディタの画面右下に「UTF-8」と出る
パス／相対パス ファイルの場所の書き方。今のファイルから見た道順で書くのが相対パス images/photo.png
サーバー Webサイトのファイルを置いておき、見に来た人に渡すコンピュータ ファイルの倉庫兼、受付係
ドメイン Webサイトの住所（名前） example.com
IPアドレス コンピュータの数字の住所 192.0.2.1 のような数字
DNS ドメイン名から IPアドレスを調べる仕組み。ドメインの電話帳 「example.com はどこ？」に答える
HTTPS ブラウザとサーバーの会話を暗号化する仕組み URL が https:// で始まる
SFTP パソコンからサーバーへファイルを送る方法のうち、暗号化されるもの ファイルを倉庫へ運ぶ、鍵付きのトラック
キャッシュ ブラウザが前に受け取ったファイルを取っておき、使い回すこと 直したのに古い表示のまま、の原因
要素 開始タグから終了タグまでのひとまとまり <p>こんにちは</p> 全体
px（ピクセル） 画面の点の数を表す大きさの単位 スマホの画面の幅はおよそ 360〜430px
独自ドメイン 自分だけの名前で取ったドメイン my-name.com
class HTML の部品に付ける名前。CSS で .名前 と書くと、その部品に見た目を当てられる <div class="cards"> と .cards
ネームサーバー そのドメインの住所の案内を、どの会社に任せるかの設定 ns1.example-server.jp
SSL 証明書 HTTPS を使うために必要な、サイトの身分証のようなもの 管理画面で無料で設定できることがある
ポート番号 接続の入口の番号 SFTP は多くの場合 22

よくある失敗と回避のしかた

よくある失敗 起きること 回避のしかた
ファイル名に大文字・日本語・空白を使う 公開すると画像やページが表示されない 半角小文字、区切りはハイフンにする
画像のパスを間違える 画像の場所にアイコンと代わりの文章だけが出る 開いている HTML から見た道順で書く
料金を初年度だけで比べる 2年目から高くなる 更新料と解約のしかたまで確認する
全部覚えてから作ろうとする 進まずに挫折する 小さなページを作りながら、必要なときに調べる

困ったときの相談先

Web制作の技術の質問に、公的機関が個別に答える窓口はありません。技術の疑問は、公式の解説で調べるのが基本です。ただし、契約やセキュリティのトラブルには、公的な相談窓口があります。

相談先 何を相談できるか
契約したサーバー・ドメインの会社のサポート 接続方法、公開用フォルダ、HTTPS の設定など、そのサービス固有のこと
消費者ホットライン「188」（消費者庁） サーバーやドメイン、制作サービスの契約・解約・料金のトラブル。近くの消費生活センターなどにつながります
IPA（情報処理推進機構）情報セキュリティ安心相談窓口 サイトの改ざんやウイルスなど、情報セキュリティの技術的な相談

受付時間や方法は、最新を各公式ページで確認してください。

次に読む記事（カテゴリ別）

「（近日公開）」が付いた記事は、公開日までリンクが無い文字だけの表示です。このガイドは、それらを読まなくても最後まで進められるように書いています。

このガイドを終えたら、最初に読む3本

カテゴリ別の記事一覧（必要になったら開く）

HTML

CSS

JavaScript

Webデザイン・アクセシビリティ

  • コントラスト比とは｜WCAG基準と配色の決め方（近日公開）
    読みやすい配色のためのコントラスト比です。

開発環境・公開

よくある質問（FAQ）

Q. HTMLサイトを作るのに、お金はかかりますか？
A. ステップ1〜6は無料のエディタとブラウザだけで進められます。お金がかかるのは、ステップ7のサーバーとドメインです。ただし、料金は会社によって大きく違うので、このガイドでは実際の金額を書かず、7-1 で1年分の計算のしかたを示しています。

Q. HTMLとCSSはどちらから勉強すればいいですか？
A. HTML からです。CSS は HTML で作った部品に見た目を付けるものだからです。ただし、HTML を完璧に覚えてから進む必要はありません。

Q. プログラミングの経験がなくても大丈夫ですか？
A. 大丈夫です。HTML と CSS は、文書に印と飾りを付ける言葉です。ただし、ステップ6の JavaScript からはプログラムになるので、少しずつ進めます。

Q. コードを写しただけで、次に進んでいいのですか？
A. 進んでかまいません。各ステップのチェックは、写したコードが動き、少し書き換えて変化を確かめられれば合格です。何も見ずに書けるようになるのは、自分のサイトを作り込む中で自然に身につきます。

Q. サーバーの契約で気をつけることは？
A. 契約期間、自動更新の有無、解約のしかた、更新時の料金の4つを、申し込む前に確かめます。トラブルになったときは、消費者ホットライン「188」に相談できます。

Q. 縦長の写真を入れたら、つぶれて表示されました。
A. ステップ3の時点では width="320" height="200" の形で表示されるので、つぶれて見えるのは正常です。ステップ4の CSS（img { max-width: 100%; height: auto; }）を入れると、元の形に戻ります。

Q. 拡張子を .jpeg から .jpg に変えたら、警告が出ました。
A. 「拡張子を変更すると、ファイルが使えなくなる可能性があります」といった確認です。.jpeg と .jpg は同じ種類の画像なので、「はい」を選んでかまいません。

Q. 作ったサイトを、あとから直すにはどうしますか？
A. パソコンの my-site の中のファイルを直して保存し、直したファイルだけを FileZilla でもう一度送ります。ただし、サーバーの上のファイルを直接書き換えると、パソコンの控えと食い違うので避けます。

Q. WordPressとHTMLサイトは、どちらがいいですか？
A. 数ページで更新が少ないなら HTML で十分です。ただし、お知らせやブログを頻繁に足すなら、WordPress のような更新しやすい仕組みが向いています。

Q. Vue.jsなどのフレームワークは、いつ勉強すればいいですか？
A. HTML・CSS・JavaScript の基本（このガイドのステップ6まで）ができてからです。このガイドを終えたら、Vue.js ステップガイド に進むのがおすすめです。

出典と注意事項

このガイドは、2026年10月時点で公式の資料を確認して書いています。Web の技術や各サービス・ソフトの画面・仕様・料金は変わることがあるので、最新は公式で確認してください。コード例は、筆者が Microsoft Edge で表示と動作を確認したものです。サービスやソフトの名前は説明のための例で、特定の事業者や製品をすすめるものではありません。このガイドは一般的な情報の提供であり、個別の契約や設計についての助言ではありません。

参照した主な一次情報（公式の資料）は次のとおりです。

ホーム
タイトルとURLをコピーしました