LINEで現役エンジニアに直接質問してみよう!登録無料

【初心者向け】Webサイトの仕組みをサクッと解説

SHARE

「これからWebについて学びたいけど、Webサイトの仕組みが分からない!」そんな人でも理解できるように、沢山図解を用意してWebの仕組みを解説していきます!

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

まず初心者に多いのが、Webサイトとホームページを混同して覚えていることです。ここの違いがわかっていないと今後の学習で混乱するので、バシッと理解しておきましょう!

ホームページとは?

ホームページとは、本来Google Chrome、Safari、Firefoxのブラウザで利用するとき、最初に表示される画面の事です。別名で「トップページ」とも呼ばれます。

そこから派生してWebサイトのトップページを指す意味でも使われています。

インターネット上には「ホームページビルダー」「ホームページ作成ならWix」など、本来の意味とは異なる使い方がされ、あたかも「Webサイト = ホームページ」という風に思ってしまう流れがありますが、本来は違うのでしっかり覚えておきましょう!

また、ホームページ(ブラウザを最初に立ち上げた時に表示する画面)は、各種ブラウザの「設定」で変更可能です。

Webサイトとは?

「Webサイト」が、今あなたの思っているモノです。このページもWebサイトの中の1ページです。

この記事では、ホームページとWebサイトを明確に区別し、「Webサイト」と統一して話を進めていきます!

Webサイトとインターネットの違い

これも、よく初心者が勘違いしやすいモノなので、ここで解説していきます!

インターネットとは?

インターネットとは、簡単にいうと「連絡網」です。

小学校やサークルなどで、情報をみんなに伝えるために電話番号を書いて、どのように情報を流すかを書いた表をみたことがあるとおもいます。
あれを、電話ではなく「ネット」という仕組みで伝えるようにしたのが「インターネット」です。

例えば、上の図で①から②まで連絡網を使って情報を伝えようとした場合、左から2番目の人に電話をして内容をつたえ、それを次の人に伝え、、、という感じで最終的に②の人に情報がたどり着きます。次の人に伝えるには、電話番号があれば伝えることができますよね?

Webの世界では、このように「情報をどんどん次の人に渡して最終的に情報を求めている人まで届ける」というのを早くしたものが「インターネット」だと思ってもらえれば今はOKです。

また、この時の電話番号に当たるものを、Webの世界で「IPアドレス」と言います。

Webサイトとの関連は?

Webサイトとは、このインターネットを使った利用の仕方の1つです。

というもの、インターネットにはWebサイトだけではなく、「メール」「IP電話」「ファイル共有」「プッシュ通知」「DNS」「データベース通信」など様々な利用方法があります。Webサイトはその中の1つに過ぎないということです。

まとめると、「Webサイト < インターネット」という関係です!

Webサイトの機能 “ど”基本

Webサイトで一番基本的な機能である

  • ハイパーリンク
  • ハイパーテキスト

について解説していきます。

この考えは、Webが考案されて世界中にサーバーが数台しかなかった時に考え出された概念です。

ハイパーリンク

ハイパーリンクとは、文章と文章をつなげる機能(システム)の事を言います。

ハイパーリンクが登場する前は、1つ1つのコンテンツをURLを指定してみなければいけませんでいた。それでは面倒ですよね?
そこで、クリックしただけで別のページに移動できるシステムを1990年ティム・バーナーズ=リーが開発しました。

この仕組みそのものを「ハイパーリンク」と言います。

ハイパーリンクのおかげで、1つ1つのURLを覚える必要な無くなり、リンクされたまとめ1ページがあれば良くなりました。

ハイパーテキスト

具体的に「ハイパーテキスト」を持った文字のことをハイパーテキストと言います。

例えば、下記のようにWebサイトのヘッダー、文章テキストなどにはハイパーテキストが仕込まれていて、クリックすると別のページに移動することができます。

その他にも、サイドメニューなど様々なところに使われています。

MEMO

URLの”http://wwww.”の「www」とは?

URLを使う時にhttp: //wwww.〜〜が有る事がありますよね。その「www」とは、「world wide web」の略なんです。今では、「www」をつけることは見かけなくなりました。

正直、付けても付けなくてもWebサイトとしては正常に機能します。ただの歴史的経緯なんです。

WebサイトとWebページとは?

これも初心者にとって違いがわからず混乱するキーワードだと思いますので、解説します。

結論から言うと、Webサイトとは「同じドメインのWebページの集まり」の事です。

例えば上のAppleのサイトでは、「www.apple.com」というドメインを使っています。このドメイン名が同じページをすべてまとめて「Webサイト」と言います。逆にWebサイトを構成している1つ1つの事を「Webページ」と言います。

このWebページ同士は、ハイパーリンクによってリンク付されていて、ヘッダーや画像などに付けられているハイパーテキストによって簡単にページ間を移動できます。

Webサイトの世界と用語を理解する

ここまでの解説で、インターネットとWebサイトについて理解できたと思います。ここではそのインターネットやWebサイトを支えている下記の〇〇つの技術について解説したいと思います。

  • サーバー
  • IPアドレス
  • Webサイト
  • ドメイン
  • DNS

これらの技術はインターネット上で一番基礎となる重要な部分なので丁寧に解説していきますね!これらのキーワードは現実世界にあるものと比較するとわかりやすいです。

サーバーとは?

インターネットの世界には様々なサーバーがあります。これらのサーバーがたくさん集まってインターネットが形作られています。これを現実世界に当てはめると、高層ビル群になります。

