【6日でできるHTML＆CSS入門】WebサーバとHTML

　現代のインターネット体験は、WebサーバとHTMLという2つの重要な要素が支えています。Webページを閲覧するとき、私たちは意識しなくても、ブラウザ（クライアント）とWebサーバが連携し、HTMLを通して情報がやりとりされています。ここでは、WebサーバとHTMLの基本構造や役割、関連する仕組みをやさしく解説します。

１．Webの仕組みと基礎知識

1.1. Webとは何か

用語説明
Webネットワーク上に文章や画像を公開・相互に結び付ける仕組み
Webサイト複数のWebページ（HTML）で構成される情報の集合
ハイパーテキスト他ページや情報へのリンクを持ち、情報同士を相互につなげるテキスト
  • Webとは、世界中の情報がリンクで結び付けられ、自由にアクセスできる仕組みです。
  • これを可能にするのが「ハイパーテキスト」構造と「ハイパーリンク」です。

1.2. HTMLとWebブラウザ

用語説明
HTMLWebページを構成するためのマークアップ言語。ページの構造や内容を定義
WebブラウザHTMLファイルを読み込み、画面に分かりやすく表示するソフト
  • HTMLファイルは「.html」または「.htm」として保存され、テキスト形式で内容や画像の配置を指定します。
  • 代表的なWebブラウザ：Google Chrome、Microsoft Edge、Apple Safariなど。

２．HTML・CSS・WWWとその役割

2.1. HTMLとCSSの違い・役割

項目説明例
HTMLページの内容や構造を記述するタイトル、段落、画像など
CSSHTMLで作成したページにデザインやレイアウトを適用文字色、背景色、レイアウト調整など
  • HTMLは「何が書かれているか」、CSSは「どのように見せるか」を分担しています。
  • CSSを利用することで、多数のWebページのデザインを一括で管理できます。

2.2. WWWとハイパーリンク

用語説明
ハイパーリンク他ページや他サイトへジャンプできるリンク
WWWWorld Wide Web。世界中のWebサイトを相互に結びつけるネットワークの総称
  • Webページ同士はリンク（ハイパーリンク）でつながり、世界中の情報ネットワーク（WWW）を形作っています。

ハイパーリンクの例

  • 同一Webサイト内へのリンク
  • 他のWebサイトへのリンク

３．Webサーバの役割と仕組み

3.1. Webサーバとクライアントのやりとり

用語説明
Webサーバネットワーク上でHTMLや画像を配信するコンピュータ
クライアントWebブラウザなど、Webページを閲覧する側の端末・ソフト
URLWebページの「住所」。アクセス時に使うアドレス
  • クライアント（ブラウザ）はURLを指定してWebサーバにリクエストを送信します。
  • Webサーバは指定されたHTMLや画像ファイルをレスポンスとして返します。

静的Webページ配信の流れ

  1. クライアントがWebサーバにURLでリクエストを送信
  2. WebサーバがHTMLファイルなどをレスポンスとして返す
  3. クライアント（ブラウザ）が内容を画面に表示
役割例
WebサーバApache, IIS など
クライアントChrome, Safari, Edge などのブラウザ

3.2. HTTP・HTTPSプロトコルとURLの構造

用語説明
HTTPWebページをやりとりするための通信規約
HTTPSHTTPに暗号化機能を加えた、安全な通信規約
URLプロトコル、ドメイン名、ディレクトリ、ファイル名から構成

URLの例と構造

https://www.example.com/index.html

  • https:// ・・・ プロトコル（HTTPSによる暗号化通信）
  • www.example.com ・・・ ドメイン名
  • /index.html ・・・ ファイルパス
プロトコル特徴
HTTP通常のWeb通信
HTTPS暗号化され安全なWeb通信
  • 現代では、セキュリティを重視して多くのWebサイトがHTTPSを採用しています。

まとめ

　WebサーバとHTMLは、現代のWebの基礎となる技術です。HTMLで作られた情報をWebサーバがネットワーク上に公開し、Webブラウザが受け取って画面に表示することで、私たちは簡単に世界中の情報にアクセスできます。
　CSSやWWW、ハイパーリンクといった仕組みも理解することで、より効果的にWeb制作や活用ができるようになります。