企業のWebサイトで集客するなど、Webサイトをマーケティングで活用する機会は多くなってきました。
コーポレートサイトやサービスサイトで集客したいと思うシーンも多いでしょう。
そのようなときに、ふと、Webの構造やWebサイトが動く仕組みについて、疑問に思うことはありませんか？
最近では自らHTMLタグを用いてWebサイトをアレンジするというケースもあるかもしれません。
そこで今回は、Webの構造の基本とWebサイトが動く仕組みを解説します。
Webの構造の基本
まずはWebの構造の基本を簡単に確認しておきましょう。
●Webサーバ
Webの構造の根底にあるのは、Webサーバです。
Webサイトには、たいてい、文章や画像などが掲載されています。
そして、インターネットにアクセスできる環境があれば、Webブラウザを通して、閲覧することができます。
そのように、インターネットがつながれば、全世界で同じようにWebサイトを閲覧することができるのは、そのWebサイトの要素が「Webサーバ」に置かれているからです。
各ユーザーは、Webサーバに置かれているものの住所、つまりURLにアクセスして閲覧しているのです。
●HTMLファイル・画像
Webサーバに置かれているWebサイトの要素を、もっと具体的に見ていきましょう。
その要素となる主なものは、HTMLファイルと画像です。
HTMLファイルとは、「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」で書かれた文書データのことです。
HTMLとは、Web上の文書を記述するためのマークアップ言語です。
例えば、見出しの文字だけ太く、大きくしたいという場合、HTMLで<h2></h2>のタグで見出し文字を囲むなどしてマークアップします。
そのHTML言語で書かれたテキストファイルがHTMLファイルです。
このHTMLファイルや画像をWebサーバにアップロードすることにより、Webブラウザで閲覧できるようになります。
●Webブラウザ
Webサーバに置かれているHTMLファイルや画像を、読み込んで表示しているのがWebブラウザです。
ユーザーは、Webブラウザのアドレスバーに、該当のWebサイトが設置されているWebサーバのアドレスを入力すれば、いつでもどこでもWebサイトを閲覧することができます。
Webサイトが表示される仕組み・動く仕組み
では、もう少し詳しく、Webサイトが表示される仕組みや動く仕組みを見ていきましょう。
●Webサイトが表示される仕組み
Webブラウザは、HTMLファイルのHTMLを読み込んでWebブラウザにそのプログラミング通りのビジュアルを表示しています。
画像は、GIFファイルやJPEGファイルが一般的ですが、これらもHTMLファイル内で「この場所、このサイズで、この名前のGIFファイルを表示する」というようにマークアップをすることで表示されています。
もちろん、GIFファイルなどの画像が置かれているWebサーバのアドレスを、Webブラウザのアドレスバーに直打ちしても画像は表示されます。
また、Webサイトはたいてい2ページ以上にまたがっていますが、HTMLファイルを複数用意しておき、互いに「リンク」させることで、一つのWebサイトとして成り立たせています。
関連記事：GIFとは？GIF画像の作り方やおすすめツール6選を紹介
●「CSS」とは
HTMLを複数作っただけでは、現在、多く見られるWebサイトにはなりません。
もう一つ、CSSというものがあります。
CSSとは、「Cascading Style Sheets（カスケーディング・スタイル・シート）」のことを指します。
CSSも、HTMLと同じくWebサイトを作るのに使用する言語です。CSSは装飾を施すのに利用します。
例えば、色やフォントを変えたり、ページ内の各要素の配置を中央揃えにしたりといったように見栄えをよくしたり、目立たせて見やすくしたりすることができます。
●Webサイトが動く仕組み
基本的にはHTML・CSSでマークアップされたファイルと、画像データでWebサイトは構成されますが、それに加えて、アクセス解析や掲示板、ブログ、ショッピングカートなどのプログラムを利用したWebサイトも多くあります。
これらのプログラムが動くのにはどのような仕組みがあるのでしょうか。
実は、先ほどHTMLやCSSを読み込んでいたのは、フロントエンドと呼ばれる部分です。
フロントエンドは、主にWebブラウザで処理が行われています。
一方で、プログラムはバックエンドを呼ばれており、主にサーバで処理が行われています。
例えば、JavaScriptやPHPなどのプログラミング言語で作られた掲示板やショッピングカートは、ユーザーがWebブラウザ側で入力したものを受け、サーバ側で処理し、データのやりとりを行い、その結果をWebブラウザ側へ返すといったことを行っています。
つまり、Webサイトが動くのには、サーバの内部で行われている処理も関係しているのです。
まとめ
◆Webの構造の基本は、根底にあるWebサーバ、Webサーバに置かれているHTMLファイル・画像、それを読み込むWebブラウザで成り立っている。
◆Webサイトが閲覧できるのは、WebブラウザがHTMLファイルのHTMLを読み込んでWebブラウザにそのプログラミング通りのビジュアルを表示しているためである。
◆Webサイトが動くのは、ユーザー側のフロントエンドで処理されている部分と、サーバ側のバックエンドで処理されている部分の2種類が関係している。
