6日でできる 新HTML&CSS入門｜Webサーバの役割とHTML

6日でできる 新HTML&CSS入門｜Webサーバの役割とHTML

HTMLを届けるWebサーバの仕組みを知れば、Webページが表示される流れが見えてくる。

ブラウザでURLを入力すると、目的のWebページがすぐに画面へ表示されます。普段は数秒で完了するため、その裏側でどのような処理が行われているのかを意識することは少ないかもしれません。

しかし、Webページが表示されるまでには、ブラウザからWebサーバへリクエストが送られ、WebサーバからHTMLや画像などのデータが返されるというやり取りがあります。

このとき、Webページの内容や構造を表すのがHTMLです。そして、HTMLファイルをインターネット上で公開し、利用者のブラウザへ届ける役割を持つのがWebサーバです。

HTMLファイルを作成しても、自分のパソコン内に保存しただけでは、世界中の利用者がそのページを閲覧することはできません。Webサーバへ配置し、ネットワークを通してアクセスできる状態にすることで、初めてWebページとして広く公開できます。

Web制作を学ぶときは、HTMLの書き方だけでなく、作成したHTMLがどこに保存され、どのような通信によってブラウザへ届くのかを理解することも大切です。

ここでは、Webの基本的な仕組みから、HTMLとブラウザの関係、WWWやハイパーリンク、Webサーバの役割、HTTP・HTTPS、URLの構造までを順番に見ていきます。

Webは世界中の情報を結び付ける仕組み

Webは、インターネット上に公開された文章、画像、動画などの情報を、ブラウザから閲覧できる仕組みです。

正式にはWorld Wide Webと呼ばれ、一般的にはWWWまたはWebと表現されます。

インターネットとWebは同じ意味で使われることがありますが、厳密には異なります。

インターネットは、世界中のコンピュータやネットワークを接続する通信基盤です。Webは、そのインターネット上で提供されているサービスの一つです。

インターネット上では、Web以外にもメール、オンライン通話、ファイル転送、動画配信など、さまざまなサービスが利用されています。

その中でもWebは、情報をページとして公開し、リンクを使って別の情報へ移動できることが大きな特徴です。

WebページとWebサイトの違い

Webページは、ブラウザに表示される一つのページです。

たとえば、企業サイトには、トップページ、会社案内、サービス紹介、採用情報、お問い合わせなどのページがあります。この一つひとつがWebページです。

関連する複数のWebページをひとまとめにしたものをWebサイトといいます。

Webサイトは、1枚の大きなページとして作られているとは限りません。

多くの場合は、目的ごとに複数のページへ分かれており、それぞれがハイパーリンクによって結び付けられています。

ハイパーテキストが情報同士をつなぐ

Webの大きな特徴は、情報から別の情報へ簡単に移動できることです。

この仕組みを支えているのがハイパーテキストです。

ハイパーテキストとは、文章の中に別の文書や情報へ移動する仕組みを持つテキストです。通常の文章は先頭から順番に読み進めますが、ハイパーテキストでは、利用者が興味のあるリンクを選びながら情報を移動できます。

ハイパーテキストの中で、別のページや情報への移動に使われる部分をハイパーリンクといいます。

たとえば、企業サイトのトップページから会社案内を選ぶと、会社案内ページへ移動します。これは、トップページに会社案内ページへのハイパーリンクが設定されているためです。

ハイパーリンクには、主に次のような使い方があります。

ハイパーリンクによって世界中のWebページが相互につながり、大きな情報のネットワークが形成されています。

図1：Webページがリンクでつながる仕組み

この図から分かること

Webサイトは、複数のWebページが独立して存在しているだけではありません。

トップページから会社案内、サービス紹介、採用情報などへ移動できるように、ページ同士がハイパーリンクで結び付けられています。

同じWebサイト内のページへ移動するリンクをサイト内リンクといい、別のWebサイトへ移動するリンクを外部リンクといいます。

