HTMLの公開方法｜無料サーバーへアップロードして世界に公開する手順

著者: FreeHostBox Web Academy 編集部公開日: 2026-09-02 最終更新: 2026-09-09

要点: 書いたHTMLを無料サーバーで公開する手順を解説。ファイルマネージャーとFTPの両方式、index.htmlの置き場所、よくある404の直し方まで実践的に案内します。

この記事でできること

書いたHTML（例: index.html）を無料サーバーに置いて世界に公開できます。完成形は、配布されたURL（無料サブドメイン等）を開くと自分の1ページが https:// の鍵マーク付きで表示される状態です。作業時間の目安は初回30〜45分、2回目以降10〜15分です。

前提の用語はHTMLとは、置き場所の概念はWebサーバーとはで確認できます。全体手順に戻りたい場合はWebサイトの作り方が地図になります。運び方の基礎はHTTPとは、暗号化はSSLとはで扱います。

注意: 管理画面の表示に従って進めてください。

index.html を公開フォルダ直下に置いてURLで開ける
404・文字化け・旧表示の切り分けができる
https:// の鍵マーク付きで表示できる
更新→上書き→再読み込みの往復を回せる

必要なもの

index.html（文字コードUTF-8、ファイル名は半角小文字、トップはこの名前）
画像を使う場合は img/photo.jpg 等（事前に軽量化し、相対パスで参照）
FreeHostBoxアカウント（無料。無料サブドメイン＋独自ドメイン持ち込み、無料SSL、広告なし、FTP・オンラインファイルマネージャーをご用意しています。ぜひ無料プランでお試しください）
ブラウザ（ファイルマネージャー方式）またはFTPソフト（FTP方式。例: FileZilla、WinSCP、Cyberduckなど）
配布されたURLと管理画面への入り方（申込時の案内を控える）

ファイルの事前確認は3点です。エディタの保存形式がUTF-8であること、<meta charset="UTF-8"> とviewportが入っていること、画像パスが img/photo.jpg のような相対参照であることです。書き方の基礎はHTMLとはで補強できます。FTP情報（ホスト・ユーザー・パスワード）は安全に保管し、公共PCでの保存は避けてください。

全体手順：2方式の地図

公開作業は「置く→開く→直す」の3区間です。置き方に2方式があり、どちらを選んでも到達点は同じです。

方式	操作場所	手順の要点	向く人
A: ファイルマネージャー	ブラウザ上の管理画面	公開フォルダへ移動→アップロード→URL確認	初心者・少量・初回公開
B: FTP	PCの専用ソフト	接続→公開フォルダへ移動→転送→URL確認	大量・継続更新・外部エディタ連携

共通の確認先は配布されたURL（無料サブドメイン等）です。公開後にSSL/HTTPS設定手順で常時HTTPS化し、独自ドメインへ育てる場合は独自ドメイン設定へ進みます。住所の考え方はドメインとは、裏側の伝播はDNSとはで扱います。

転送の流れは「自分のPC（index.html＋img・css）→ファイルマネージャーまたはFTPで転送→サーバーのpublic_html/index.html→ブラウザで配布URLを開いて確認→HTTPS化・独自ドメインへ拡張」となります。管理画面の表示に従って進めてください。

公開フォルダの名称は public_html や htdocs など環境で異なります。本記事では代表例として public_html と書きますが、管理画面の表示に従って進めてください。

手順A：ファイルマネージャーで公開（初心者向け・6ステップ）

ブラウザだけで完結する方法です。初回公開や1〜3ファイルの修正に向きます。

