そもそもWebサイトはどのような仕組みで表示されているのか。当記事では、それらを知るための基礎的な用語をご紹介いたします。
Webサイトとは
Webサイト（≒ホームページ）とは、平たくいえば、複数のページの組み合わせに過ぎません。各ページは一つ一つのファイルになっており、その内容が様々な仕組みによってWebサイトを形作っています。
コードや文字列を含む複数のページ（ファイル）をインターネット上に公開して、それらをWebサイトとして閲覧できるようにしているわけです。
つまり、Webサイトとは、インターネット上にある複数のページを関連づけている1グループともいえます。
当記事では、Webサイトがインターネット上に表示される仕組みを理解するために必要な用語をご紹介いたします。
Webサイトが表示される仕組みと用語
Webサイトがどのような仕組みで、インターネット上で閲覧できるようになっているのか。その仕組みを知るために必要な基本的な用語をこちらでご紹介いたします。
サーバー
サーバーとは、Webサイトの土地のようなものです。レンタルサーバー会社と契約するのが一般的です（月額数千円程度）。
Webサイトを表示するには、まずサーバーを契約する必要があります。土地がなければ、Webサイトを建てることはできません。
また、サーバー（Server）は「提供する者」という意味の如く、そこにあるファイルを必要に応じてユーザーに提供します。
ユーザーが「このページを見たい」というリクエストを送り、サーバーがファイルを提供していることで、Webサイト（ページ）を閲覧できているわけです。Webサイトを表示する仕組みに、サーバーは不可欠なのです。
そんなサーバーを選ぶ基準については、こちらの記事で解説しています（※WordPressの場合）。
WordPressを利用するにはレンタルサーバーとドメインが必要です。WordPressを利用するために準備するものはこちらの記事で解説していますが、本稿ではレンタルサーバーの選び方について、筆者がこれまで体験した失敗も踏まえ、より詳細に解説できればと思います。 WordPressは世界でもっ...
ドメイン
ドメインとは、Webサイトをつくるための住所のようなものです。サーバー（土地）を借りて登録します。設定したドメインは、Webサイトのアドレス（URL）の一部となります。
ユニークなURLを設定しないとWebサイトへアクセス（表示）できないので、こちらもサーバーと同じく重要です。
当記事は、あくまで用語の紹介なので、詳しい解説は割愛しますが、ご興味のある方はこちらで深掘りしてみてください。サーバーとドメインはセットで用意するのが一般的です。
ホームページやブログを作成するために最初に必要なのがドメイン。 ここではドメインとは何か？からドメインの基礎知識、選び方、運用方法をわかりやすく解説いたします。 ドメインとは ドメイン（domain）とは、インターネット上の住所のようなものです。ホームページのURLの一部のことを指しま...
HTML
HTMLは、Wedサイトを形作る最も基本的なマークアップ言語といえます。
マークアップ言語は、文章を構造化する役割を持ちます。例えば、文章を「タイトル」「見出し」「本文」で分けて構造化する際など、人間なら読むとなんとなくわかることも、コンピューターには指し示す必要があるのです。当メディアの記事も、基本的には下記のような構造になっています。
上記のような構造をコンピューターに指し示すために、HTMLで書かれたファイル内では下記のようなタグと呼ばれる記号（<>）でマークアップされています。
<h1>記事タイトル</h1>
<h2>見出し</h2>
<p>本文テキスト</p>HTMLタグは無数にあるので、ご興味のある方はこちらもご覧になってみてください。
>>HTML 要素リファレンス – HTML: HyperText Markup Language | MDN
CSS
冒頭で申しました通り、Webサイトは複数のファイルの集まりです。HTMLだけでは文章を構造化できてもデザイン（装飾）することはできません。そこで利用されるのがCSSです。
CSSはWebページにデザインを適用するための言語です。コンピューターに文章の構造を指し示すものをHTMLとすると、CSSは人間にとって見やすく装飾するためにあるともいえます。
例えば、次のようにデザインやスタイルを指定したいときにCSSを使うわけです。
- 記事タイトルは、ページ上部に28pxで表示
- 見出しは、26pxで中央寄せ表示
- 本文はフォントサイズ16pxで表示
文章を構造化したHTMLを、CSSでデザインするということです。↑はあくまで超基本的な例ですが、フォントの色や種類、レイアウトを編集したり、特定の文章にマーカーを引いたり、囲み枠を付けるなど。自由自在に装飾できます。
CSSは、style.cssというファイルで、HTMLファイルとは別で管理されるのが一般的です。
JavaScript
文章を構造化するHTML、それらをデザインするCSS。では、JavaScriptでは何をするのでしょう。
一言でいうと、Webページに動きをつけるための言語です。
- 数秒ごとに切り替わる画像スライダー
- 指定の秒数が過ぎると表示されるポップアップ広告
- 特定の条件を満たすと表示されるメッセージ
こういったWebページ上の動きはJavaScriptでつくられていることが多いです。ユーザーの操作に応じてコンテンツを表示したり、次の操作を誘導したりできるわけですね。
Javascriptの基本から応用まで幅広く網羅。 プログラミング初心者でもJavaScriptが習得できます。 JavaScriptを学ぶ前に はじめてのJavaScript プログラムを実行する準備 JavaScriptの構造 ...
CMS （コンテンツ管理システム）
CMSとは、Webサイトを構築するための道具と思っていただいても問題ありません。
これから新規事業を始めよう、と思っている方にとって大きな課題となるのが「集客」。 集客手段の1つが「ホームページ」による宣伝です。ホームページと聞くと、「作るのが難しいのではないか」「外注しないとクオリティの高いものができないのでは...」と思う方が多いでしょう。 しかし、最近ではホーム...
上記記事でご紹介しているようなプログラミング言語を使わずに、Webサイトをつくるためのツールです。代表的なものには、WordPress、Joomla、EC-CUBEなどがあります。
Webサイトをつくるのに大量のファイルをサーバーにアップロードしたり、それぞれコーディングを行う必要がないのが最大のメリットです。
CMSとは、コンテンツマネジメントシステム（Contents Management System）の略。 日本語ではコンテンツ管理システムと呼ばれ、ざっくり説明すると、Webサイトを簡単に作成・運用できるシステムの総称です。その利便性から、中規模以上のWebサイトの多くはCMSで作成・運用されてい...
ECサイト（ネットショップ）専門ですが、ShopifyやSTORESなどもCMSの一種といえます。
フロントエンド
フロントエンドとは、目に見えるWebサイトの外観のことです。第三者がサイトにアクセスした時の見え方といってもいいでしょう。あなたがインターネット上で閲覧できる部分は、基本的にすべてフロントエンドといえます。単にフロントと呼ばれることもあります。
CMSを使う場合も、HTMLやCSSをサーバーにアップロードする場合も、Webサイトをインターネット上に公開する前に、フロントエンドの見え方を確認しておくことが重要です。
バックエンド
バックエンドとは、Webサイトの管理画面や操作画面と思っていただいて大丈夫です。フロントエンドとは対象的に、一般のユーザーはアクセスできない部分です。広義では、WordPressサイトの管理画面やサーバーやデータベースもバックエンドといえます。
バックエンドでHTMLやCSSなどのファイルを編集して、フロントで表示を確認するというのが基本です。
ローカル
ローカルは、あなたのPC内の保存領域を指すことが多いです。インターネット上に公開されていない領域で、かつ、あなただけがアクセスできる部分ともいえます。例えば、「ローカルに保存する」＝「あなたのPC内に保存する」という認識でもOKです。
ローカルでファイルを編集して検証すれば、公開されているWebサイトで不具合が生じることを未然に防げます。当然第三者には公開されないので、何かテストする際は、ローカルで行うのが基本です。
サーバーやドメインの契約不要で、ローカルでWordPressサイトをつくれるこんなツールもあります。
WordPressでローカル環境をつくりたいなら「Local（旧 Local by Flywheel）」がおすすめです。 ドメインやサーバーの契約は一切不要で、誰でも簡単に無料でローカル環境を構築できます。 はじめてWordPressを触る方、テーマやプラグインをローカル環境で試したい時にも...
インデックス
Web業界で使われる「インデックスされる」とは、「検索エンジンに記録されている」という意味になります。ローカルではなく、インターネット上に公開したサイトが、Googleの検索結果に表示されている状態のことです。
Webサイトは、インデックスされてはじめて検索結果に表示され、第三者がアクセス可能となります。
「サーバーにファイルをアップロードしたのに、Webサイトが検索結果に表示されない」
そんな時は、正しくインデックスされているかどうかを確認しましょう。WordPressでつくったサイトを例に下記記事で解説しています。
「サイトを公開したのに、検索エンジンでサイト名を検索しても表示されない」 それはWordPressの検索エンジンでの表示設定が原因かもしれません。当記事では、この設定と同時に検索エンジンのインデックスについても解説していきます。 インデックスとは？ Google等の検索エンジン...
まとめ
Webサイトの仕組みを知るための基本的な用語を解説いたしました。
要点を簡単にまとめると次の通りです。
- Webサイトは複数のWebページ（ファイル）の集まりである。
- それぞれ役割がある複数のファイルをサーバーにアップすることでWebページが表示される。
- 複数のファイルの管理やコーディングを省略してWebサイトをつくれるツールがCMS。
- Webサイトは検索エンジンにインデックスされてはじめて第三者の目に入る。
Webサイトがどのように表示されているのか。おおまかな仕組みがご理解いただければ幸いです。
Webサイト自体を構成するページやパーツについては、こちらの記事を参考にご覧ください。
Webサイト（ホームページ）を構成しているのパーツの基本用語をまとめました。 サイトのどの部分を何と呼ぶかがわかるようになります。業界では当たり前でも、一般の方やWeb初心者にとってはわからないこともありますので、参考になれば嬉しいです。 Webサイトを構成するページやパーツ We...
仕組みを理解したら、ぜひ実践してみてください。初心者向けのWebサイト（ホームページ）の作り方はこちらの記事で解説しています。
「ホームページを作りたいけど、どうすればいいかわからない・・・」 この記事では、ホームページを初めて作る初心者向けに、ホームページ作成の方法を以下の5ステップを解説しています。 ホームページのコンセプト決定 ドメイン取得とサーバー契約 CMSのインストール デザイン...
コメント