利用者は、表示されたリンクを選びながら、必要な情報へ移動できます。Web全体では、このようなリンクが世界中のページを結び付けています。

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

HTMLは、Webページの内容や構造を記述するためのマークアップ言語です。

HTMLはHyperText Markup Languageの略で、直訳するとハイパーテキストを記述するためのマークアップ言語という意味になります。

HTMLでは、文章の一部に見出し、段落、一覧、画像、リンクなどの意味を持たせます。

たとえば、ページの中心となる見出し、説明文となる段落、複数の項目を並べた一覧などを、HTMLの要素を使って表現します。

HTMLは、ブラウザに対して文字を大きく表示してほしい、ここに空白を作ってほしいといった見た目だけを伝えるものではありません。

この文章は見出しである、この部分は段落である、この項目は一覧の一部であるというように、情報の役割や構造を伝えることが中心です。

マークアップとは文章に意味を付けること

マークアップとは、文章の各部分に役割を示す目印を付けることです。

HTMLでは、タグと呼ばれる記号を使って文章を囲み、その部分がどのような意味を持つのかを示します。

たとえば、h1要素はページの主要な見出しを表し、p要素は文章の段落を表します。a要素は別のページや情報へ移動するリンクを表します。

ブラウザは、タグの名前や要素同士の関係を読み取り、その意味に合わせてWebページを組み立てます。

見出しは見出しらしく、段落は文章のまとまりとして、一覧は複数の項目として表示されます。

HTMLファイルはテキストデータとして保存される

HTMLファイルの中身は、文字で書かれたテキストデータです。

文章、タグ、属性などが文字として記述されており、一般的なテキストエディタやHTML編集ソフトで作成できます。

HTMLファイルには、主に次の拡張子が使われます。

現在は、分かりやすく一般的な.htmlを使用することが多くなっています。

HTMLファイルには、表示する文章だけでなく、画像ファイルの場所やリンク先なども記述します。

ただし、画像そのものがHTMLファイルの中に保存されているとは限りません。多くの場合、HTMLには画像ファイルの保存場所が書かれており、ブラウザがその場所から画像を別途取得します。

WebブラウザはHTMLを画面へ変換する

Webブラウザは、WebサーバからHTMLなどのデータを受け取り、人が読みやすい画面へ変換するソフトウェアです。

代表的なWebブラウザには、Google Chrome、Microsoft Edge、Apple Safari、Mozilla Firefoxなどがあります。

HTMLファイルの中身をテキストエディタで開くと、タグや文章が文字として表示されます。

一方、同じHTMLファイルをブラウザで開くと、ブラウザがタグの意味を解析し、見出し、段落、一覧、リンクなどとして画面へ表示します。

つまり、HTMLはWebページの設計情報であり、ブラウザはその設計情報を読み取って画面を組み立てる役割を持っています。

ブラウザによって表示結果を確認する必要がある

基本的なHTMLは、一般的なブラウザでほぼ同じように解釈されます。

ただし、ブラウザの種類やバージョン、パソコンとスマートフォンの違いによって、表示や動作に差が生じることがあります。

そのため、Webページを制作するときは、複数の環境で正しく表示できるかを確認することが大切です。

HTMLの構造が適切であれば、さまざまな環境で内容を理解しやすいページになります。

見た目の細かな調整はCSSが担当しますが、その土台となる文章構造はHTMLによって作られます。

HTMLとCSSは異なる役割を持つ

HTMLとCSSは、Webページを作るときに一緒に使われることが多い技術です。

HTMLはページの内容や構造を表し、CSSは文字の色、背景、余白、配置などの見た目を整えます。

たとえば、商品の名前、説明文、価格、画像をHTMLで構造化し、それぞれの文字サイズや背景色、配置をCSSで整えます。

建物にたとえると、HTMLは柱、床、部屋などを作る構造にあたり、CSSは壁紙、色、家具の配置などを整える部分にあたります。

