HTMLやCSSの学習を始める前にWebの基本的な知識や用語を知っておきましょう。またWebサイトがWebブラウザに表示されるまでの仕組みなどを理解しておくことも大切です。
このページの目次
ホームページとWebサイトの違い
一般的に、ホームページとWebサイトの違いを使い分けることはあまりありません。日本では、「ホームページ＝Webサイト」という認識が広く浸透しています。もともとこの２つの言葉は違うものを指すものだったのですが、Webが広まっていく間に同じものを意味する言葉として認識されるようになりました。
では、そもそもこの２つの言葉にはどのような意味があるのでしょう。
Webサイトとは
今見ているこのページのようにインターネット上にある個々のページを「Webページ」と呼びます。そして、複数のWebページまとまりを「Webサイト」と呼びます。
「webサイト」のサイト（site）は、「敷地、用地、場所」などの意味を持ちます。複数のWebページがひとつにまとまった「場所」という意味ということですね。
ホームページとは
「ホームページ」には大きく分けて２つの意味があります。
１つは「Google chrome」や「Microsoft Edge」、「Safari」といったWebブラウザには起動したときに一番最初に表示するWebページを設定できる機能があり、特にそのページのことを「ホームページ」と呼んでいます。ただし、これはWebブラウザの話をしているとき限定の使われ方ですので文脈から意味を察することができるでしょう。
もう１つは、Webサイトの最初のページを指す場合です。Webサイトを構成する一番上位に位置するページで、閲覧する際の拠点になるページのことをホームページと呼んでいました。
つまり、ホームページとは、本来Webサイトのトップページのことのみを指す言葉として使われていたもので、サイト全体のことを指す意味ではないのです。
日本では一般的にトップページもWebサイトもWebページもすべてホームページと呼ばれている場合が多いのですが、正確には異なるものを指していることを知っておきましょう。
インターネットとWeb
「インターネット」や「Web」といった言葉も混同して使われることがありますが、その意味は異なります。インターネットとWebの違いを理解しておきましょう。
インターネットとは
もともと、コンピュータ同士をケーブルや無線などを使って繋いで、お互いに情報をやりとりできるようにした仕組みを「ネットワーク」といいます。コンピュータネットワークには様々なものがあるのですが、その中でもインターネットは特に「TCP/IPプロトコル」を使って通信をする相互ネットワークのことを指しています。
インターネットというのは、TCP/IPプロトコルを使って様々な通信回線を通して世界中のコンピュータ同士が繋がっている世界レベルのネットワークといえます。
インターネットは、イメージで言うとコンピューター同士を繋ぐ情報の道のようなものだと考えてもいいでしょう。
Note
「プロトコル」とは通信に関する規格のことで、共通のルールを取り決めてどんなコンピュータ同士でも情報のやり取りができるためのものです。
インターネットの中のWeb
では、Webとは何でしょう？
インターネットはネットワークシステム全体を指すものですが、Webはインターネットという技術を利用する情報を扱う仕組みの一つにすぎません。
インターネット上では、Web以外にも電子メール（E-mail）やクレジット決済、IP電話、オンラインゲーム、ファイル共有などがあり、さまざまなデータを複数のコンピューター間でやりとりすることができる仕組みがあります。
技術的な面でいうと、Webはインターネットの通信プロトコルであるTCP/IPプロトコル上で動く「HTTPプロトコル」を利用してテキストや画像、音声、映像などのデータをやり取りするものを指しています。
つまり、Webとはインターネットという通信網を利用して、文章、画像、映像・音楽などの情報を発信したり見たりすることができる仕組みといえるでしょう。
Webの根幹技術ハイパーテキスト
Webの仕組みに使われているのが「ハイパーテキスト（Hyper Text）」というシステムで、ハイパーテキストはインターネット上に散らばって存在する文書データ同士を結びつけて、それをたどることで文書を移動しながら見ることができるようにする仕組みです。
Note
ハイパーテキストとは「テキストを超える」という意味で、文書の一部に関連する他の文書を参照情報を埋め込んだ「ハイパーリンク」というもので、複数の文書データ（文章、画像、音声など）を結びつける機能です。
ハイパーテキストによって、世界中の文書データが蜘蛛の巣（webとは英語で蜘蛛の巣の意味）のように繋がって見えることから「World Wide Web」という名前がつけられました。現在ではこれが略されて「Web」だけ呼ばれることが多くなりました。
Webとはハイパーテキストという機能の全体像を表しているとも言るので、実際のシステムやモノというより概念に近いということですね。
Note
ハイパーテキストを実現するための言語「HTML（Hypertext Markup Language）」で書かれた文書は「HTMLドキュメント」と呼ばれ、これらのファイルは「htmlファイル」として保存されます。
WebサイトがWebブラウザに表示されるまでの仕組み
Webページになるhtmlファイルはいったいどこにあるのでしょうか。Webブラウザで見ているWebページのデータは「Webサーバ」と言ところに保存されています。
Webサーバとは
Webサーバとは、Webページを表示させるために必要なファイルデータを保有していて、Webブラウザからのこのページやデータを表示したいというような「リクエスト」に応じて、HTMLや画像などのデータをWebブラウザに送ってくれるコンピュータまたはソフトウェアのことです。
Webは膨大な数のWebサーバが集まってできていて、その中に無数のWebサイトが存在しています。
Webブラウザが目的のWebサイトを見つけ出し、Webサーバに保存されているデータがどのような仕組みでWebブラウザに表示されるのかを知っておくことは大切です。
WebブラウザでWebサイトには「URL」でアクセスすることができます。
URLの仕組み
URL（Uniform Resource Locator）とは、WebサイトやWebページを閲覧するときなどに指定するインターネット上での場所を示すものです。URLはインターネット上の「住所」と考えればわかりやすいでしょう。
URLはいくつかの要素が組み合わさることで成り立っていて、その各部分によって役割があります。
①プロトコル
「プロトコル」とは通信プロトコルとも呼ばれ、インターネットを通じてデータのやり取りをする際のルールのようなものです。
WebサーバとWebブラウザの間でデータを送受信するものとして「httpプロトコル」が使用されています。「https」はhttpにデータを暗号化する機能を付与したものです。
②スキーム
「スキーム」とは、URLの構造や枠組みを表す部分で、どのプロトコルでデータのやり取りをするかを示しています。例えば「https://」の場合にはHTTPSで通信することを示していることになります。
③ドメイン
「ドメイン」は他のwebサイトとは絶対に被らない唯一無二の名前という役割を持っていて、１つのWebサイトにつき必ず１つ割り当てられています。WebサイトのあるWebサーバを見つけるためのものです。
「ドメイン＝住所」といわれることがありますが、厳密には「ドメイン＝唯一無二」の名前と理解しておくほうがいいでしょう。
④ディレクトリ
「ディレクトリ」とは、サーバー内にデータを保管しておく場所（フォルダ）のことです。基本的にサイト内の階層構造を表していて、ディレクトリはこのURLがサイト内のどの階層に位置するか示しています。
⑤ファイル名
「ファイル名」は、URLの最後にあり、実際にWebブラウザで表示したいファイルそのものの名前を指定します。
ではこのURLを使って、どのようにWebサイトを見つけ出すのでしょう？
その仕組みを理解するには「IPアドレス」と「DNS」と「ドメイン」の関係について知っておかなければなりません。
IPアドレスとは
IPアドレスとはインターネットに接続する機器インターネットなどのIPネットワークに接続する機器や端末に割り当てられる固有の識別番号です。IPアドレスは、0〜255の4組の番号を割り振られた数字の組み合わせで、世界的に割り当てるアドレスが管理されているため、IPアドレスが重複することはありません。
WebサーバにあるWebサイトにはそれぞれ固有のIPアドレスが割り当てられていて、これによりWebサイトの場所を特定することができます。 つまりWebサイトの場所は「IPアドレス」で管理されていることになります。
ただ、URLを見てみるとどこにもIPアドレスを指定している部分がありません。URLからWebサーバを見つけるためにドメインとIPアドレスを関係づける「DNS」という重要な仕組みがあるのです。
DNSとは
DNSとは「Dmain name system（ドメイン・ネーム・システム）」の略で、WebサイトのドメインとIPアドレスを紐づけるシステムです。アクセス先のWebサイトのドメインをDNSシステムに照会し、そのWebサイトのIPアドレスを参照するものです。DNSが動いているコンピュータのことを「 DNSサーバ 」といいます。
WebサイトがWebブラウザで表示されるまでの流れ
Webブラウザはアドレスバーに入力したURLからDNSサーバに対して目的のドメインのIPアドレスを問い合わせます❶。するとDNSサーバから目的のwebサイトのドメインに紐づいているIPアドレスが返ってきます❷。
DNSサーバから返ってきたIPアドレスをもとにWebサーバへ接続し❸、Webサイトのデータが保管されているWebサーバに要求します。
ファイルを送信するよう要求を受けたWebサーバは、閲覧しているコンピュータにHTMLファイルなどのデータを送信します❹。
送信されたHTMLファイルはWebブラウザにWebページとして表示され、これでユーザーはURLで指定したWebページを閲覧できるようになるのです。
Webブラウザについて知ろう
Web制作にかかわらなければそれほどWebブラウザについて意識することはないかもしれません。 しかし、Webブラウザの違いはWebサイトの機能だけでなく、その表現にも大きな影響を及ぼします。Webブラウザの違いやについて知っておきましょう。
Webブラウザとは、Webサイトを閲覧するためのソフトウェアを指します。Webサーバに接続して取得したファイルは HTMLやCSSと呼ばれるコンピューター言語で書かれています。Webブラウザはそのコードデータや画像データなどを解析し、視覚的に表現されたウェブページとして表示してくれます。 Webブラウザが読み取り適切に人間が閲覧できるように変換することを「レンダリング」といいます。またこれ以外にも、Webブラウザの重要な機能としてハイパーリンクなどがあります。
Webブラウザの種類
Webブラウザには様々な種類があります。Windows 10 であれば 「Microsoft Edge」、「Internet Explorer 」、Mac OSやiOS であれば 「Safari」、Androidであれば「Google Chrome」が標準でインストールされています。Mozilla Foundationが開発・提供しているオープンソースのブラウザ「Firefox」などもよく使用されています。
2021年6月現在、日本国内では、Android用も含めるとGoogle Chromeが50%近くのシェアを占めています。
Webブラウザの違いにより、レンダリングする機能（レンダリングエンジン）が異なります。このレンダリングエンジンの違いは、同じコードでも異なる表示結果になってしまうことがあります。
現在、WebブラウザはWebサイトを閲覧するだけでなく、さまざまなWebサービス運用のプラットフォームになっています。Webブラウザはユーザーの要望や技術の進歩により進化していますが、それ対応するタイミングはWebブラウザの種類によって差が出てしまいます。そのためWebブラウザによって表示結果の「違い」がおこるのです。
Webページを制作するときには、複数のブラウザで表示させて、できるだけ表示に大きな違いがでないように作るようにしましょう。