そして、その中の1ビルの1部屋を借りることが「サーバーを借りること」に対応します。

IPアドレスとは?

借りる借りる1部屋1部屋には「住所」が割り当てられていますよね?Webの世界ではこれが「IPアドレス」に対応します。

例えば、GoogleやFacebookでも下記にようなIPアドレスを持っています。

ドメイン IPアドレス
google.com 172.217.175.110
facebook.com 31.13.82.36
amazon.com 176.32.103.205
205.251.242.103
176.32.98.166

amazon.comのように、IPアドレスを複数持っているWebサイトもあります。

Webサーバー

部屋をかりたら、そこで何かサービスを始めるとします。例としてコーヒーショップを経営することにしましょう。このコーヒーショップが「Webサーバー」に対応します。

部屋の中ではコーヒーショップ以外にも色々なサービスを始めることができますよね?実際にサーバー上では「Webサーバー」以外に「SSHサーバー」「メールサーバー」などの様々なサービスが動いています。

ドメインとは?

お客さんはコーヒーショップに訪れたい場合、住所を調べて向かうはずです。この時住所以外にも「店名」があれば「どのようなブランドのコーヒーショップ」なのかわかります。

この「店名」がWebの世界では「ドメイン」と呼ばれるものです。すぐに覚えてもらえるように、できるだけ簡素でWebサイトのテーマに合った名前にするといいですね!

補足ですが、ドメイン名は全世界で同じ名前は決して取得できません。店名ならかぶっても問題なかっりする場合もありますが、ドメイン名は決して許されません。

例えば、今からあなたが「apple.com」や「google.com」を取得することはできません。

ドメインとURLの違いと仕組み

ドメインを使ってWebサイトにアクセスするには「URL」という文字列を使います。このURLの構造は上記の図のようになっています。

現段階では理解する必要はありませんが、このようにいつくかのパーツが組み合わさってできていることを覚えておきましょう!

DNSとは?

DNSとは、Dmain name system(ドメイン・ネーム・システム)の略で、現実世界にあるもので例に例えると「店名から住所がわかる住所録やgoogle検索みたいなもの」です。

「あの店に行きたいなー。でも行き方がわからないなー。」とう思ったら、まずgoogleで検索して場所を確認して、住所がわかってからやっとそこに行けるわけです。この店名から住所を検索するシステムや仕組みの事を、Webの世界ではDNSと呼ばれています。

更にDNSについて知りたい方は、DNSを運営している会社が作ったyoutube動画があるので見てみてくださいね!

Webサイトが表示される仕組み

ブラウザにURLを入力して、Webページに情報が表示されるまでにどのような手順を踏んでいるのか、その仕組みをみていきましょう!

  1. ブラウザにURLアドレスを入力する
  2. DNSにIPアドレスを問い合わせる
  3. IPアドレスからHTMLを取得する
  4. ブラウザがHTMLを解釈して表示

ブラウザにURLアドレスを入力する

ブラウザに表示するために、URLアドレスを入力します。

DNSにIPアドレスを問い合わせる

するとブラウザは、そのアドレスのIPアドレスをDNSに問い合わせます。

IPアドレスからHTMLを取得する

ブラウザはWebページを取得するIPアドレスが分かったので、そのサーバーへHTMLファイルを送ってもらうように要求します。

ブラウザがHTMLを解釈して表示

返ってきたHTMLファイルをブラウザが解釈し、Webページを表示します。

Webサイトを作って公開するまでの流れ

ここまでで、ブラウザに打ち込んだURLがどのような仕組みによってWebページが表示されるのかをみてきました。ここからは実際にWebサイトを作って公開するまでの流れを解説します。

Webサイトがどこからでも見れるように公開するために、下記で「Webサイト公開のための5ステップ」にまとめました。

  1. HTML&CSSを書く
  2. サーバーを用意する
  3. サーバーにWebページをアップロードする
  4. ドメインを取得&設定する
  5. URLを打ち込んでWebページにアクセスする
STEP.1
HTML&CSSを書く

まずはHTMLとCSSを記述してWebサイトを作成しましょう

STEP.2
サーバーを用意する

Webサイトを公開するサーバーを用意します。さくらのレンタルサーバーを使うと、月額131円から借りることができますよ

STEP.3
サーバーにWebページをアップロードする

作ったWebサイトをサーバーにアップロードします。アップロードソフトには「cyberduck」がオススメです。

STEP.4
ドメインを取得&設定する

ドメインを取得して自分のサイトに設定しましょう!世界で唯一の名前にする必要があります。ドメインの取得には、日本で安くてシェアNo.1の「お名前.com」が定番です。

取得したドメインをブラウザのURLに打ち込むと、サイトが表示されるようにDNSも設定します。

STEP.5
URLを打ち込んでWebページにアクセスする

実際にURLを打ち込んで自分のサイトが表示される事を確認しましょう!

完成!

まとめ

  • Webサイトはインターネットの利用方法の1つ
  • Webサイトにはハイパーテキストとハイパーリンクによって文章と文章をつながっている
  • WebサイトにはドメインとIPアドレスが必要
  • WebサイトのドメインはDNSがIPアドレスに変換する
  • Webサイトを見る時はサーバーから情報を受け取ってブラウザが解釈して表示している
  • Webサイトを作る時にはHTMLとCSSを用意し、サーバーにアップロードする
  • Webサイトを公開するには、サーバーを用意しドメインを取得する
このページで使用しているフリー素材の著作権について
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。