ただし、HTMLとCSSは完全に同じ役割ではありません。見た目を整えたいからといって、HTMLの構造を無視してよいわけではありません。

まずHTMLで情報の意味や順序を適切に表し、その上でCSSを使って読みやすいデザインへ整えることが大切です。

図2：HTML・CSS・ブラウザの役割

この図から分かること

HTMLとCSSは、Webページを作るために異なる役割を分担しています。

HTMLは、ページ内の情報が見出しなのか、文章なのか、画像なのかといった内容と構造を表します。

CSSは、HTMLで作られた内容に対して、文字色、背景色、余白、配置などの見た目を指定します。

ブラウザはHTMLとCSSを読み取り、それぞれの情報を組み合わせて画面へ表示します。

HTMLだけでもページの内容は表示できますが、CSSを利用することで、読みやすく整ったデザインにできます。

CSSを分けると複数ページの見た目を管理しやすい

Webサイトには、トップページ、会社案内、サービス紹介など、複数のHTMLファイルが存在することがあります。

それぞれのHTMLファイルへ同じデザインの指定を個別に書くと、文字色や余白を変更するときに、すべてのページを修正しなければなりません。

CSSを別のファイルとして用意し、複数のHTMLから共通して読み込むことで、Webサイト全体の見た目をまとめて管理しやすくなります。

たとえば、サイト全体の見出しの色を変更したい場合、共通のCSSファイルを修正すれば、そのCSSを利用している複数のページへ変更を反映できます。

HTMLは内容と構造、CSSは見た目という役割を分けることで、ページを作りやすくなり、後からの修正もしやすくなります。

CSSの具体的な記述方法については、CSSを扱う記事で順番に学習していきます。

WWWはリンクで広がる情報の世界

WWWはWorld Wide Webの略で、世界中に公開されたWebページがハイパーリンクによって結び付けられた仕組みです。

World Wideには世界中に広がるという意味があり、Webにはクモの巣という意味があります。

Webページ同士が複雑に結び付いている様子が、世界中に広がるクモの巣のように見えることから、World Wide Webと呼ばれています。

WebサイトのURLにwwwが付いていることがありますが、wwwはドメイン名の一部として使われる名前です。

たとえば、次のURLではwww.example.comがドメイン名です。

https://www.example.com/

ただし、すべてのWebサイトにwwwが付くわけではありません。

次のように、wwwを使用しないURLもあります。

https://example.com/

wwwの有無はWebサイトの設定によって異なります。wwwが付いていないからWebではない、という意味ではありません。

WebサーバはHTMLを公開する

Webサーバは、ブラウザなどのクライアントから届いたリクエストを受け取り、HTMLや画像などのデータを返すコンピュータまたはソフトウェアです。

Webサイトをインターネット上へ公開するときは、作成したHTMLファイルや画像ファイルをWebサーバへ保存します。

利用者がブラウザからそのWebサイトへアクセスすると、Webサーバが指定されたファイルを探し、レスポンスとして返します。

Webサーバという言葉は、Webサービスを提供するコンピュータそのものを指す場合と、そのコンピュータ上で動くソフトウェアを指す場合があります。

代表的なWebサーバソフトウェアには、Apache HTTP Server、Nginx、Microsoft IISなどがあります。

これらのソフトウェアは、ブラウザからのリクエストを受け付け、指定されたHTMLなどを返す役割を持っています。

クライアントはWebサーバへページを要求する

Webページを閲覧するとき、ブラウザはクライアントとして動作します。

利用者がURLを入力すると、ブラウザはURLに示されたWebサーバへ、ページのデータを送ってほしいというリクエストを送ります。

Webサーバはリクエストを受け取ると、指定されたHTMLファイルを探します。

ファイルが見つかると、WebサーバはHTMLをレスポンスとしてブラウザへ返します。

ブラウザは受け取ったHTMLを解析し、見出し、段落、画像、リンクなどを画面に表示します。

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

