Webサイトの仕組み

Webサイトの仕組みについて解説します。

WWW(ワールドワイドウェブ)

Web(ウェブ)と呼ばれている仕組み。世界中に張り巡らせた蜘蛛の巣、世界中の情報を繋げることが可能になった。

WebサイトはこのWWWの仕組みを前提として閲覧が可能になっています。テキスト同士の「リンク」を辿れるようにし、インターネット上で使用できるようになっています。
以下のような様々な仕組みが交差して成立しています。

  • URL
  • HTTP
  • サーバー
  • HTML

ユーザーエージェント

後述のWebブラウザを始め、Webにアクセスするためのソフトウェア。

Webの利用者が意識することはほぼありませんが、Webにアクセスするためのソフトウェアの総称です。このユーザーエージェントを判別し、ロボットなのか、人が閲覧しているのか、使用しているソフトウェアごとに判別する、ということが可能になっています。

Webブラウザ

Webを閲覧するときによく使われるユーザーエージェント(ソフトウェア)がブラウザと呼ばれています。

スマートフォンやパソコンでインターネットに接続し、Webサイトを閲覧する際にほぼ確実にしようしているソフトウェアをブラウザと呼びます。ブラウザも多種多様にあります。
下記だけではありませんが代表格のブラウザを紹介します。

  • Google Chrome
  • Safari
  • Edge(Internet Explorer)
  • Firefox

サーバー・ドメイン

テキスト(データ)を保管する場所と、場所を示すための住所。それがサーバーとドメイン。

サーバーとドメインはWebサイトを制作する上で切っても切り離せません。Webサイトはあらゆる形でサーバーに保管され、ドメインが設定されます。保管場所がなければデータはテキストは表示されないですし、ドメインがなければリンクを辿ることもできません。

Webブラウザからリクエストが送信された際、リクエストしてきたWebブラウザにデータを送り返すことで、WebブラウザでWebサイトが表示されます。

  • サーバー(場所)
  • ドメイン(住所)

マークアップ言語

HTML = HyperText Markup Language。

Webサイトを支えるマークアップ言語であるHTMLによって、テキストに意味を持たせること(マークアップ)が可能です。意味を持たせることによって、「見出し」や「文章」、「リンク」という役割を機械側で判別することが可能になります。
これにより、Webサイトは意味を持ち、様々なデザインの表現が実現できます。

結果、適切なマークアップを行うことでアクセシビリティを担保した、マシンリーダブルなWebサイトとなることで多くのユーザーに情報を届けることが可能です。

ただし、HTMLだけでは意味を持たせること以上の「装飾(デザイン)」「機能実装(システム)」をすることが難しいため、マークアップ言語だけではなくWebを支える様々な言語として下記のようなものがありますので有名所を紹介します。

  • CSS
  • JavaScript
  • PHP

etc…

Webサイトのテキストやリンク、画像を更新したいだけであればHTMLの知識があれば更新することが可能です。
知識がない場合でもブラウザ上の操作で更新を可能とするCMS(コンテンツ・マネジメントシステム)という仕組みもあります。