ページが作れるようになると、次に「これをどうやって人に見せるのか」という疑問が出てきます。専門用語が多くて身構えますが、必要な要素は3つだけです。

必要なのは3つ

  • ファイル … あなたが作ったHTML・CSS・画像
  • サーバー … そのファイルを置いておき、求められたら渡す場所
  • ドメイン … その場所を指す住所（example.com のような名前）

たとえるなら、ファイルが商品、サーバーが倉庫、ドメインが住所です。誰かがブラウザにドメインを入力すると、その住所の倉庫に問い合わせが行き、ファイルが返ってきて、画面に表示されます。

手元のファイルを開くのと、何が違うのか

パソコン上のHTMLファイルをダブルクリックすると、アドレス欄が file:// で始まります。これは「自分のパソコンの中のファイルを直接開いている」状態で、他の人からは見えません。

公開するというのは、そのファイルを常時つながっているコンピュータ（サーバー）に置き、誰でも取りに来られる状態にすることです。

サーバーの選択肢

  • 静的ホスティングサービス … HTMLやCSSを置くだけなら、これがいちばん手軽。無料の枠があるものも多い
  • レンタルサーバー … 昔からある方法。月額数百円から。WordPressを使うならこちら
  • クラウドサービス … 自由度が高いが、学習中に選ぶ必要はない

HTML・CSS・JavaScriptだけで作ったページなら、静的ホスティングで十分です。ファイルを置くだけで公開でき、更新も簡単です。

ドメインの話

ドメインは年単位で借りるものです。多くのサービスでは、自分のドメインを用意しなくても、サービス側が用意した名前（yourname.example.net のような形）で公開できます。学習中はこれで十分です。

自分のドメインを使いたくなったら、ドメイン販売サービスで取得し、サーバー側に「この住所で来た人を、ここに案内してください」という設定をします。この設定をDNSと呼びます。

公開したあとに気をつけること

  • 大文字小文字 … 手元では動いたのに、公開すると画像が出ないことがある。ファイル名は小文字で統一
  • パス … 絶対パスで書いていた場合、公開して初めて正しく動くこともある
  • 更新の反映 … ブラウザのキャッシュで古い表示が残ることがある。強制再読み込みで確認
  • httpsになっているか … 鍵マークが付いていない場合は、サービス側の設定を確認

公開は学習の一部

手元で完璧に見えていても、公開してみると必ず何かが崩れます。パスの問題、大文字小文字、読み込み速度。これらは公開して初めて分かることなので、早い段階で一度は経験しておくことをおすすめします。

完成してから公開するのではなく、作りかけでも一度公開してみる。そのほうが、つまずきを小さいうちに片付けられます。