このようなクライアントとサーバの役割分担を、クライアントサーバ方式といいます。

クライアントはサービスを利用する側、サーバはサービスを提供する側です。

静的Webページは保存されたHTMLをそのまま返す

あらかじめ作成してWebサーバへ保存したHTMLファイルを、そのままブラウザへ返すページを静的Webページといいます。

会社案内、店舗情報、利用規約など、表示内容が頻繁に変わらないページで利用されます。

静的Webページでは、Webサーバが複雑な計算を行わず、保存されているHTMLをそのまま返すため、比較的単純な仕組みで公開できます。

ただし、内容を変更するときは、基本的にHTMLファイルを編集してWebサーバ上のファイルを更新する必要があります。

動的Webページは必要に応じてHTMLを作る

Webページには、アクセスした利用者や検索条件によって内容が変わるものもあります。

たとえば、ショッピングサイトの商品検索、会員ページ、予約状況、ニュース一覧などです。

このようなページでは、Webサーバやその背後にあるプログラムが、利用者からのリクエストに応じて必要なデータを取得し、その時点の内容に合わせてHTMLを生成します。

ブラウザから見ると、静的Webページでも動的Webページでも、最終的にHTMLなどのデータを受け取って表示する点は同じです。

違いは、Webサーバ側でHTMLがどのように用意されるかにあります。

HTMLだけでなく画像も個別に要求される

ブラウザがWebサーバからHTMLを受け取ると、HTMLの内容を上から順番に解析します。

その途中で画像などの読み込み指定を見つけると、ブラウザは画像ファイルを取得するための新しいリクエストを送ります。

たとえば、HTML内に3枚の画像が指定されている場合、ブラウザはHTMLに加えて、それぞれの画像もWebサーバへ要求します。

Webページは、一つのHTMLファイルだけで構成されているとは限りません。

HTMLを中心に、画像、CSSなど複数のファイルを組み合わせて作られています。

ブラウザは必要なファイルを順番に取得し、それらを組み合わせて一つのページとして表示します。

HTTPはWebのデータをやり取りするルール

ブラウザとWebサーバがWebページのデータをやり取りするときには、HTTPという通信ルールが利用されます。

HTTPはHypertext Transfer Protocolの略で、ハイパーテキストを転送するためのプロトコルという意味があります。

プロトコルとは、通信する機器同士が共通して利用するルールです。

ブラウザとWebサーバが異なる会社や異なるOSで作られていても、HTTPという共通ルールに従うことで通信できます。

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

ブラウザは、表示したいページの場所や利用できるデータ形式などをリクエストに含めます。

Webサーバは、その要求を確認し、処理結果やHTMLなどをレスポンスとして返します。

GETリクエストでページを取得する

Webページを取得するときによく使われるHTTPの方法がGETです。

ブラウザでURLを入力したり、リンクを選んだりすると、一般的にはGETリクエストがWebサーバへ送られます。

GETには、指定したページやデータを取得するという役割があります。

HTML学習の初期段階では、ブラウザがGETリクエストを送り、WebサーバがHTMLを返すという基本的な流れを押さえておけば十分です。

Webサーバはステータスコードを返す

HTTPレスポンスには、HTMLなどのデータだけでなく、リクエストの処理結果を表すステータスコードが含まれます。

ページが正常に返された場合は、一般的に200が使われます。

存在しないURLへアクセスした場合は、404が返されることがあります。

404は、ブラウザとWebサーバがまったく通信できなかったという意味ではありません。Webサーバにはリクエストが届いたものの、指定されたページを見つけられなかったことを示します。

ステータスコードを理解すると、ページが表示されない原因を確認しやすくなります。

HTTPSは通信を暗号化する

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

HTTPで通信すると、通信経路上で内容を読み取られたり、変更されたりする危険があります。

HTTPSでは、ブラウザとWebサーバの間で暗号化された通信経路を作り、HTMLや入力内容などを安全にやり取りできるようにします。

