Webサイトが表示される仕組みからWebブラウザの種類まで、Webサイトの制作を始める前に知っておきたい基礎知識を紹介します。
Webページとは、Webブラウザ（以下、ブラウザ）のウィンドウに一度に表示される画面のことを指します。１つのWebページは、１枚のHTMLファイル、および画像、レイアウト情報が記述されたCSSなどの関連ファイルで構成されています。また、ブラウザからアクセスして表示するために、HTMLファイルを含め、Webページで使用されるすべてのファイルにはそれぞれ固有のURLが割り当てられています。
Webサイトは、複数のWebページで構成されているまとまりのことを指します。Webサイトは「サイト」または「ホームページ」と呼ばれることもあります。
Webサイトを閲覧するには、ブラウザを使用します。
ブラウザは、アドレスバーに表示されているURLのファイルを、Webサーバにリクエストして、データをダウンロードします。ブラウザは、ダウンロードが完了したデータから順に、ブラウザウィンドウに表示します。
Webページを表示するには、最低でも１枚のHTMLファイルをWebサーバからダウンロードしてくる必要があります。ダウンロードしてきたHTMLには、たいてい、そのページに表示させたい画像やスタイルシート（CSS）ファイルが保存されている場所（URL）などのリンクが複数含まれています。
ブラウザがHTMLや画像など、表示させたいコンテンツをWebサーバにリクエストするには、そのファイルが保存されている「Webサーバがどこにあるのか」「Webサーバのどこに保存されているのか」がわかる正確な情報が必要です。
HTMLファイルや画像ファイルなどが保存されている場所を示すのがURLです。すべてのファイルに唯一のURLが割り当てられています。
| URL |
|---|
| https://www.yugien.xyz/ |
| https://www.yugien.xyz/web/ |
| https://www.yugien.xyz/web/index.html |
ドメインとは、「Webサーバの場所」を示す情報です。たとえば、当サイトのドメインは「wot.exp.jp」で、会社や個人がドメイン登録団体に申請を出して取得します。すべてのドメインは世界に１つしかありません。
あるドメインに対して複数のWebサーバが割り当てられている場合に、それらを区別するために使用するのがホスト名（またはサブドメイン）です。Webページのデータを提供するWebサーバには、ホスト名が付かないか、「www」というホスト名が付くことが多いです。
| ホスト名 | URL |
|---|---|
| なし | https://www.yugien.xyz/ |
| www | https://www.wot.exp.jp/ |
URLの先頭は必ず「スキーム://」という形になっています。
インターネット上では、Webページで使われるHTMLや画像ファイル以外にも、さまざまなデータが送受信されています（たとえばメールのデータなど）。あるデータを送受信する際、そのデータがWebページに使われるものなのか、メールなのか、あるいはそれ以外のものなのかを区別するのが「スキーム」です。Webページで使われるデータを送受信する際のスキームは「http」または「https」です。
| スキーム | 説明 |
|---|---|
| http | HTMLドキュメントと関連するCSS、画像データなどを送受信するための通信方式。 |
| https | 送受信するデータはhttpと同じだが、通信が暗号化されている。 |
| ftp | ファイルをWebサーバに転送するときに使用するスキーム。WebサイトのデータをWebサーバにアップロードするときなどに使用する。 |
ブラウザにはさまざまな種類があります。主要なブラウザには、WindowsにプリインストールされているInternet Explorer（以下、IE）、Mac OS XにプリインストールされているSafariをはじめ、Google ChromeやMozilla Firefoxなどがあります。
また、iPhoneやiPadにはモバイル版のSafari、AndroidにはAndroidブラウザもしくはモバイル版Chromeがインストールされています。
それぞれのブラウザは、HTMLやCSSをパース（解析）して画面に表示する機能を持つ「レンダリングエンジン」というソフトウェアを中心に開発されています。パソコン版Safariとモバイル版Safariは、ユーザーが操作するインターフェースは異なりますが、レンダリングエンジンは同じです。パソコン版のGoogle Chromeと、比較的新しいバージョンのAndroidブラウザのレンダリングエンジンも同一です。
| ブラウザ | レンダリングエンジン | 主な対応機器・OS |
|---|---|---|
| Internet Explorer | Trident | Windows |
| Safari | WebKit | Mac OS X, iOS |
| Google Chrome | Blink | Windows, Mac OS X, Android, iOS |
| Mozille Firefox | Gecko | Windows, Mac OS X |
たとえ同じHTMLやCSSを使用していても、ブラウザの種類やバージョンによって表示が異なることがあります。近年、表示の違いは非常に少なくなってきていますが、Webサイトを作成するときは、できるだけたくさんの種類のブラウザで表示を確認しましょう。
WindowsやMac OS X、iPhoneや一部のスマートフォン、携帯電話には、スクリーンリーダーと呼ばれる機能が搭載さていて、Webページの内容を音声にして読み上げてくれています。また、音声ブラウザ（読み上げブラウザ）と呼ばれる専用ブラウザもあり、視覚障害者の支援ソフトとして使われています。どんな人でも等しく情報を取得できたり、操作できたりするように配慮することは「アクセシビリティ」と呼ばれています。Webサイトも、アクセシビリティに配慮して制作するようにしましょう。