HTMLサイトをサーバーへ公開する

1. 公開前にフォルダの中身を確認する

HTML、CSS、画像は、それぞれの位置関係を保ったままサーバーへアップロードします。Template 001では次のような構成です。

my-site/
├─ index.html
├─ about.html
├─ service.html
├─ works.html
├─ access.html
├─ contact.html
├─ css/
│  └─ style.css
└─ images/
   └─ 画像ファイル

2. 公開にはWebサーバーが必要です

レンタルサーバーなどを契約すると、ホームページファイルを置く公開用フォルダが用意されます。サーバー会社によって名称は異なりますが、指定された公開先へアップロードします。

サーバーの管理画面にファイルマネージャーがある場合はブラウザからアップロードできることもあります。FTP/SFTPソフトを使う方法も一般的です。

3. フォルダ構成を崩さずアップロードする

css や images フォルダの中身だけを別の場所へ移すと、デザインや画像が表示されなくなります。パソコン上の構成を保ったままアップロードします。

4. 公開URLへアクセスする

アップロード後、ブラウザで自分のドメインへアクセスします。公開フォルダ直下に index.html が正しく置かれていれば、トップページとして表示されるのが一般的です。

5. よくある公開トラブル

CSSが効かず文字だけ表示される

css/style.css の場所やファイル名がHTMLの指定と一致しているか確認します。

画像が表示されない

大文字・小文字、拡張子、images/ の位置を確認します。

トップページが開かない

index.html が公開フォルダ直下にあるか確認します。

修正したのに古いまま

アップロードしたファイルが正しいか確認し、ブラウザを再読み込みします。必要に応じてキャッシュも確認します。

6. 公開前に個人情報・サンプル情報を確認する

電話番号、メールアドレス、住所、サンプル会社名などが残っていないか全ページを確認します。また、編集用のバックアップファイルや不要なメモを公開フォルダへ置かないようにします。

7. 公開後の最終チェック

• トップページが表示される
• すべてのメニューリンクが開く
• CSSと画像が正常に表示される
• PCとスマートフォンでレイアウトを確認した
• 電話番号・メール・住所にサンプル情報が残っていない
• HTTPSで正常に表示できる