広告：この記事にはアフィリエイト広告が含まれます。
HTMLとCSSでページが完成したら、次はURLで共有してみましょう。この記事では、静的なWebページをレンタルサーバーに公開する流れと、公開後に画像やCSSが表示されないときの確認方法を説明します。
練習用のページがまだない方は、カフェのお知らせページを作るHTML・CSS課題から始めてください。
公開前に決めること：練習の共有か、独自ドメインでの運用か
短期間の練習作品を共有するだけなら、静的サイトを公開できる無料サービスも選択肢です。すでにレンタルサーバーを契約している場合は、その契約で別のフォルダに公開できるかを確認しましょう。新しく契約する必要があるとは限りません。
独自ドメインで長く運用する場合は、ドメイン代とサーバー代に加えて、更新時の料金、SSLの利用条件、バックアップの有無を比較します。初年度の安さだけでは継続費用は判断できません。サーバー契約にドメイン特典が含まれる場合は、別途購入する前に対象と条件を確認してください。
1．ファイルとフォルダを整理する
たとえば「mori-cafe」フォルダの中にindex.htmlを置き、その中のcssフォルダにstyle.css、imagesフォルダにcafe.jpgを保存します。HTMLからは「css/style.css」「images/cafe.jpg」のように、公開時も同じ位置関係になるパスを指定します。
- トップページのファイル名をindex.htmlにする。
- ファイル名の大文字・小文字をリンク先と一致させる。
- 自分のパソコンだけで使えるCドライブのパスやfile://のURLを使わない。
- 必要な画像、CSS、JavaScriptをまとめる。個人情報やパスワードを含むファイルは入れない。
パスの指定に迷ったら、リンク・パスの練習問題で、ファイルから見た位置関係を確認しましょう。
2．サーバーの公開フォルダを確認する
管理画面のファイルマネージャー、またはFTPなどの接続方法でファイルを送ります。公開フォルダの名前や接続方法はサービスによって異なるため、契約先のマニュアルに従ってください。
エックスサーバーでは、対象ドメインのpublic_htmlが公開先です。既存のWordPressやホームページがある場合は、直下のファイルを置き換えず、public_htmlの中に「mori-cafe」など新しいフォルダを作って練習作品を配置します。既存ファイルを変更する前にはバックアップを取ってください。
この例では、public_html/mori-cafe/index.html、public_html/mori-cafe/css/style.css、public_html/mori-cafe/images/cafe.jpgという配置になります。アップロード画面で現在のフォルダを確認してから操作しましょう。
3．URLで開き、スマートフォンでも確認する
ドメインがexample.comなら、今回の例はhttps://example.com/mori-cafe/で開きます。example.comは説明用なので、自分のドメインに置き換えてください。SSLの設定や反映が完了しているかも確認します。
- 本文、画像、CSSが読み込まれるか。
- メニューやボタンのリンク先が正しいか。
- スマートフォンで横にはみ出さず、文字が読めるか。
- 問い合わせ先や掲載情報に誤りがないか。
- 写真やフォントの利用許諾を満たしているか。
Web上のファイルは他の人からも見られます。練習作品なら、その旨を明記し、架空の店舗情報が実在のお店の情報と誤解されないようにしましょう。
公開できない・表示が崩れるときの確認表
| 症状 | 最初に確認すること |
|---|---|
| 404でページが見つからない | 対象ドメインの公開フォルダか、URLのフォルダ名とファイル名が一致するか確認する。 |
| HTMLは見えるがCSSが効かない | cssフォルダも送ったか、CSSへの相対パスが正しいか確認する。 |
| 画像だけ表示されない | 画像の拡張子、大文字・小文字、imagesフォルダへの配置を確認する。 |
| 修正前の表示が残る | ファイルを保存して送り直したか確認し、ブラウザの再読み込みやキャッシュを確認する。 |
| HTTPSで警告が出る | 契約先のSSL設定と反映状況を確認する。警告を無視して閲覧を促さない。 |
すべてを変更し直す前に、ブラウザの開発者ツールで読み込みに失敗したファイルのURLを確認すると、パスの間違いを探しやすくなります。
ChromeでCSS・画像の読み込み先を確認する手順
- 公開したページをChromeで開き、WindowsはCtrl＋Shift＋J、MacはCommand＋Option＋Jで開発者ツールを開きます。
- 「Network（ネットワーク）」タブを選んでから、ページを再読み込みします。開いただけでは一覧が空の場合があります。
- CSSが表示されない場合は「CSS」、画像の場合は「Img」で絞り込みます。対象のファイル名をクリックし、「Headers（ヘッダー）」のRequest URL（リクエストURL）とStatus Code（ステータスコード）を確認します。
- 404なら、表示されたURLとサーバー上の配置を比べます。たとえばURLが「mori-cafe/style.css」なのに実際の配置が「mori-cafe/css/style.css」なら、HTMLの読み込み先かファイルの配置を直します。どちらか一方ずつ変更して確認しましょう。
- 送り直した後に再読み込みし、対象ファイルの読み込みとページの見た目を確認します。200でもCSSの内容が想定と違う場合は、別の同名ファイルを送っていないか確認します。
よくある間違いは、HTMLだけを送り直してCSSや画像を送っていないことと、別のフォルダにある同名ファイルを修正していることです。ブラウザが実際に読んでいるURLを先に確認すると、変更すべきファイルを絞れます。古い表示が残る場合は、開発者ツールを開いた状態で再読み込みボタンを長押しし、「キャッシュの消去とハード再読み込み」を試します。
参考：Chrome公式：Networkパネルで通信を確認する（2026年10月7日確認）。
独自ドメインを別途用意する場合
契約前に「取得・更新・移管」の料金を分けて確認する
自分の名前や屋号のURLで作品を継続公開したい方は、まず公開先を決め、サーバー契約のドメイン特典で必要なドメインを用意できるか確認します。特典で足りる場合は、ドメインを別に購入する必要はありません。練習作品を一時的に共有するだけなら、無料公開から始めても構いません。
| 費用 | 確認する場面 | 見落としやすい点 |
|---|---|---|
| 取得料金 | 新しいドメインを登録するとき | 初年度の特別価格には初回利用などの条件があります。更新も同じ金額とは限りません。 |
| 更新料金 | 登録期限を延長するとき | 翌年以降に続けられる費用か、サーバー代と合わせて確認します。 |
| 移管料金 | 取得済みドメインの管理会社を変えるとき | 新規取得とは別の手続きです。対象ドメインの料金・条件を確認します。 |
例として、XServerドメイン公式価格一覧では、2026年10月8日確認時点の.comは初回利用の適用条件を満たす取得が0円、更新と移管はそれぞれ1,721円と案内されています。0円という表示だけで継続費用を判断せず、申し込み時点の対象・登録期間・支払総額を確認してください。料金や特典は変更される場合があります。
- 希望する名前のつづりと空き状況を確認します。短く、口頭でも伝えやすい名前を候補にしましょう。
- 取得料金だけでなく更新料金も確認し、サーバーの無料ドメイン特典と比較します。
- 取得後は公開先サーバーの案内に従ってドメインとDNSを設定します。ドメインを買っただけではHTMLファイルは公開されません。
- 設定の反映後、HTTPSでページを開き、画像・CSS・スマートフォン表示を確認します。
サーバーとドメインの違いが曖昧な方は、サイト制作に必要なサーバー用語説明で役割を確認してください。
出典：XServerドメイン公式：取得・移管・更新の価格一覧と適用条件、公式：ドメイン移管ガイド（2026年10月8日確認）。
サーバー側の無料ドメイン特典が利用できない場合や、ドメインを別管理したい場合は、ドメイン取得サービスを比較します。XServerドメインもその選択肢です。取得時と更新時の料金、移管条件、Whois情報代理公開の対象を公式サイトで確認してください。ドメイン取得だけでWebページの公開が完了するわけではなく、公開先サーバーへの設定も必要です。
以下はXServerドメインの広告です。
公開したら次にすること
まずは別の端末でURLを開いて、作品として共有できる状態か確認しましょう。その後、文章の読みやすさ、スマートフォンの表示、リンク切れを順に改善します。公開した直後に検索結果へ表示されるとは限りません。
参考：エックスサーバー公式：ホームページのアップロード方法。公開フォルダの説明は2026年10月7日に確認しています。
