Webサイトの仕組みと作り方

インターネットの仕組み

スポンサーリンク

この記事では、ウェブサイトを作りたい方に向けて、ウェブサイトの仕組みと基本的な作り方を解説します。

ウェブサイトの運営方法は、たくさんあります。現在は、Wixのような、専門知識がなくてもウェブサイトを構築できるようなサービスがたくさん出てきていて、ウェブサイトの仕組みを知らなくてもさまざまなサイトを立ち上げることができます。

もし、WordPressのように、自分の思うままのウェブサイトを構築できるツールを使いたい場合、Webサイトが表示されるための仕組みを理解する必要があります。
そこで、本記事では、Webサイトが作られている仕組みと、公開されるまでの流れを紹介させていただきます。

Webサイトはインターネットで繋がっている

インターネットの仕組み
インターネットは世界中のコンピュータをつなぎ合わせたネットワーク

あなたがみているこのDOKUPROというウェブサイトは、Vultrという会社が東京に持っているコンピューター上に設置されています。

サーバーとのやりとり
インターネットを経由して、他のデバイスと通信しています

このように、Webサイトを表示するための情報を設置するコンピューターをサーバーと言います。

スポンサーリンク

世界中のコンピューターが接続しあって情報を共有します。この様がまるでクモの巣のように複雑につながり合っているので、Web(クモの巣という意味)と言われます。

実はあなたのパソコンがサーバーになることもできます。しかし、Webサイトは常に、誰からもみてもらえるように、常時インターネットと接続している必要があります。シャットダウンと起動を繰り返す、日常的に使うPCはサーバには相応しくありません。
よって、よって、Webサイトを公開するのに特化した、外部のサーバーをレンタルするのが一般的です。

webクライアントとwebサーバー

webクライアントとwebサーバー

Webサイトの仕組みが説明される時、webクライアントWebサーバーという言葉がよく使われます。

  • Webクライアント・・・Webページを見ているコンピューター(今の場合は、あなたのパソコン or スマホ)
  • webサーバー・・・Webページを提供するコンピューター(今の場合は、先ほど説明したVultrのサーバー)

WebサイトはHTMLで書かれている

さて、webクライアントである、あなたのパソコンが、Webブラウザ(Google ChromやSafari、Microsoft Edgeなどのソフトウェア)を用いて、リクエストを送信した時に、このサーバーから何がレスポンスとして返されているのでしょうか?

ズバリ、HTMLなどのコンピューター言語が返されています。ブラウザはそれらの情報を処理して今見ている画面のように表示しているわけです。

HTMLの記述例

<h1>これは見出しです</h1>
<p>pタグで囲んだら、一つの段落として解釈されます。</p>
<div>
  <p>divタグはある目的を持った一塊を囲みます。</p>
  <p>Webページはあらゆるタグを用いて、その役割を示します</p>
</div>

ブラウザはタグによって、その要素の役割を認識し、それに応じてWebページを表示します。

参考:HTMLのさらに詳しい説明

CSSはカスケーディングスタイルシートと言って、HTMLとセットで使われる、見た目を整えるためのコンピュータ言語です。
また、Webサイトでは、ページに動きをつけるためにJavaScriptという言語もしばしば用いられます。
例えば、このサイトの右上にあるシェアボタンを押すと、SNSのアイコンがスライドインしてきます。このような動的なアニメーションはCSSとJavaScriptを組み合わせることで実現します。

Webサイトを公開する方法

WebサイトはHTMLなどのコンピュータ言語で書かれていることを説明しました。

それを世界中に公開するためには、HTMLやCSS、JavaScriptなどのファイルをサーバーに設置してあげる必要があります。

参考サイト:「ウェブサイトの仕組み」 by サルワカ

先ほど申し上げたように、あなたのパソコンをwebサーバーとすることも不可能ではありませんが、レンタルサーバーを借りて、そのサーバーに必要なファイルをアップロードするのが一般的です。

一般的な流れは以下の通りです。

  1. レンタルサーバーを借りる
  2. ドメインを購入してサーバーと紐付ける
  3. 必要なファイルをサーバーにアップロードする

ドメインとは何か

ドメインとは
ドメインはIPアドレスと紐づいています。

全てのデバイスには、IPアドレスというものが割り当てられています。世界中のコンピューターが接続されているインターネットにおいて、IPアドレスは一つのデバイスを特定するために使用されます。

IPアドレスは、「123.456.789.100」のように、数字の羅列です。それでは人間にとって分かりづらいものとなってしまいます。

そこで、人間にとってわかりやすい文字列をIPアドレスと紐付けてあげます。Webブラウザのアドレス入力欄にその文字列を入れたときに、DNS(ドメインネームシステム)という仕組みによって、自動的に目的のコンピュータのIPアドレスと紐づいて、通信が可能となります。

ウェブ上に公開する場合、ドメインの取得が必須です。

仕組み的には、ドメインがなくても通信可能ですが、Googleなどの検索エンジンに表示させたい場合は、ドメインが必須になります。
検索順位などをつけるために、ドメインパワーなどが用いられているためです。

まとめ

ウェブサイトの仕組みと公開方法を簡単に解説しました。要点は以下の通りです。

  1. インターネットは世界中のコンピューターとのつながり
  2. Webサイトを見るのはwebクライアント、提供するのがwebサーバー
  3. Webサイトを公開するためにはドメインなどが必要

HTMLやCSSだけでWebサイトを構築することができますが、当サイトのようにWebページを頻繁に更新するようなサイトを構築するためには、HTML、CSSだけで作るのは骨が折れます。

そこで、WordPressなどのCMS(コンテンツ・マネージメント・システム)を用いれば、HTMLやCSSの記述は最小限に、Webサイトの育成を効率良く行うことができます。

DOKUPROでは、WordPressを用いたサイトを作るための情報を更新していきます。

スポンサーリンク