現在では、企業サイト、通販サイト、会員サイトだけでなく、一般的な情報サイトでもHTTPSが広く利用されています。

パスワードや個人情報を入力するページでは、特にHTTPSが重要です。

HTTPSではWebサーバの証明書を確認する

HTTPS通信を始めるとき、ブラウザはWebサーバから送られるサーバ証明書を確認します。

サーバ証明書は、接続先のWebサイトが誰のものであるかを確認し、暗号化通信に必要な情報をやり取りするために使われます。

HTTPSには、主に次のような目的があります。

ただし、HTTPSを使用しているWebサイトであれば、掲載されている内容も必ず安全であるという意味ではありません。

HTTPSは、主にブラウザとWebサーバの間の通信を保護する仕組みです。Webサイトを利用するときは、URLや運営者の情報も確認することが大切です。

URLはWebページの場所を示す

URLは、インターネット上にあるWebページやファイルの場所を示すアドレスです。

ブラウザはURLを読み取り、どの通信方法を使い、どのWebサーバへ接続し、どのページを要求するのかを判断します。

次のURLを例に構造を確認してみましょう。

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

URLの先頭にあるhttpsは、HTTPSによる暗号化通信を使用することを示しています。

www.example.comは、接続先のWebサーバを特定するために使われるドメイン名です。

guideは、Webサーバ上でファイルを分類するディレクトリを表します。index.htmlは、ブラウザが要求するHTMLファイルです。

ドメイン名はWebサーバの分かりやすい名前

インターネット上の通信では、接続先をIPアドレスで識別します。

しかし、IPアドレスは数字や記号で構成されているため、人が覚えて利用するには不便です。

そこで、www.example.comのようなドメイン名が使われます。

ドメイン名は、人が覚えやすいWebサイトやサーバの名前です。

ブラウザへURLを入力すると、DNSという仕組みを使って、ドメイン名に対応するIPアドレスが調べられます。

IPアドレスが分かると、ブラウザはそのIPアドレスを持つWebサーバへ接続します。

利用者はドメイン名を入力するだけでよいため、複雑なIPアドレスを覚える必要はありません。

URLを入力してからWebページが表示されるまで

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

利用者がURLを入力すると、ブラウザは最初に接続先の情報を確認します。

次に、DNSを利用してドメイン名からIPアドレスを取得し、Webサーバとの通信を始めます。

HTTPSを使用する場合は、安全に通信するための暗号化処理も行われます。

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

Webサーバは指定されたHTMLを見つけ、HTTPレスポンスとしてブラウザへ返します。

ブラウザはHTMLを解析し、必要に応じて画像などを追加で取得しながら、画面を組み立てます。

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

この図から分かること

ブラウザへURLを入力してからWebページが表示されるまでには、DNS、Webサーバ、HTTP、HTTPS、HTML、ブラウザなど、複数の仕組みが関わっています。

最初にDNSを使って、ドメイン名に対応するWebサーバのIPアドレスを調べます。

接続先が分かると、ブラウザはWebサーバへ接続し、表示したいページをHTTPリクエストとして要求します。

HTTPSを使用する場合は、ブラウザとWebサーバの間の通信が暗号化されます。

Webサーバは要求されたHTMLや画像などをHTTPレスポンスとして返します。

ブラウザは受け取ったHTMLを解析し、パソコン、タブレット、スマートフォンなどの画面にWebページとして表示します。

Webサーバ上のファイル構成とURLは関係している

Webサーバ上では、HTMLや画像などのファイルをディレクトリに分けて管理します。

このファイル構成は、URLのパスと関係します。

たとえば、Webサーバ上に次のような構成があるとします。

Webサイト
 ├─ index.html
 ├─ company
 │   └─ index.html
 ├─ service
 │   └─ index.html
 └─ images
     └─ logo.png

トップページのURLは、次のようになります。

https://www.example.com/

会社案内ページは、次のようになります。

https://www.example.com/company/

