Step 05: 保存してローカル確認する

Webbieより

保存はただの作業ではありません。

どこに保存するか、どの名前で保存するか、どう確認するか。ここが整理されているだけで、ホームページ制作はかなり落ち着きます。

このステップでやること

Step 05 では、次のことを行います。

HTML ファイルを正しいフォルダへ保存する
site.css と site.js を共通場所へ保存する
画像ファイルを images フォルダへ入れる
ブラウザで開いて表示を確認する
リンクや画像のつながりを確認する

つまり、「ファイルがある」だけでなく、 正しい場所にあり、実際に動くことを確認する段階です。

基本の考え方

まず保存。次に確認。公開はそのあとです。

この順番を守るだけで、サーバー上で慌てることがかなり減ります。

まずはフォルダ構成を整える

ここでは、すでに Step 03 で決めたファイルツリーを使います。たとえばローカル側では、こういう形が理想です。

C:\website\
├── index.html
├── site.css
├── site.js
├── images\
├── en\
│   ├── index.html
│   ├── about.html
│   ├── faq.html
│   ├── training\
│   └── tools\
└── ja\
    ├── index.html
    ├── about.html
    ├── faq.html
    ├── training\
    └── tools\

ここで大事なのは、「どこでもいいから保存」ではなく、 最初に決めた場所へ保存することです。

共通ファイルは上の階層に置く

site.css と site.js は、サイト全体で使う共通ファイルです。だから、たいていはサイトのルートに置きます。

C:\website\site.css
C:\website\site.js

こうしておけば、日本語ページでも英語ページでも共通で使いやすくなります。

注意

ページごとにCSSをバラバラに増やしすぎない方が強いです。

共通のスタイルはできるだけ site.css にまとめておく方が、後で全体を直すときにずっと楽です。

HTML ファイルの保存例

たとえば、英語トレーニングページなら:

C:\website\en\training\step-01-build-locally-first.html

日本語ツールページなら:

C:\website\ja\tools\putty-basics.html

というように、決めたファイル名・決めた場所へ保存します。

画像ファイルの保存例

画像はまとめて images フォルダへ入れるとわかりやすいです。

C:\website\images\
├── make-website-hero-main.jpg
├── webbie-icon-square.jpg
├── webbie-pointing.jpg
├── website-workflow-diagram.jpg
├── website-local-preview.jpg
└── website-winscp-files.jpg

画像が1か所にまとまっていると、あとでアップロードも URL 管理もしやすくなります。

保存したら、必ずブラウザで開いて確認する

ここがとても大事です。ファイルを保存しただけでは不十分です。実際にブラウザで開いて、見た目とつながりを確認します。

保存した HTML ファイルを開く
ページが表示されるか確認する
CSS が効いているか確認する
画像が見えているか確認する
リンクが正しいか確認する

つまり、「ファイルがある」から一歩進んで、「本当に動いている」を確かめるのがこのステップです。

何をチェックすればよいですか？

確認項目	見るポイント
ページタイトル	ブラウザのタブ名が正しいか
見出し	ページ内容と合っているか
CSS	文字や余白やボタンが整っているか
画像	ちゃんと表示されるか
リンク	押した先が正しいか
全体の印象	読みやすく、落ち着いているか

ローカル確認で見つけやすい問題

この段階で見つかることが多い問題は、たとえば次のようなものです。

CSS ファイルの読み込みパスが違う
画像のファイル名が間違っている
リンク先のページ名が違う
保存場所が違う
見出しや説明文がまだ弱い

こうした問題は、公開前なら落ち着いて直せます。だからローカル確認が大事なのです。

実務のポイント

問題が見つかるのは良いことです。

ローカルで見つかる問題は、公開前に直せる問題です。むしろここで見つけた方が安全です。

簡単な確認用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="/site.css">
</head>
<body>
  <main>
    <h1>確認用ページ</h1>
    <p>まずはローカルで正しく表示されるかを確認します。</p>
  </main>
  <script defer src="/site.js"></script>
</body>
</html>

実際のローカル確認では、環境によっては相対パスを使うこともあります。でも今ここで大事なのは、「共通ファイルとページがつながっているか」を確認することです。

ローカルで確認するときのおすすめ手順

1ページだけ保存する

まずは少数ページから始める方が整理しやすいです。

ブラウザで開く

本当に表示されるかを確認します。

問題を見つける

パスや画像や文章の弱さに気づきます。

修正する

まだ公開していないので、落ち着いて直せます。

次のページへ進む

1ページずつ積み上げる方が、全体が崩れにくいです。

ここでの一番大きな学び

このステップは単なる「保存」ではありません。実は、ここで次の感覚が身につきます。

ファイルがどこにあるか意識する感覚
ページ・CSS・画像の関係を理解する感覚
作ってすぐ確認する習慣
公開前に整える落ち着き

これがあると、あとでサーバー作業に進んでもずっと落ち着きます。

よくある失敗

1. ファイルを決めた場所に保存しない

後で整理しようと思っても、だいたい散らかりやすいです。

2. 保存しただけで満足してしまう

まずはブラウザで開いて、本当に動くかを見ることが大事です。

3. 画像を別々の場所へ置く

画像が散ると、あとでアップロードやURL管理が大変になります。

4. 共通ファイルをページごとに分散させる

site.css や site.js はできるだけ共通で持つ方が整理されます。

5. 多数ページを一気に作って確認しない

最初は少数ページずつ確認して進む方が安全です。

大事な考え方

ローカル確認は、公開前の最終調整ではなく、制作そのものです。

この確認を飛ばさないことで、サイト全体がずっと安定します。

このステップのゴール

Step 05 のゴールは、次の状態になることです。

HTML ファイルが正しい場所に保存されている
site.css と site.js が共通位置にある
画像が images フォルダに整理されている
ブラウザでローカル確認できる
パスや表示の問題に気づける

実務の考え方

保存して確認することは、公開の前提条件です。

ファイルがあるだけでは足りません。正しい場所にあり、正しく表示されることが大事です。

最小チートシート

このステップでやること:
- HTML を正しい場所へ保存
- site.css / site.js を共通位置へ保存
- 画像を images フォルダへ保存
- ブラウザで開く
- 表示・画像・リンクを確認する

保存だけでは不十分
必ずローカル確認までやる

確認

この6つができれば次へ進めます。

完了: 0/6

HTML を正しいフォルダへ保存できる

site.css と site.js を正しい場所へ置ける

画像を images フォルダへ整理できる

ブラウザでローカル確認できる

画像やリンクの問題に気づける

まず保存、そのあと確認、の順番を守れる

次のステップ 次は、作った画像を必要なタイミングでサーバーへアップロードする考え方を学びます。

次へ: Step 06 画像を準備できたらアップロード