この授業のゴール
「Webサイトが表示されるまでの流れ」を、自分の言葉でざっくり説明できるようになる。
1. Webサイトを見るとき、何が起きている?
Webサイトを見ることは、「お店に注文して、商品を届けてもらう」のととてもよく似ています。
- 注文するあなたがブラウザに住所(URL)を入れたり、リンクをタップしたりします。これが「このページをください」という注文です。
- お店に届く注文は、インターネットを通って「サーバー」という遠くのコンピュータに届きます。サーバーは、ページのデータをたくさん置いてある倉庫つきのお店です。
- 商品が送られてくるサーバーは、注文されたページのデータ(文章・画像・デザインの指示書など)を送り返します。
- 箱を開けて組み立てる届いたデータを、ブラウザが読み取って画面に組み立てます。これがあなたの見ている「Webページ」です。
つまり、「ブラウザが注文 → サーバーが返事 → ブラウザが組み立てて表示」。この3段階だけ覚えれば十分です。
2. ブラウザってなに?
ブラウザは「Webページを見るためのアプリ」です。実は、いつも使っているあのアプリのことです。
- Microsoft Edge(Windowsに最初から入っている、青い波のアイコン)
- Google Chrome(赤・黄・緑・青の丸いアイコン)
- Safari(iPhoneに入っている、青いコンパスのアイコン)
どれも役割は同じで、「届いたデータを画面に組み立てる係」です。この教室では主に Edge か Chrome を使います。
ヒント: 「インターネット」と「ブラウザ」は別のものです。インターネットは世界中のコンピュータをつなぐ「道路」、ブラウザはその道路を使って商品を受け取る「あなたの窓口」です。
3. URL(ページの住所)の読み方
ブラウザの上のほうに出ている https://www.example.com/menu.html のような文字が URL です。住所のように、前から読めます。
- https://「安全な方法で届けてね」という送り方の指定です。鍵マークがつくのはこの「s」のおかげです。
- www.example.com「ドメイン」と呼ばれる、お店(サーバー)の名前です。世界に1つしかありません。
- /menu.htmlお店の中の「どの商品(ページ)か」を指しています。
4. ページは「3つの材料」でできている
届いたページのデータは、大きく3種類の材料でできています。家づくりにたとえると分かりやすいです。
HTML = 骨組み
「ここが見出し、ここが本文、ここに画像」という、ページの構造を決める材料。Step 2 で最初に学びます。
CSS = 内装
色・文字の大きさ・配置など、見た目を決める材料。同じ骨組みでも、内装で印象がガラッと変わります。
JavaScript = 電気設備
ボタンを押したら動く、画像が切り替わる、といった「動き」を作る材料。Step 3 で学びます。
このカリキュラム全体は、この3つの材料を順番に使えるようになっていく旅です。
5. やってみよう
やってみよう
ブラウザを開いて、好きなサイト(よく見るニュースサイトやお店のサイトなど)を1つ表示してください。そして次の3つを紙に書き出してみましょう。
- そのページの URL。ドメイン(お店の名前)はどの部分?
- 鍵マークはついている?(URLの左側を見てみましょう)
- そのページの中で、「骨組み(文章の構造)」「内装(色やデザイン)」「電気設備(動くところ)」と思う部分を1つずつ探してみましょう。
書けたら、スタッフと答え合わせをしてください。「動くところ」が見つからないサイトもあります。それも正解の一つです。
記入例 (山田さんの場合): URL =
https://www.pannomori.example.jp/menu.html / ドメイン = pannomori.example.jp / 鍵マーク = あり / 骨組み = メニューの一覧、内装 = パンの茶色っぽい配色、電気設備 = 写真が自動で切り替わるところ。― このくらいで大丈夫です。発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- 「サーバー」は実際にはどんな機械か調べて、写真を1枚見つけてみましょう。データセンターという建物の中にあります。
httpsの「s」がないサイト(http)に入力した情報はどうなる可能性があるか、調べてまとめてみましょう。- ブラウザでページを右クリックして「ページのソース表示」を選ぶと、届いた HTML の中身がそのまま見られます。知っているサイトの「骨組み」をのぞいてみましょう。