6日でできる 新HTML&CSS入門｜インターネットからHTMLが届くまで

6日でできる 新HTML&CSS入門｜インターネットからHTMLが届くまで

見えない通信のリレーをたどれば、Webページが表示される仕組みが見えてくる。

私たちがブラウザにURLを入力すると、少し待つだけでWebページが画面に表示されます。

普段は当たり前のように使っている機能ですが、その短い時間の中では、URLの確認、Webサーバへの問い合わせ、HTMLファイルの送信、ブラウザによる解析といった、いくつもの処理が行われています。

さらに、Webサーバから送られたHTMLファイルは、そのままひとかたまりで移動してくるわけではありません。通信しやすい大きさに分けられ、複数のネットワーク機器を通りながら、利用者のパソコンやスマートフォンまで届けられます。

この一連の処理を支えているのが、LAN、ルータ、IPアドレス、TCP/IP、ポート番号、HTTP、HTTPSなどの技術です。

それぞれの用語を個別に覚えるだけでは、HTMLとの関係が分かりにくいかもしれません。そこで、この記事ではブラウザにURLを入力してからHTMLが画面に表示されるまでの流れに沿って、インターネットの仕組みをやさしく解説していきます。

HTMLを学び始めたばかりの段階では、通信技術の細かな設定方法まで覚える必要はありません。まずは、HTMLファイルがWebサーバからどのような仕組みで届けられ、ブラウザがどのようにページを組み立てているのかをイメージできるようになりましょう。

インターネットはネットワーク同士をつなぐ仕組み

インターネットは、世界中のパソコンが1本の線で直接つながっている仕組みではありません。

家庭、学校、会社、データセンターなどには、それぞれ小さなネットワークがあります。この限られた範囲で構成されたネットワークをLANといいます。

家庭内で考えると、パソコン、スマートフォン、プリンタ、テレビなどがWi-Fiルータを通してつながっている状態がLANです。会社では、社員が使用するパソコンや社内サーバ、複合機などが社内LANに接続されています。

インターネットは、このような多数のLANが通信事業者のネットワークなどを通して相互に接続された、非常に大きなネットワークです。

自宅のパソコンからWebサイトを閲覧するときは、パソコンから家庭内のルータへデータが送られます。その後、インターネットサービスプロバイダや複数の通信設備を経由し、Webサイトを公開しているWebサーバへ届けられます。

Webサーバから返されるHTMLも、ほぼ反対の経路を通って利用者の端末まで届きます。

データはパケットに分けて送信される

WebページのHTMLや画像などのデータは、巨大なひとかたまりのまま送られるわけではありません。

ネットワーク上で取り扱いやすい大きさに分けられ、それぞれがパケットとして送信されます。荷物を複数の小包に分けて配送する様子をイメージすると分かりやすいでしょう。

パケットには、届け先を判断するための情報や、元のデータを正しく組み立てるために必要な情報が付け加えられます。

データがパケットに分けられることで、ネットワーク上では複数の利用者のデータを効率よく運べます。また、一部のデータが正常に届かなかった場合でも、必要な部分だけを送り直しやすくなります。

基本的な流れは次のとおりです。

1. 送信するデータを通信しやすい単位に分ける
2. 各データに宛先などの情報を付ける
3. ルータを経由して宛先へ送る
4. 受信側でデータを順番に並べ直す
5. 元のHTMLや画像などのデータに戻す

パケットは、すべてが必ず同じ経路を通るとは限りません。ネットワークの混雑状況や通信設備の状態によって、異なる経路を通ることがあります。

受信側では、届いたデータを正しい順番に並べ直し、元の内容として利用できる状態にします。

図1：HTMLデータがパケットとして運ばれる流れ

この図から分かること

Webサーバに保存されているHTMLデータは、ひとかたまりのまま利用者のパソコンへ移動するわけではありません。

送信しやすい大きさに分けられたパケットが、複数のルータによって中継されながら届けられます。パソコンに到着したパケットは正しい順番に並べ直され、再び1つのHTMLファイルとして扱える状態になります。

私たちの画面には完成したWebページが表示されるため、途中でデータが分けられていたことを意識する機会はほとんどありません。しかし、実際の通信では、このような分割と再構成が行われています。

IPアドレスはネットワーク上の住所

パケットを正しい相手へ届けるためには、送り先を識別する情報が必要です。その役割を持つのがIPアドレスです。

IPアドレスは、ネットワークに接続された機器を識別するための番号です。一般的には、ネットワーク上の住所にたとえられます。