管理画面（コントロールパネル）にログインする: 申込時の案内に沿って入ります。ID・パスワードの保管場所を決め、使い回しを避けます。
ファイルマネージャーを開く: 管理画面内のファイル操作項目を探します。「ファイル」「公開」などの文言を手がかりにしてください。
公開フォルダへ移動する: 案内表示の public_html 等を開きます。一つ上のホーム直下に置くと404になるため、階層をよく確認します。
index.html をアップロードする: 手元の index.html を選択して転送します。画像がある場合は img/ フォルダを作ってから photo.jpg を入れます。新規作成機能がある場合は貼り付けでも構いませんが、文字コードはUTF-8を選びます。
配布されたURLを開いて確認する: 無料サブドメイン等のURLをブラウザで開きます。表示されない場合は次章のエラー表へ進みます。古い表示のままなら強制再読み込み（WindowsはCtrl+F5、macOSはCmd+Shift+R）を試します。
HTTPS化して再確認する: SSL/HTTPS設定手順に沿って有効化し、https:// で鍵マークが出ること、画像が欠けていないことを確認します。

配置の正解例は次の通りです。index.html は直下、画像とCSSは下層に分けます。

public_html/                 ← 公開フォルダ（管理画面の表示に従う）
├── index.html               ← https://配布URL/ として表示
├── about.html               ← 2ページ目（ある場合）
├── img/photo.jpg            ← <img src="img/photo.jpg"> に対応
└── css/style.css            ← <link href="css/style.css"> に対応

手順B：FTPで公開（継続更新向け・7ステップ）

パソコンでファイルを転送するイメージ — FTPでは公開フォルダへファイルを転送する

専用ソフトで転送する方法です。大量ファイルや頻繁な更新に向きます。外部エディタで保存→転送→再読み込みの往復が速くなります。

管理画面でFTP情報を確認する: ホスト名・ユーザー名・パスワード・ポート・暗号化方式の案内を確認します。FTPS等のセキュアな方式の案内がある場合はそちらを優先します。
FTPソフトに情報を入力して接続する: 初回は手入力し、保存は自分のPCに限ります。公共PCでの保存は避けます。接続できない場合はホスト綴りとパスワードの前後空白を疑います。
サーバー側で公開フォルダへ移動する: 右ペイン（サーバー側）で public_html 等を開きます。左ペイン（PC側）で index.html のあるフォルダを開きます。
index.html を転送する: ドラッグ＆ドロップまたは転送操作で送ります。画像がある場合は img/ ごと送ります。転送モードは自動（テキストはASCII、画像はバイナリの自動判別）で構いません。
ブラウザでURLを開いて確認する: 配布URLで表示確認します。404なら置き場所とファイル名の大文字小文字を疑います。
更新時は上書き転送＋再読み込みで反映する: 編集→上書き→強制再読み込みの往復です。キャッシュで古いままに見える場合はシークレットウィンドウで確認します。
HTTPS化して仕上げる: 手順Aと同様にSSL/HTTPS設定手順で有効化し、混在がないか確認します。

FTPの失敗で多いのは、公開フォルダの一つ上に置く事例、拡張子の重複（index.html.txt）、大文字小文字の不一致（Photo.JPG と photo.jpg）です。転送ログ（成功・失敗の一覧）を毎回確認する習慣が復旧を速めます。詳しい概念はWebサーバーとはのFTP節でも扱います。

コード全文：公開前の最小チェック用HTML

