なぜブラウザにURLを入力するとページが表示されるのか

なぜブラウザにURLを入力するとページが表示されるのか？

私たちが普段使っている ブラウザ（Chrome, Edge, Safari など） は、インターネットを通じてサーバーから情報を受け取り、画面にページを表示するためのソフトです。

例えば、ブラウザのアドレスバーに https://example.com のような URL を入力すると、ブラウザはそのURLに対応する サーバー に「ページをください」というリクエストを送ります。

サーバーは、そのリクエストに応じて HTMLファイル を返します。 HTMLファイルは「文字や画像をどう表示するか」が書かれている文書です。

ブラウザは受け取ったHTMLを読み込み、さらにHTMLの中で指定されている CSS（デザイン） や 画像ファイル、場合によっては JavaScript（動きをつけるプログラム） も一緒に読み込みます。

最後に、ブラウザはこれらを組み合わせて画面に表示します。つまり、URL → サーバーからHTML取得 → ブラウザが解釈 → ページ表示 という流れで、私たちの目に見えるウェブページが完成するのです。

この仕組みがあるからこそ、私たちは世界中の情報を、URLを入力するだけですぐに見ることができるのです。

HTMLファイルを作って世界中に公開する仕組み

1. HTMLファイルを作る
- テキストエディタでファイルを作り、内容を記述します。
- 例: index.html に文章や画像、リンクなどを記述。

2. サーバーにアップロード
- 作ったHTMLファイルをインターネット上のサーバーに置きます。
- 無料サービス：GitHub Pages、Netlify、Vercel など。

3. 世界中の人が閲覧
- サーバーにアップロードしたファイルにはURLが発行されます。
- 例: https://username.github.io/ページ名/
- このURLをブラウザで開くと、誰でもページを閲覧可能です。

この流れにより、自分で作ったHTMLファイルが、世界中の人に届けられます。

自分のファイルが世界中に届く仕組み

下のイメージを思い浮かべてください：

自分のパソコン
(ファイル作成)

元のファイルは自分のパソコンに残る

➡

アップロード
（インターネット経由）

サーバー会社
(サーバー・記憶装置)

サーバーにコピーが保存される

⬅

インターネット経由

世界中の人のブラウザ
(ホームページ閲覧)

ブラウザでページを閲覧する

1. 自分のパソコンで作ったファイル は、まずサーバーに送ります（アップロード）。
2. サーバー会社にあるコンピュータ が、ファイルを保存し、誰でもアクセスできるように待機します。
3. 世界中の人がブラウザでURLを開くと、サーバーがファイルを渡してページが表示されます。

「自分のパソコンで公開できるのではないか？」と思うかもしれません。
- 自分のパソコンをそのままサーバーとして使うことも技術的に可能ですが、問題があります：

常にパソコンを起動しておく必要がある
インターネット回線やセキュリティ対策を自分で整える必要がある
他の人が簡単にアクセスできる保証がない

💡 ポイント：
サーバーは「インターネット上の貸し倉庫」のようなもの。
ファイルをそこに置くことで、自分のパソコンに頼らなくても世界中に届けられるのです。

サーバーにファイルをアップロードする仕組み

1. アップロードとは？
- パソコンの中にあるファイルを、インターネット上のサーバーに送ることです。
- サーバーに送ることで、世界中の人がブラウザからアクセスできるようになります。

2. アップロードの方法
- 初心者でも簡単な方法:

レンタルサーバーの管理画面から直接アップロード
FTPソフト（例: FFFTP, FileZilla）でドラッグ＆ドロップで送信
GitHub PagesやNetlifyなど、アップロード操作を自動化してくれるサービス

3. 公開フォルダとは？
- サーバーの中で「外の人が見られる場所」が決まっていて、そこにファイルを置く必要があります。
- 例:

XAMPP: htdocs
レンタルサーバー: public_html や www

4. アップロード後の確認
- サーバーにファイルを置いたら、ブラウザでURLを開いて表示を確認します。
- 正しくアップロードされていれば、誰でもそのページを閲覧できます。

このように、アップロードは「自分のファイルをサーバーの決められた場所に送る作業」と覚えておくとわかりやすいです。

HTMLの書き方

ここでは、HTMLの基本的な書き方を簡単に紹介します。HTMLはタグを使って文書の構造を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <p>これはHTMLの基本的な例です。</p>
</body>
</html>

上のコードは、もっとも基本的なHTML文書の例です。
<!DOCTYPE html> はHTML5を使う宣言です。
<html> ～ </html> の中に文書全体を書きます。
<head> 部分には文字コードやタイトルを、
<body> 部分には実際に画面に表示される内容を書きます。

HTMLの基礎

まず、テキストエディター（Windowsなら「メモ帳」など）を開きます。
HTMLは専用のソフトがなくても、メモ帳だけで書くことができます。

HTMLを書くときの注意点は次の通りです：

すべて 半角英数字 を使う
スペースも半角、または TABキー を使う
全角スペース は機能しない

では、HTML文書の最初に必ず書くものを紹介します。それが次の宣言です。

<!DOCTYPE html>

この <!DOCTYPE html> は、
「このファイルは HTML5 という形式で書かれています」
とブラウザに伝えるための宣言です。

書かなくてもブラウザはある程度表示してくれますが、
表示が崩れたり、古い互換モードで表示される原因になります。
そのため、HTMLを書くときは必ず最初に書きます。

HTMLのスペースや改行について

HTMLは、半角スペースやTABスペース、改行などを含めることができますが、これらは必ず必要というわけではありません。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>サンプルページ</title></head><body><h1>こんにちは、世界！</h1><p>これはHTMLの基本的な例です。</p></body></html>

上のように、すべてを1行に書いても、ブラウザで開くと前のコードと同じ結果になります。

では、なぜスペースやTAB、改行を入れるのかというと、単純に見やすくするためです。他の人が見ても理解しやすく、修正もしやすくなります。このように書くことで、後から見ても分かりやすいHTMLになります。

<!DOCTYPE html> の詳しい解説

HTML文書の最初に書く <!DOCTYPE html> は、
この文書が HTML5 で書かれていることをブラウザに伝える宣言 です。
この宣言を入れることで、ブラウザは標準モードでページを解釈し、意図した表示が可能になります。

"<" と ">" は必ず書きます。
アルファベットの大文字・小文字はどちらでも動作しますが、慣習的に大文字で書きます。
<!DOCTYPE html> は閉じタグを持ちません。これは「宣言」であり、要素を囲むものではないためです。
この宣言を入れることで、ブラウザは正しく HTML5 としてページを解釈し、意図した表示になります。

まとめると：
- ページの最初に必ず書く
- < と > を省略しない
- 大文字・小文字どちらでも動作（慣習は大文字）
- 閉じタグは不要

次のページ >>