住所が分からなければ荷物を届けられないように、IPアドレスが分からなければネットワーク上の相手へデータを届けることはできません。

IPv4のアドレスは、次のような形式で表されます。

192.168.1.10

0から255までの数値を4つ並べ、それぞれをピリオドで区切ります。192.168から始まるアドレスなどは、家庭や会社のLANでプライベートIPアドレスとしてよく使用されます。

一方、インターネット上で通信するためには、外部のネットワークから識別できるグローバルIPアドレスが必要です。

家庭内では複数の機器がそれぞれプライベートIPアドレスを持ち、家庭用ルータが外部との通信をまとめて処理する構成が一般的です。

IPv4とIPv6の違い

長い間、インターネットではIPv4が広く使われてきました。しかし、インターネットに接続するパソコンやスマートフォン、家電製品などが増えたことで、利用できるIPv4アドレスの不足が問題になりました。

そこで普及が進められているのがIPv6です。

IPv6はIPv4よりもはるかに多くのIPアドレスを利用できます。IPv6のアドレスは、次のように16進数とコロンを使って表します。

2001:db8:1234:5678::10

IPv4とIPv6は表記方法だけでなく、アドレスの数や通信の仕組みにも違いがあります。ただし、HTMLを学び始める段階では、次の点を押さえておけば十分です。

現在はIPv4からIPv6へ一度に切り替わっているわけではありません。両方を利用できる環境を用意しながら、少しずつIPv6への対応が進められています。

ルータはパケットの進む方向を判断する

ルータは、異なるネットワーク同士を接続するための機器です。

家庭にあるWi-Fiルータも、家庭内のLANとインターネット側のネットワークをつなぐルータの一種です。

ルータはパケットに付けられた宛先IPアドレスを確認し、どの方向へ送ればよいかを判断します。この経路選択の処理をルーティングといいます。

ルータには、宛先ごとの送り先を判断するためのルーティングテーブルがあります。ルータはこの情報を参照しながら、次にパケットを渡す相手を決めます。

宅配便で考えると、地域ごとの配送センターが荷物の住所を確認し、次の配送拠点へ送り出す様子に近い仕組みです。

それぞれのルータが最終目的地までのすべての経路を細かく把握しているとは限りません。自分が次にどこへ渡せばよいかを判断し、隣のルータへパケットを転送します。

この処理が複数回繰り返されることで、遠く離れたWebサーバにもパケットを届けられます。

プロトコルは通信を成立させる共通ルール

異なる会社が製造したパソコン、スマートフォン、ルータ、サーバが通信できるのは、共通のルールに従ってデータをやり取りしているからです。

この通信ルールをプロトコルといいます。

会話をするときに、お互いが理解できる言語や話し方が必要になるのと同じです。一方が自由な形式でデータを送り、もう一方が別の形式で受け取ろうとしても、正しく内容を理解できません。

インターネットでは、目的に応じて複数のプロトコルが組み合わされています。

インターネット通信の基盤として広く使われている仕組みがTCP/IPです。

TCP/IPという言葉は、TCPとIPだけを示す場合もありますが、一般的にはインターネット通信で使用される複数のプロトコル群をまとめて指します。

IPとTCPが分担して通信する

IPとTCPは、それぞれ異なる役割を持っています。

IPは、パケットの宛先を示し、ネットワーク上で送り届けるための仕組みです。ただし、IPだけでは、すべてのデータが確実に届いたか、正しい順番で届いたかまでは保証しません。

そこでTCPが、データの到着確認や順序管理を担当します。

荷物の配送にたとえると、IPは荷物を住所まで運ぶ仕組みで、TCPは荷物の個数や順番を確認する管理担当のような存在です。

TCPを使用した通信では、主に次のような処理が行われます。

WebページのHTMLが途中で一部失われると、タグや文章が欠けてしまう可能性があります。そのため、一般的なWeb通信ではTCPを使用し、HTMLなどのデータを正確に届けられるようにしています。

TCPとUDPの使い分け

TCPは信頼性の高い通信を行えますが、到着確認や再送などの処理が必要です。

一方、UDPはTCPほど細かな到着確認を行わず、比較的少ない処理でデータを送信します。そのため、多少のデータが欠けても、遅延を小さくしたい通信で利用されます。

ただし、TCPを使えば常に遅く、UDPを使えば常に速いという単純な関係ではありません。実際には、アプリケーションの目的や通信方式に合わせて使い分けられます。

