ホームページはどういう仕組みで表示される?

ホームページは、いくつかの技術が組み合わさって、画面に表示されます。仕組みを知ると、トラブルが起きたときにも落ち着いて対応できます。
- ホームページを表示するために必要なもの
- サーバーとは?
- ドメインとは?
- HTMLとは?
- CSS・JavaScriptとは?
- CMSとは?
- ホームページが表示される仕組みを図解
裏側の仕組みを、基本から順番に確認していきましょう。
ホームページを表示するために必要なもの
ホームページを表示するために必要なものは、大きく分けて4つあります。どれか一つでも欠けると、画面にページが映りません。
- ブラウザ:ページを表示する専用ソフト
- インターネット:情報をやり取りする通信網
- サーバー:Webページのデータを保管する機器
- ドメイン:サーバーの場所を示す住所
4つの要素がそろって初めて、ホームページを見る環境が整います。パソコンやスマートフォンの中だけに、4つの要素すべてが入っているわけではありません。次のセクションから、各要素の役割をくわしく見ていきましょう。
サーバーとは?
サーバーとは、Webページのデータを保管して、必要なときに送り出す機器です。インターネットにつながる、大きなコンピューターのような存在と考えてください。
利用者がブラウザでページを開こうとすると、サーバーに向けてリクエストと呼ばれる合図が送られます。合図を受け取ったサーバーは、保管しているデータを取り出して、ブラウザに送り返します。送られたデータをもとに、画面上にホームページが組み立てられる仕組みです。
サーバーには、レンタルサーバーや自社サーバーなど、いくつかの種類があります。個人や中小企業の多くは、月額料金を払って利用できる、レンタルサーバーを選ぶ場合がほとんどです。
ドメインとは?
ドメインとは、インターネット上にある住所を、人が読める文字列で表したものです。サーバーには、IPアドレスと呼ばれる数字の並びが割り当てられています。
数字の並びは覚えにくいため、ドメインの文字列に置きかえて使います。たとえば、「example.co.jp」のような文字列が、ドメインの実例です。会社名やサービス名をもとに、印象に残るドメインを選ぶ会社も多くあります。
ドメインは、世界に一つしかない、独自の住所です。同じドメインを、ほかの誰かが同時に使えない決まりになっています。
HTMLとは?
HTMLとは、ホームページの骨組みを作るための言語です。見出しや段落、画像の位置など、ページの構造を指定する役割をもちます。
たとえば、見出しにしたい文章をタグで囲むと、ブラウザが見出しとして認識します。文章や画像に、意味や役割を与えるタグを組み合わせて、ページの骨組みができあがるのです。
HTMLがなければ、文章や画像は、ただの情報のかたまりにすぎません。見た目を整えたり、色をつけたりする作業は、次に紹介するCSSの役目です。
CSS・JavaScriptとは?
CSS・JavaScriptとは、ホームページの見た目や動きを作る言語です。HTMLで組み立てた骨組みに、色や装飾、動きを加える役割をもちます。
CSSは、文字の色や大きさ、背景の色、余白の広さなど、見た目を整えるための言語です。同じHTMLの骨組みでも、CSSの指定しだいで、印象は大きく変わります。
JavaScriptは、ページに動きや反応を加える言語です。ボタンを押すとメニューが開いたり、入力欄に文字を入れると即座にチェックが入ったりする動きは、JavaScriptによって作られています。
CMSとは?
CMSとは、専門知識がなくても、ホームページを更新できる仕組みです。正式には「コンテンツ・マネジメント・システム」の略称です。
HTMLやCSSの知識がなくても、文章や画像を入力するだけで、ページを作成したり更新したりできます。企業の担当者や個人事業主にも、広く使われています。
WordPressとは?
WordPressとは、世界中で広く使われている、代表的なCMSです。無料で使えるうえに、豊富な機能を追加できる点が特徴です。
デザインのテンプレートや、便利な機能を追加するプラグインが、数多く公開されています。組み合わせを選ぶだけで、専門知識が少ない人でも、本格的なホームページを作成できます。
企業のコーポレートサイトから個人のブログまで、幅広い用途で選ばれているCMSです。
ホームページが表示される仕組みを図解
ホームページが表示される仕組みを図解すると、次の順番で処理が進みます。
ブラウザ → URL → サーバー → Webページ表示
まず、ブラウザに知りたいホームページのURLを入力します。入力されたURLは、対応するサーバーへ、インターネットを通じて届く仕組みです。
URLを受け取ったサーバーは、保管しているデータを取り出して、ブラウザへ送り返します。送られたデータをもとに、ブラウザが画面を組み立てると、Webページとして表示されるのです。仕組みがわかれば、作り方の流れもすっと頭に入ります。次は、実際の作成方法を見ていきましょう。


