Webサイトが表示される仕組みについて解説【Web基礎講座】

2020年2月15日2022年11月6日プログラム知識

みなさんはWebページが表示される流れについて知っていますか？

ブラウザがHTMLを表示しているんじゃないの？

その通りです。

では、ブラウザはHTMLをどこから受け取っているのでしょうか？

この記事ではWebページが表示される仕組みについて簡単に解説を行います。

特にWebページを作る人で「デザイナー」や「プログラマー」は、ぜひ読んでください！

仕組みを理解すると

Webページの表示速度を改善
Webページが表示されないトラブル

などの調査や対応が出来るようになります。

Contents

1. HTMLでWebページが表示される流れ
- 1.1. Webページが表示されるまでの流れ(フロー図)
2. WebサーバとブラウザがデータをやりとりするHTTP通信
- 2.1. HTTP通信とは
- 2.2. HTTP通信は危険？だからHTTPSを使う
3. まとめ：Webページが表示される流れを解説

HTMLでWebページが表示される流れ

まず知っておくことは、

「ブラウザはWebページを表示するためにサーバと通信している」

ということです。

サーバと通信というと？

ブラウザにWebページが表示されるまでの流れについて解説します。

Webページが表示されるまでの流れ(フロー図)

HTMLからWebページが表示されるまでの流れを図を使って解説します。（流れは簡略化しています）

サーバ間の流れは「図で表現する」と理解しやすいです。

このフロー図を見ると、ブラウザはWebサーバと通信を行ってWebページを表示していることがわかります。しかも何度も通信しています。

URL入力

まずブラウザに表示するWebページのURLを入力します。

HTMLを取得

ブラウザはWebサーバからHTMLを取得します。例として次のようなHTMLだとします。

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTTP通信を解説</title>
	</head>
	<body>
		<h1>HTTP通信を解説</h1>
		<ul>
			<li><img src="https://hoge.com/sample/dog.jpg" alt="犬の画像"></li>
			<li><img src="https://hoge.com/sample/cat.jpg" alt="猫の画像"></li>
		</ul>
	</body>
</html>

HTMLを解釈

ブラウザは取得したHTMLを解釈します。

画像を取得

ブラウザはWebページを表示するために必要な画像を取得します。

<ul>
	<li><img src="https://hoge.com/sample/dog.jpg" alt="犬の画像"></li>
	<li><img src="https://hoge.com/sample/cat.jpg" alt="猫の画像"></li>
</ul>

Webページを表示

そしてブラウザはWebページを表示します。

Webページが表示される流れのポイント

ブラウザはWebページを表示するために必要な画像などをWebサーバから個別に取得する。
なので、画像やスタイルシートなどWebページ表示に必要なファイルが多いと「表示速度が低下」します。

WebサーバとブラウザがデータをやりとりするHTTP通信

では、もう少し深堀してWebサーバとブラウザはどうやってデータをやりとりしているか解説します。

Webサーバとブラウザは、HTTP通信を使ってデータをやりとりしています。

HTTP通信って何か聞いたことあるけど、難しそう💦

通信と聞くと難しそうって感じまいますよね💦

HTTP通信を簡単に言うと「データのキャッチボール」です。

では、HTTP通信について解説します。

HTTP通信とは

HTTPとは、Hypertext Transfer Protocolの略です。

HTTPを簡単に言うと「ハイパーテキストでWebデータをやり取りする時の決まり事」です。

Hypertext
Transfer
Protocol

例えばブラウザとWebサーバで

ブラウザ「Webサーバ、HTML頂戴！」

Webサーバ「はい、HTML」

と互いに「HTTP通信で要求(リクエスト)と応答(レスポンス)のやりとり」を行っています。

Webサーバとブラウザで「データのキャッチボール」を行っているイメージです。

そしてHTTP通信でやりとりされるデータは「“HTTPリクエスト"と"HTTPレスポンス"というデータ」を使って通信されます。

では、ヘッダデータの中身をみていきましょう。

HTTPリクエストヘッダ

HTTPリクエストヘッダは、HTTP通信で要求(リクエスト)を行う際に使います。

データはこんな感じです。

GET http://hoge.com/sample/index.html HTTP/1.1
Host: hoge.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://hoge.com/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,ru;q=0.4,zh-CN;q=0.2,zh;q=0.2,fr;q=0.2,it;q=0.2,zh-TW;q=0.2,pt;q=0.2

英語がずらっと並びます💦

注目するのは1行目で、他の情報はHTTP通信に関する補足情報的な内容です。

GET http://hoge.com/sample/index.html HTTP/1.1

この1行目で

「GETメソッドでHTTP/1.1のバージョンを使って"http://hoge.com/sample/index.html"を要求します」

とリクエストしています。

HTTPレスポンスヘッダ

HTTPレスポンスヘッダは、HTTP通信において返答(レスポンス)する際に使います。

データはこんな感じです。

HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Fri, 10 Jun 2016 11:01:38 GMT
Accept-Ranges: bytes
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcaGFrb3pha2lcRG9jdW1lbnRzXE15IFdlYiBTaXRlc1xuZWtvXG5la28uaHRtbA==?=
X-Powered-By: ASP.NET
Date: Mon, 25 Jul 2016 13:51:45 GMT
Transfer-Encoding: chunked

<html>
	<head>
		<meta charset="UTF-8">
		<title>HTTP通信を解説</title>
	</head>
	<body>
		<h1>HTTP通信を解説</h1>
		<ul>
			<li><img src="/sample/dog.jpg" alt="犬の画像"></li>
			<li><img src="/sample/cat.jpg" alt="猫の画像"></li>
		</ul>
	</body>
</html>

レスポンスヘッダも英語が続きます。

が、レスポンスヘッダも1行目に注目します。