HTML学習では、まずWebページのデータを正確に届けるためにTCPが重要な役割を持っていると理解しておきましょう。

ポート番号が通信先のサービスを区別する

IPアドレスを使うと、通信先のパソコンやサーバを特定できます。しかし、1台のサーバでは、Webページの公開、メールの送信、ファイルの転送など、複数のサービスが同時に動いていることがあります。

IPアドレスだけでは、到着したデータをどのサービスへ渡せばよいのか判断できません。

そこで使用されるのがポート番号です。

IPアドレスを建物の住所と考えるなら、ポート番号は建物内の部屋番号や受付窓口にあたります。

これらは、それぞれのサービスで一般的に使用される標準的なポート番号です。

ブラウザがHTTPSを使ってWebサーバへアクセスする場合、通常はサーバの443番ポートへ接続します。Webサーバ側では443番ポートで待ち受けているプログラムが通信を受け取り、ブラウザからの要求を処理します。

図2：IPアドレスとポート番号によるデータの振り分け

この図から分かること

IPアドレスとポート番号は、異なる役割を持っています。

IPアドレスによって通信先の機器を特定し、ポート番号によって、その機器の中で動いているサービスを特定します。

Webページを表示するための通信であればHTTPやHTTPSの窓口へ、メールを送信する通信であればSMTPの窓口へデータが渡されます。

この仕組みにより、1台のサーバで複数のサービスが動いていても、受信したデータを正しいプログラムへ振り分けることができます。

HTTPはブラウザとWebサーバをつなぐルール

HTMLファイルをWebサーバからブラウザへ届けるときには、HTTPというプロトコルが使用されます。

HTTPは、ブラウザがWebサーバへデータを要求し、Webサーバがその要求に応じてHTMLなどを返すためのルールです。

この通信では、ブラウザ側からWebサーバ側へ送られる要求をHTTPリクエストといいます。Webサーバからブラウザへ返される応答をHTTPレスポンスといいます。

たとえば、ブラウザで次のようなURLへアクセスしたとします。

https://www.example.com/news

ブラウザは、指定されたWebサーバへニュースページのデータを送ってほしいというHTTPリクエストを送信します。

Webサーバは要求されたページを確認し、対応するHTMLをHTTPレスポンスとして返します。

Webサーバは、要求されたページが見つかった場合だけでなく、ページが存在しない場合やサーバ内部で問題が発生した場合にもHTTPレスポンスを返します。

その処理結果を表すのがHTTPステータスコードです。

ブラウザに404と表示された経験があるかもしれません。これは、ブラウザとWebサーバの通信そのものがまったくできなかったという意味ではありません。

Webサーバには接続できたものの、指定されたページを見つけられなかったことを示しています。

HTTPSは通信内容を暗号化する

HTTPSは、HTTPによる通信を暗号化して安全性を高めた仕組みです。

現在、多くのWebサイトではHTTPSが利用されています。ブラウザのアドレス欄に表示されるURLがhttps://から始まっている場合は、基本的にHTTPSによる通信が行われています。

通常のHTTP通信では、通信経路上でデータの内容を読み取られる危険があります。HTTPSでは、通信を始めるときにサーバの証明書を確認し、暗号化された通信経路を作ります。

これにより、主に次のような効果が得られます。

HTTPSであっても、Webサイトの内容が必ず安全であるとは限りません。HTTPSが示しているのは、主にブラウザとWebサーバの間の通信が暗号化されていることです。

個人情報やパスワードを入力するときは、HTTPSの有無だけでなく、サイトの運営者やURLが正しいかどうかも確認することが大切です。

URLからWebサーバを探す

利用者はWebサイトへアクセスするとき、一般的にIPアドレスを直接入力するのではなく、URLを入力します。

URLには、通信方法、Webサーバの名前、ページの場所などが含まれています。

たとえば、次のURLを見てみましょう。

https://www.example.com/guide/index.html

人にとっては、数値で構成されたIPアドレスよりも、意味を持つドメイン名のほうが覚えやすくなります。

しかし、ネットワーク上でパケットを届けるには、最終的にIPアドレスが必要です。

そこで、ドメイン名に対応するIPアドレスを調べるDNSという仕組みが利用されます。

ブラウザにURLを入力すると、パソコンはDNSサーバへ問い合わせを行います。DNSサーバからWebサーバのIPアドレスを受け取ると、そのIPアドレスを使ってWebサーバとの通信を開始します。