サービス紹介ページは、次のようになります。

https://www.example.com/service/

画像ファイルは、次のようなURLで指定できます。

https://www.example.com/images/logo.png

ファイルやディレクトリの名前は、URLの一部として外部から見える場合があります。

そのため、Web制作では、ファイル名やディレクトリ名を分かりやすく整理することが大切です。

index.htmlが省略される仕組み

WebサイトのURLでは、HTMLファイル名が表示されていないことがあります。

たとえば、次のURLにはファイル名が含まれていません。

https://www.example.com/company/

このようなURLへアクセスした場合、Webサーバはcompanyディレクトリ内にある既定のファイルを探します。

多くのWebサーバでは、index.htmlが既定のファイルとして設定されています。

そのため、次の二つのURLが同じページを表示することがあります。

https://www.example.com/company/

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

ファイル名を省略したURLは短く分かりやすいため、多くのWebサイトで利用されています。

ただし、どのファイルを既定として表示するかは、Webサーバの設定によって異なる場合があります。

Webページが表示されない原因はHTMLだけではない

作成したWebページが表示されないときは、必ずしもHTMLの記述だけが原因とは限りません。

Webページが表示されるまでには、URL、DNS、通信、Webサーバ、ファイルの保存場所などが関係しています。

たとえば、404が表示された場合は、Webサーバへ接続できていても、指定されたHTMLファイルが見つからない可能性があります。

URLのファイル名と実際のファイル名が一致しているか、正しいディレクトリへ保存されているかを確認します。

何も接続できない場合は、Webサーバが起動しているか、ネットワークやDNSに問題がないかも確認する必要があります。

ローカル表示とWebサーバからの表示は異なる

作成したHTMLファイルは、自分のパソコン内で直接開いて確認できます。

このように、自分の端末に保存されたファイルをブラウザで表示することを、ローカル環境での表示といいます。

一方、WebサーバへHTMLを配置し、HTTPやHTTPSを使って取得する方法が、Webサーバを通した表示です。

ローカル環境で正しく表示できても、Webサーバへ配置した後に、ファイル名や保存場所の違いによって画像やリンクが表示されなくなることがあります。

そのため、Webページを公開するときは、Webサーバ上でも表示やリンクを確認する必要があります。

大文字と小文字の違いに注意する

WebサーバでLinuxが使われている場合、ファイル名の大文字と小文字が区別されることがあります。

たとえば、次のファイル名は別のファイルとして扱われる可能性があります。

Index.html
index.html
INDEX.HTML

ローカル環境では表示できていたページが、Webサーバへ公開すると表示できなくなる場合、ファイル名の大文字と小文字が一致しているかを確認します。

混乱を防ぐため、HTMLや画像のファイル名には、基本的に半角英数字の小文字を使用すると管理しやすくなります。

分かりやすいファイル名とディレクトリ構成を考えることも、Web制作の大切な作業です。

Webサーバを理解するとHTMLの役割が明確になる

HTMLを学習していると、タグの書き方やブラウザ上の表示に注目しがちです。

しかし、インターネット上で公開されているHTMLは、Webサーバからブラウザへ送られてきたデータです。

HTMLはページの内容と構造を伝え、WebサーバはそのHTMLを必要な利用者へ届けます。ブラウザは受け取ったHTMLを解析し、人が読めるWebページとして表示します。

これらは別々の技術ですが、一つのWebページを表示するために連携しています。

HTMLだけでは、世界中の利用者へページを届けることはできません。Webサーバだけでも、表示するHTMLがなければページの内容を提供できません。

HTML、Webサーバ、ブラウザ、HTTP・HTTPS、URLがそれぞれの役割を果たすことで、利用者は世界中のWebページへ簡単にアクセスできます。

Webサーバの役割を意識しながらHTMLを学ぶと、自分が作成しているファイルが、最終的にどこへ置かれ、どのように利用者へ届くのかを具体的にイメージできるようになります。