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

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

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

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

Contents

Webサイトはインターネットで繋がっている
webクライアントとwebサーバー
WebサイトはHTMLで書かれている
Webサイトを公開する方法
- ドメインとは何か
まとめ

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

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

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

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

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

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

実はあなたのパソコンがサーバーになることもできます。しかし、Webサイトは常に、誰からもみてもらえるように、常時インターネットと接続している必要があります。シャットダウンと起動を繰り返す、日常的に使うPCはサーバには相応しくありません。
よって、よって、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を組み合わせることで実現します。