DNSは、ドメイン名とIPアドレスを対応させるインターネット上の案内役と考えると分かりやすいでしょう。

HTMLはWebページの構造を表す

Webサーバから届く重要なデータの一つがHTMLです。

HTMLは、Webページの見出し、段落、画像、リンク、一覧などの構造を表すためのマークアップ言語です。

ブラウザはHTMLを受け取ると、書かれている要素を上から順番に読み取り、それぞれの意味に合わせて画面を組み立てます。

たとえば、h1要素はページの主要な見出し、p要素は文章の段落、ul要素とli要素は箇条書きとして扱われます。

HTMLはプログラムの処理手順を書くための言語ではなく、文章や情報の役割を示すための言語です。

Webページの見た目や配置を整えるCSSについては、CSSを扱う記事以降で詳しく学習します。ここではCSSを使用せず、HTMLだけでページの基本構造を作ります。

ブラウザが受け取るHTMLを確認する

次のHTMLは、地域の図書館からのお知らせページを表した例です。

ファイル名：lesson01_01.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>街の図書館からのお知らせ</title>
  </head>
  <body>
    <h1>街の図書館へようこそ</h1>
    <p>今月開催するイベントをご案内します。</p>

    <h2>今月のイベント</h2>
    <ul>
      <li>初心者向け読書会</li>
      <li>子どものための読み聞かせ</li>
      <li>地域の歴史を学ぶ講座</li>
    </ul>
  </body>
</html>

この図から分かること

このHTMLファイルがWebサーバに保存されているとします。

利用者がブラウザからこのページへアクセスすると、WebサーバはHTMLファイルの内容をブラウザへ返します。ブラウザは受け取った文字列をHTMLとして解析し、見出し、文章、一覧を画面上に配置します。

DOCTYPEの宣言は、この文書がHTMLとして書かれていることをブラウザに伝えます。

html要素のlang属性にはjaが指定されているため、このページの主な言語が日本語であることが示されています。

head要素には、文字コードやページタイトルなど、ページ全体に関する情報を記述します。meta要素のcharset属性でUTF-8を指定することで、日本語を含むさまざまな文字を適切に扱いやすくなります。

body要素の中には、ブラウザのページ内に実際に表示する内容を記述します。

この例では、h1要素がページ全体の中心となる見出しを表しています。p要素は案内文の段落、h2要素はイベント一覧の見出し、ul要素とli要素はイベントの一覧を表しています。

Webサーバから届くHTMLは、完成した画面の画像ではありません。タグと文章で構成されたテキストデータです。

ブラウザがHTMLの意味を読み取り、画面上の見出しや段落へ変換することで、私たちが見るWebページになります。

URLを入力してからHTMLが表示されるまで

ブラウザにURLを入力してからWebページが表示されるまでには、複数の処理が順番に行われます。

大きな流れを整理すると、次のようになります。

最初に、ブラウザは入力されたURLから通信方法やドメイン名、要求するページの場所を確認します。

次に、ドメイン名に対応するIPアドレスをDNSで調べます。IPアドレスが分かると、ブラウザはWebサーバとの接続を開始します。

HTTPSを利用するWebサイトでは、暗号化通信を始めるための確認処理も行われます。

接続の準備が整うと、ブラウザは表示したいページを指定したHTTPリクエストをWebサーバへ送信します。

Webサーバは要求内容を受け取り、指定されたHTMLファイルやプログラムの処理結果をHTTPレスポンスとして返します。

送信されたHTMLはパケットとして複数のネットワークを通過し、利用者の端末まで届けられます。

最後に、ブラウザがHTMLを解析し、見出しや段落などの構造を画面へ反映します。

WebサーバがHTMLを返す方法

Webサーバは、ブラウザからのHTTPリクエストを受け付けるコンピュータやソフトウェアです。

Webサーバには、あらかじめ作成されたHTMLファイルをそのまま返す方法と、要求を受けたときにプログラムでHTMLを生成して返す方法があります。

会社案内や固定された説明ページでは、あらかじめ用意したHTMLファイルをそのまま返すことがあります。

一方、ニュースサイト、ショッピングサイト、会員ページなどでは、閲覧する時間や利用者の状態によって表示内容が変わります。このようなページでは、Webサーバ側のプログラムが必要な情報を集め、その時点の内容に合わせてHTMLを作ります。

どちらの場合でも、最終的にブラウザが受け取る基本的なデータの一つはHTMLです。

ブラウザから見ると、Webサーバ上に最初から保存されていたHTMLなのか、その場で作られたHTMLなのかに関係なく、受け取ったHTMLを解析して画面を表示します。

