Resources

1.WEBページの仕組みを理解しよう

  • WEBファイルについて

WEBサイトは複雑そうに見えますが、実は基本的には 「ただのテキストファイル」 です。では、どうしてブラウザで開くと見た目が整ったページとして表示されるのでしょうか？

1. HTMLファイルは「特別なテキストファイル」

パソコンでメモ帳を開いて、次のように入力してみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>はじめてのWEBページ</title>
</head>
<body>
    こんにちは、ワールドワイドウェブ！
</body>
</html>

このファイルを sample.html という名前で保存し、ダブルクリックして開くと、ブラウザが自動的に起動して、「こんにちは、ワールドワイドウェブ！」と表示されます。

このように、HTMLファイルは特別なフォーマットで書かれた「テキストファイル」です。でも、メモ帳で開くと普通の文字の羅列に見えます。では、どうしてブラウザで開くとWEBページとして表示されるのでしょうか？

2. ブラウザはテキストファイルを「翻訳」して表示している

ブラウザ（Chrome、Firefox、Edgeなど）は、HTMLファイルを解釈（パース）し、ルールに従って表示します。

例えば、上のHTMLでは <body> の中に「こんにちは、ワールドワイドウェブ！」と書きました。ブラウザはこれを「ページの本文として表示するものだな」と理解して、適切に表示してくれます。

さらに、 <title> の中身はブラウザのタブに表示されます。

ポイント

  • HTMLファイルはただのテキストファイルだが、ブラウザが「これはWEBページの構造を表すもの」として解釈する
  • タグ（<html>, <head>, <body> など）があることで、ブラウザはどの部分が何の役割なのかを判断できる

3. 画像やデザインはどこから？

「文字だけじゃなく、色や画像はどうするの？」と思うかもしれません。

実は、ブラウザは CSS（デザインの情報） や 画像ファイル（.jpg, .png など） も一緒に読み込んで、ページの見た目を整えます。

例えば、次のようなファイル構成を考えてみましょう。

/ウェブサイトのフォルダ
  ├── index.html  （WEBページの本体）
  ├── style.css   （デザインを指定するファイル）
  └── image.jpg   （画像ファイル）

HTMLの中で style.css を読み込めば、色やレイアウトを変更できますし、 image.jpg を指定すれば画像を表示できます。

4. インターネットに公開するとどうなる？

ローカルのパソコンで開く場合は、ファイルをダブルクリックすればOKですが、WEBサイトとして公開するには サーバー という場所にアップロードする必要があります。

WEBサイトの流れ

  1. ブラウザがサーバーに「このページを見せて」とリクエストを送る
  2. サーバーが index.html や style.css などのファイルをブラウザに送る
  3. ブラウザが受け取ったファイルを解釈し、ページを表示する

この流れのおかげで、インターネット上のどこからでもWEBページを見ることができるのです。

まとめ

HTMLファイルはただのテキストファイル で、ブラウザがルールに従って解釈してくれる
CSSや画像と組み合わせると、見た目が整ったWEBページになる
サーバーにアップすると、どこからでもアクセスできるWEBサイトになる

つまり、WEBサイトを作る基本は 「特別な書き方をしたテキストファイルを用意する」 ことから始まります。