まず、Webサイトはどこにある？
WebサイトのHTML・画像・CSSなどのファイルは、通常サーバーと呼ばれるコンピューターに置かれています。あなたがブラウザでURLを開くと、ネットワークを通じて必要なデータを受け取り、画面に組み立てて表示します。
- ドメイン：
example.comのような、サイトを見つけるための名前。 - DNS：ドメイン名を接続先のIPアドレスへ対応づける仕組み。
- サーバー：Webページのファイルやデータを返す場所。
- ブラウザ：受け取ったHTML・CSSなどを解釈し表示するアプリ。
URLを入力した後の流れ
- ブラウザがURLを読み取り、接続先を調べる。
- DNSなどを利用してサーバーへ接続する。
- サーバーがHTMLなどのデータを返す。
- ブラウザがCSS・画像などを読み込み、画面を表示する。
なぜ制作する人に必要？
「画像が表示されない」「新しいページに切り替わらない」といったトラブルの切り分けに役立ちます。画像パスの間違いなのか、アップロード漏れなのか、キャッシュなのか、確認する順番が見えてきます。
3分でできるミニ演習
ブラウザで気になるWebサイトを1つ開き、URLのドメイン部分を見つけてみましょう。次に開発者ツールの「Network」を開き、HTML・CSS・画像が別々に読み込まれていることを観察してください。まずは何を表示しているか分かれば十分です。