WEBの基本を知ろう

みなさん、こんにちは！今回は「WEBの基本」について学んでいきましょう。スマホやパソコンで毎日のように使っているウェブサイトが、実はどのような仕組みで動いているのか、その舞台裏を覗いてみましょう。

1. インターネットとWEBの仕組み

まず、「インターネット」と「WEB」は同じものではありません。違いを簡単に説明しましょう。

インターネットとは？

インターネットは、世界中のコンピュータをつなぐ「ネットワークのネットワーク」です。簡単に言えば、情報を運ぶための巨大な道路網のようなものです。

このネットワークを通じて、メール、ファイル転送、ビデオ通話など、さまざまなサービスが提供されています。WEBはそのサービスの一つにすぎません。

WEBとは？

WEB（World Wide Web）は、インターネット上で情報を共有するための仕組みです。HTMLという言語で書かれたページをブラウザで表示することで、テキスト、画像、動画などの情報を閲覧できるようにしています。

ポイント： WEBはインターネットが提供するサービスの一つです。インターネットはWEBページ以外にも、メールやオンラインゲームなどのさまざまなサービスを提供する基盤となっています。

WEBサイトはどうやって見られる？

WEBの世界では、主に以下の流れで情報のやり取りが行われています：

あなた（クライアント）がブラウザでURLを入力します
リクエストがインターネットを通じてサーバーに送られます
サーバーはリクエストに応じて、HTML、CSS、JavaScriptなどのファイルを返します
ブラウザがこれらのファイルを解釈して、画面に表示します

この一連の流れがわずか数秒で行われ、私たちはWebページを閲覧することができるのです。

2. ブラウザの役割

ブラウザは、WEBサイトを表示するためのソフトウェアです。Google Chrome、Safari、Firefox、Microsoft Edgeなどが代表的なブラウザです。

ブラウザの主な役割

HTMLファイルを解釈し、ページの構造を理解する
CSSファイルを解釈し、ページのデザインを適用する
JavaScriptを実行し、ページに動きや対話性を与える
サーバーとの通信を管理する
キャッシュ（一時保存）を管理して、再訪問時の読み込みを速くする

豆知識： 同じWEBサイトでも、ブラウザによって若干表示が異なることがあります。これは、各ブラウザがHTML、CSS、JavaScriptを解釈する方法に微妙な違いがあるためです。WEB制作者は、複数のブラウザでテストを行い、どのブラウザでも正しく表示されるように調整します。

開発者ツール

各ブラウザには「開発者ツール」という機能が備わっています。F12キーや右クリックから「検証」を選ぶことで表示できます。このツールを使うと、WEBページの裏側（HTML、CSS、JavaScript）を見ることができ、WEB制作を学ぶ上で非常に役立ちます。

3. HTML・CSS・JavaScriptの関係性

WEBページは主に3つの言語で構成されています。それぞれの役割を家に例えて説明しましょう。

HTMLとは（家の骨組み）

HTML（HyperText Markup Language）は、WEBページの「構造」を定義する言語です。見出し、段落、リスト、リンク、画像など、ページを構成する要素を指定します。

        <!DOCTYPE html>

        <html>

        <head>

          <title>私のはじめてのウェブページ</title>

        </head>

        <body>

          <h1>こんにちは、世界！</h1>

          <p>これは段落です。</p>

        </body>

        </html>

HTMLだけのページは、情報は伝わりますが、見た目はとてもシンプル（味気ない）です。

CSSとは（家の内装・外装）

CSS（Cascading Style Sheets）は、WEBページの「見た目」を定義する言語です。色、フォント、レイアウト、余白など、デザインに関する指定を行います。

        body {

          font-family: 'Arial', sans-serif;

          background-color: #f0f0f0;

        }

        h1 {

          color: #0066cc;

          text-align: center;

        }

        p {

          line-height: 1.6;

          margin-bottom: 20px;

        }

CSSを加えることで、同じHTMLでも見た目が大きく変わります。

JavaScriptとは（家の電気・水道・設備）

JavaScript（JS）は、WEBページに「動き」や「対話性」を与える言語です。ボタンをクリックしたときの反応、フォームの入力チェック、アニメーション、データの読み込みなど、ページを「生きた」ものにします。

        document.getElementById('myButton').addEventListener('click', function() {

          alert('ボタンがクリックされました！');

        });

        // カウントアップする簡単な例

        let count = 0;

        function incrementCounter() {

          count++;

          document.getElementById('counter').innerText = count;

        }

JavaScriptは必須ではありませんが、現代のWebサイトでは当たり前のように使われています。今はJavaScriptができることが非常に増えており、複雑なアプリケーションもWeb上で実現できるようになっています。

3つの言語の関係をまとめると：

HTML → 構造（何をどこに置くか）
CSS → デザイン（どのように見せるか）
JavaScript → 動作（どのように反応するか）

今回のまとめ

インターネットは世界中のコンピュータをつなぐネットワークで、WEBはそのサービスの一つ
ブラウザはWEBページを表示するためのソフトウェアで、HTMLやCSS、JavaScriptを解釈する
HTML（構造）、CSS（デザイン）、JavaScript（動き）の3つの言語がWEBページを構成している

次回は「HTMLの基礎」について学んでいきます。HTMLのタグの使い方や基本的な構造について詳しく解説します。お楽しみに！

#WEB制作 #WEBデザイン #HTML #コーディング #学習