ホームページの基礎知識 ホームページ制作

WEBサイトが表示される仕組みを簡単解説!

投稿日:

ここまでの講座では、ホームページを"家"に例えて、ホームページ制作に必要な用語をご説明してきました。

復習もかねて、簡単にまとめておくと、こんな感じです。もし、忘れちゃった… って人がいたら、ちょっと復習してみてくださいね。

WEBサイトを構成する重要な要素

さて、ここまでで、WEBサイトを構成する4つの要素を知っていただきましたが、中には、こんな鋭い疑問を持った社長さんもいらっしゃるんじゃ?

そう、WEBサイトの設計書となる HTMLとCSSは、サーバーに保管されていますが、その設計書通りに、組み立ててくれる "大工さん" の存在が必要です。

と言うことで、この記事では、WEBサイトが表示される一連の流れについて、ご説明したいと思います。

正しくは、WEBサイト。ホームページは違う意味だった?!

ちょっと話はズレますが、この記事に入ってから、ディースケが WEBサイトという言葉を多用しているのに、お気付きになられましたかね?

ホームページ = WEBサイトと認識している方が多いと思いますが… 実は、正しい名称は WEBサイトの方なんです。

今、アナタがネット上で見てくれている"このページ"を、WEBページと呼び、WEBページの集合体を、WEBサイトと言います。

ホームページと言う言葉は、本来は、ブラウザを開いたときに、一番最初に表示されるページのことで、WEBサイトとは異なる意味を持っています。

ただ、初心者さんにとっては、ホームページの方が馴染みが深く、イメージもしやすいので、ここまでの講座では、ホームページと表現していましたが、これからの講座では、"WEBサイト"と正しく表記していきますので、ご留意を。

ホームページ制作も、正しくは、WEBサイト制作ってことだな。まぁ、細かいところだけど、知識の一つとして覚えておいてくれよ。

それより、ブラウザって新しいヤツが登場したから、まずはソコから説明するぜ!

ブラウザは、設計書通りに、WEBページを組み立てる大工

もうお馴染みかと思いますが、ブラウザとは、インターネットのWEBページを閲覧するためのソフトの総称をいいます。

まだ、ピンと来てないアナタも、当サイトを見てくれていると言うことは、何かしらのブラウザを使っているはずで、代表的な ブラウザを挙げると…

代表的なブラウザ

  • Google chrome ( グーグルクローム )
  • Internet Explorer ( インターネットエクスプローラー )
  • Fire FOX ( ファイヤーフォックス )
  • Microsoft Edge ( マイクロソフト エッジ )
  • Opera ( オペラ )
  • Safari ( サファリ )
  • Vivaldi ( ビバルディ )

10年位前は、ブラウザと言ったら、Internet Explorer ってくらい独占的なシェアを占めていましたが、最近では、Google Chromeや、iPhoneの普及により Safariが主流になりつつあり、ブラウザも多様化・熾烈な生存競争が繰り広げられています。

ブラウザの語源は、英語のbrowseで、「(本などを)拾い読みする。と言った意味を持つ 動詞。

Play(プレイ)が、Player(プレイヤー)に変化するのと同じ仕組みで、このbrowseに、〇〇する人を表す erがついて、browserとなっています。つまり直訳すると、拾い読みをする人って感じですね(笑)

僕らは、このブラウザを利用することで、WEBページを見ることができるんですが、僕らが知らない裏側で、ブラウザが何をしているのかと言うと、HTML、CSSなどWEBサイトの設計書を受け取り、その設計書通りに表示してくれているんです。

つまり、ブラウザが、大工さんってことだな。

WEBページが見れるまでの仕組みと流れ

WEBページが見れるまでの仕組みと流れを、専門的なところまで深堀りしちゃうと…

DNSサーバー、IPアドレス、レジストラのような、ややこしい奴らが登場してきちゃうので、ここでは必要最低限の流れだけをご説明します。

自分でホームページを作って公開するだけなら、そんな難しいところまで掘り下げて覚える必要もないので(笑)

WEBページが表示されるまでの一連の流れ

  1. ブラウザのアドレスバーに、WEBページのアドレスが入力される。
  2. 入力された WEBページのアドレス(ドメイン)で、住所が分かる。DNS設定
  3. 住所を頼りに、そのWEBページのデータが置かれているサーバーにアクセス。DNS設定
  4. サーバーから、HTMLやCSSデータを貰う。
  5. 受け取ったHTMLやCSSデータを基に、ブラウザがWEBページを表示する。

ブラウザにアドレスを入力してから、WEBページが表示されるまでに、ほんの数秒。

でも、このように、裏側では、たくさんの処理が行われているんです。ちなみに、上記は、5つの工程に省略していますが、本当は、もっと複雑で、沢山の処理が行われてます。

図解入りで、詳細に説明してくれているサイトさんも多いと思うので、どうしても知りたいって方は調べてみてください。でも、専門家になる訳でもないですし、ここまでで十分ですが(笑)

重要なポイントは、住所があったとしても、どこの土地が、その住所に該当するのか定義する必要があるってことです。

住所と、その住所に該当する土地が正しく紐づけられていないと、ブラウザは、正しい土地に辿り着くことはできませんし、HTML・CSSファイルを貰うことはできません。

この、住所となる独自ドメインと、土地の場所(サーバー)を紐づける設定を DNS設定と言います。

DNS設定の方法については、独自ドメインを取得し、レンタルサーバーを契約してもらった後じゃないとできないので、改めて後日説明したいと思いますが、今は、「 そういった作業が必要なんだな~ 」くらいに覚えておいていただければと思います(笑)

それと、もう一つ大事なことは、ホームページ作成ソフトに作ってもらったHTML・CSSは、サーバーに置いておく必要があるってことです。

ホームページ作成ソフトを使った作業は、もちろん、アナタのお持ちのパソコンで行いますが、出来上がったHTML・CSSを、サーバーに送らないといけないんです。

だって、サーバーが、アクセスしてくるブラウザに対して、HTMLとCSSを渡してくれる役割なんですから。

このHTML・CSSを、サーバーに送る行為を、"データのアップロード"と言います。アップロードは、特定のツールを使うのが一般的ですが、ホームページ作成ソフトにもアップロード機能が搭載されてますので、ご安心を。

サーバーの語源も、なんとなく想像できたんじゃないか?

(飲み物など)を出す、給仕をするって意味の Serveって動詞に、erがついて Server。給仕する人って意味だな。

ビアサーバーが、ビールを給仕する人なら、WEBサーバーは、HTMLやCSSを給仕する人って意味だぜ。

次の講座は、衝撃の新事実!なんと、HTMLはプログラムじゃないって話だぜ。

次の講座
HTMLはプログラムではない!! プログラムとは?

前の講座でご説明させていただいたHTMLや、CSSだけで、どんなホームページも作れちゃう!って思ってる方も少なくないはず… お伝えするのは心苦しいですが、実は… HTML・CSSだけじゃ、実現できない ...

メルマガ始めました!

産地直送
店舗集客アップに役立つ情報を、WEB業界からダイレクトにお届けする、ディースケのメールマガジン雨天決行は、もちろん無料です(笑)
ディースケが、WEB業界の現場から、店舗集客に役立つ情報を、お届けしちゃうWEBマガジン…
その名も"雨天決行"

雨が降ろうと、槍が降ろうと、頑張る社長さんのために、ブログじゃ言えない 訳ありノウハウや、お勧めツールなど、情報盛り沢山(予定)

無料登録はこちらから

-ホームページの基礎知識, ホームページ制作

Copyright© セルフサービスホームページ , 2024 All Rights Reserved.