ブラウザはHTMLを上から順番に解析する

ブラウザはHTMLを受け取ると、その内容を上から順番に読み取ります。

最初にHTMLのタグや文章を確認し、要素同士の親子関係を整理します。たとえば、body要素の中にh1要素やp要素があり、ul要素の中に複数のli要素があるという構造を把握します。

ブラウザ内部では、この構造がツリー状のデータとして扱われます。

その後、ブラウザは各要素の役割に合わせて画面を組み立てます。h1要素は大きな見出し、p要素は段落、ul要素とli要素は一覧として表示されます。

HTMLに画像や別のファイルを読み込む指定がある場合、ブラウザはHTMLを受け取った後、必要なファイルをWebサーバへ追加で要求します。

そのため、一般的なWebページでは、最初のHTMLを1回受け取るだけで、すべての通信が完了するとは限りません。

HTMLを解析した結果、追加のファイルが必要だと分かるたびに、ブラウザは新しいHTTPリクエストを送ります。

HTMLが届いても表示に時間がかかる理由

Webページの表示速度は、インターネット回線の速度だけで決まるわけではありません。

Webサーバまでの距離、途中のネットワークの混雑、Webサーバの処理時間、HTMLのデータ量、ページ内で読み込むファイルの数など、さまざまな要因が関係します。

ブラウザの画面に一部の文字が先に表示され、その後に画像などが表示されることがあります。

これは、ブラウザがすべてのデータを受け取るまで何も表示しないのではなく、受信と解析を進めながら、表示できる部分から画面を組み立てているためです。

Webページを作るときは、正しいHTMLを書くことに加えて、必要以上に大きなデータを読み込ませないことも重要になります。

ただし、表示速度を改善する具体的な方法については、HTMLやCSSなどの基本を身につけてから少しずつ学んでいけば問題ありません。

図3：URLの入力からHTMLが表示されるまで

この図から分かること

ブラウザにURLを入力してからWebページが表示されるまでには、DNS、IPアドレス、ルータ、TCP、HTTPS、HTTP、Webサーバ、HTML、ブラウザといった複数の仕組みが関わっています。

それぞれの技術は独立して動いているのではなく、役割を分担しながら1つのWebページを届けています。

DNSはドメイン名からIPアドレスを調べ、IPとルータはパケットをWebサーバまで運びます。TCPはデータが正確に届くように管理し、HTTPはブラウザとWebサーバの間で何を要求し、何を返すかを決めます。

Webサーバから返されたHTMLは、再びネットワークを通ってブラウザへ届きます。ブラウザはHTMLに書かれた構造を解析し、見出しや段落などを画面上に表示します。

WebページはHTMLファイルだけで完成しているように見えますが、そのHTMLが画面に届くまでには、さまざまな通信技術による見えないリレーが行われています。

HTMLを学ぶときに通信の仕組みを知るメリット

HTMLは、パソコン内にファイルを作成し、ブラウザで開くだけでも学習できます。

自分のパソコン内にあるHTMLファイルを開く場合は、インターネットを通してWebサーバからデータを受け取る必要はありません。そのため、通信の仕組みを知らなくても、HTMLのタグを書く練習はできます。

しかし、作成したWebページをインターネット上で公開すると、HTMLファイルはWebサーバに置かれます。利用者はブラウザからそのWebサーバへアクセスし、HTMLを受け取ってページを表示します。

この関係を理解していると、Web制作を学ぶ中で登場するさまざまな現象を整理しやすくなります。

たとえば、ページが表示されないときには、次のように原因を分けて考えられます。

画面に何も表示されないからといって、必ずHTMLの書き方だけが原因とは限りません。

HTMLファイルは正しく作成されていても、Webサーバへ配置されていなかったり、URLが間違っていたり、通信できていなかったりすることがあります。

反対に、WebサーバからHTMLを正常に受信できていても、HTMLの要素や属性の使い方に問題があれば、意図した画面にならないことがあります。

インターネットの仕組みとHTMLの役割を分けて理解しておくことで、問題が起きた場所を落ち着いて確認できるようになります。

HTMLを書く作業は、単に文字やタグを並べることではありません。Webサーバからインターネットを通して届けられ、さまざまな環境のブラウザで読み取られる文書を作る作業です。

その視点を持ってHTMLを学ぶと、タグの意味や文書構造を正しく書くことの大切さも、より具体的に理解できるようになります。