公開前に丸ごと使える最小全文です。HTMLとはの骨格に沿い、UTF-8とviewportを含みます。ファイル名は index.html にします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="公開テスト用の1ページです。">
<title>公開テスト</title>
<style>
  body { font-family: system-ui, sans-serif; line-height: 1.8; margin: 0; color: #222; }
  main { max-width: 720px; margin: 0 auto; padding: 16px; }
  img { max-width: 100%; height: auto; }
</style>
</head>
<body>
<main>
<h1>公開できました</h1>
<p>この文字が見えれば成功です。次は自分の紹介文に書き換えます。</p>
<img src="img/photo.jpg" alt="テスト画像（置かない場合はこの行を消す）" width="640" height="360">
<p><a href="about.html">2ページ目の例へ（ない場合はこの行を消す）</a></p>
<p><small>最終更新日：2026-09-09</small></p>
</main>
</body>
</html>

画像を使わない場合は <img ...> の1行を消して保存します。2ページ目がない場合は about.html へのリンク行を消します。消さずに残すと404の原因になります。CSSを別ファイル化する場合は <style>〜</style> を css/style.css に移し、head内に <link rel="stylesheet" href="css/style.css"> を置きます。

# http → https へ統一したい場合の考え方（Apache系の例・適用前に必ずバックアップ）
# .htaccess に記述する例であり、環境で書式が異なる場合がある。管理画面に転送設定がある場合はそちらを優先する。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

上記はHTTPS統一の代表例です。301 の恒久転送で http を https へ誘導します。.htaccess の書式ミスは500の原因になるため、変更前は必ず原本を保存し、1行ずつ反映して直後に表示確認します。管理画面にSSL・転送の項目がある場合は、ファイルを直接書くよりそちらを使う方が安全です。転送の意味自体はHTTPとはの状態コード表で確認できます。

エラーと解決方法：7行の早見表

公開前後に頻出する7症状を表にまとめます。HTTPとはの状態コードと対応付けて読みます。

症状	確認順	対処
404 Not Found（ページ全体）	URL綴り→置き場所→ファイル名	大文字小文字・階層・拡張子を修正。公開フォルダ直下か確認。`index.html.txt` になっていないか見る
404（一部画像のみ）	パス→ファイル名→配置	相対パス（`img/photo.jpg`）と `img/` 階層、`.jpg` と `.jpeg` の混同を確認
文字化け	保存形式→meta→転送	UTF-8で保存し直し、`<meta charset="UTF-8">` を確認。Word保存を使わない
古い表示のまま	キャッシュ→転送成否→CDN	強制再読込、シークレット確認、FTPログで上書き成否を確認
鍵マークが出ない・混在警告	SSL状態→内部リンク→転送設定	SSL/HTTPS設定手順で有効化し、`http://` 呼び出しを相対パスか `https://` に直す
FTP接続できない	ホスト→ユーザー→パスワード→方式	綴り・前後空白・ポート・暗号化方式の案内を見直す。公共PC設定を持ち込まない
独自ドメインで開けない	綴り→NS・レコード→浸透待ち	独自ドメイン設定とDNSとはで確認し、旧URLを残して待つ

404の9割は綴り・場所・名前の3点です。開発者ツール（F12→Network）で要求URLを確認し、サーバー上の配置と一文字ずつ見比べると速くなります。500が出たら静的範囲を超えてPHPや .htaccess を触っていないか振り返り、PHPの動かし方の切り分けへ進みます。

公開前のチェックリストと注意点

仕上げの確認9項目と注意点5つをまとめます。チェック後に拡張へ進みます。

チェックリスト

index.html が公開フォルダ直下にあり、配布URLで開ける
ファイル名は半角小文字で、大文字小文字の不一致がない
UTF-8保存＋ <meta charset="UTF-8"> ＋viewportが入っている
画像は軽量化済みで、相対パスで表示される
内部リンクに http:// 混在がなく、不要な about.html 空リンクがない
https:// で鍵マークが出る（SSL/HTTPS設定手順で確認）
スマホ表示を確認し、横スクロールがない
FTP情報を安全に保管し、公共PCに残していない
更新日・連絡先を明記した

注意点

巨大画像のまま置かない: 事前に縮小・圧縮します。スマホ撮影の数MBファイルをそのまま転送すると表示が遅くなります。
独自ドメインは後付け可能: 最初は無料サブドメインで練習が安全です（ドメインとは）。公開物が固まったら独自ドメイン設定で追加し、旧URLから恒久転送します。
公開と同時にHTTPS化する: 後回しにすると混在修正が増えます（SSLとは）。
上書きミスに備える: 更新前は手元の原本を残します。特に .htaccess やPHPを触る場合は必須です。
画面名は目安として読む: 本手順は一般化した表現に留めます。管理画面の表示に従って進めてください。

拡張の選択肢	やること	対応記事
住所の強化	独自ドメイン追加・転送統一	独自ドメイン設定
信頼の強化	常時HTTPS・連絡先明記	SSL/HTTPS設定手順
動的化	フォーム・WordPress・DB連携	PHPの動かし方／WordPressの始め方／データベースの作り方

次に読む記事・よくある質問・出典

公開後の拡張順路と6問のFAQ、出典をまとめます。詰まった箇所から読み返せます。

次に読む記事

SSL/HTTPS設定手順 — 警告なく公開するために必須の仕上げです。
独自ドメイン設定 — 育ってきたら住所を強化します。
PHPの動かし方 — 動的化への第一歩です。フォーム受付の入口になります。
HTMLとは — 書き方に戻って基礎を固めます。
Webサイトの作り方 — 全体地図に戻り、改善の回し方を確認します。
Webサーバーとは — 公開フォルダやFTPの概念を補強します。
無料レンタルサーバーとは — 公開場所の選び方と上限の考え方です。

よくある質問

Q. index.htmlはどこに置きますか？ A. 公開フォルダ（public_html や htdocs など、管理画面の案内に従う）の直下です。トップページとして自動表示されます。管理画面の表示に従って進めてください。

Q. FTPとファイルマネージャーはどちらがよいですか？ A. 少量・初心者はファイルマネージャー、大量・継続更新はFTPが効率的です。FreeHostBoxでは両方をご用意していますので、ぜひ無料プランでお試しください。

Q. 404が出たらどう直しますか？ A. URL綴り→置き場所→ファイル名の大文字小文字の順に確認します。本文のエラー表の通り、9割はこの3点で解決します。

Q. 更新が反映されないときはどうしますか？ A. 強制再読み込み、シークレットウィンドウ、FTP転送ログの順に確認します。CDNやブラウザのキャッシュが原因の大半です。

Q. 独自ドメインは後から付けられますか？ A. 可能です。最初は無料サブドメインで練習し、固まったら追加します。浸透待ちの間は旧URLを残し、移行後に転送で統一します。詳しくは独自ドメイン設定で扱います。

Q. HTTPS化は必須ですか？ A. 新規サイトは常時HTTPSが標準です。無料SSLを有効化し、混在を残さないことが要点です。手順はSSL/HTTPS設定手順で確認してください。

出典

WHATWG HTML Standard、MDN Web Docs（HTML・HTTP基礎）
IETF RFC 9110〜9111（HTTP Semantics・Caching）
無料プランの内容は料金ページをご覧ください。分からなければ私たちがサポートします。まずは無料プランで実際に触って確かめてみてください。

よくある質問

index.htmlはどこに置く？

公開フォルダ（public_htmlやhtdocsなど、管理画面の案内に従う）の直下に置きます。トップページとして自動表示されます。管理画面の表示に従って進めてください。

FTPとファイルマネージャーどちらが良い？

少量・初心者はファイルマネージャー、大量・継続更新はFTPが効率的です。FreeHostBoxでは両方をご用意していますので、ぜひ無料プランでお試しください。

404が出たら？

ファイル名の大文字小文字、置き場所、URLの綴りを順に確認します。9割はこの3点で解決します。詳しくは本文のエラー表を参照してください。

更新が反映されないときは？

ブラウザやCDNのキャッシュが原因の大半です。強制再読み込み、シークレットウィンドウ、FTP転送ログの順に確認します。

独自ドメインは後から付けられる？

可能です。最初は無料サブドメインで練習し、公開物が固まったら独自ドメインを追加します。浸透待ちの間は旧URLを残します。

HTTPS化はどのタイミングでする？

公開と同時に行います。無料SSLを有効化し、内部リンクのhttp混在を除去して常時HTTPSにします。

更新履歴: 公開 2026-09-02 / 最終更新 2026-09-09。技術仕様・対応バージョンは変更されるため、重要な設定は公式ドキュメントも併せて確認してください。

書いたHTMLを無料で公開する

ファイルができたらFTPかファイルマネージャーでアップロードするだけです。独自ドメインは後からで大丈夫です。

公開手順を読む他の記事を探す