どうしてブラウザから世界中のWebページを⾒ることができるの？

ブラウザはの役割は？

ファイルを読み取ってHTML

CSSJavaScript

ブラウザの役割 ⇒ HTML/CSS/JSを読み込んで画⾯に表⽰してくれる！

ファイルを読み取って

画⾯に　表⽰してくれる！

HTMLCSS

JavaScript

じゃあどこのファイルを読み込むの…？？

じゃあどこのファイルを読み込むの…？？↓

その「どこ？」を⽰すのがURLURL=ファイルの住所！

URLは住所！…ってどうゆうこと？

URLは住所！…ってどうゆうこと？

このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html

URLは住所！…ってどうゆうこと？

このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html

「y-kinoshitaというこのコンピューターの中の、

URLは住所！…ってどうゆうこと？

このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html

「y-kinoshitaというこのコンピューターの中の、 デスクトップにある、

URLは住所！…ってどうゆうこと？

このURLが表すのは、file:///C:/Users/y-kinoshita/Desktop/profile.html

「y-kinoshitaというこのコンピューターの中の、 デスクトップにある、 profile.htmlというファイルを読み込んで表⽰してますよ！」という意味

URLをもう少し細かく⾒てみると…

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

その中にy-kinoshita

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

その中にy-kinoshita

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

その中にy-kinoshita

があって

その中にデスクトップがあって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

その中にy-kinoshita

があって

その中にデスクトップがあって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

click!!

click!!

click!!

click!!

click!!

URLをもう少し細かく⾒てみると…

フォルダ開いて…

ここが「file:///C:」

で、

その中にユーザー(Users)

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

その中にy-kinoshita

があって

その中にデスクトップがあって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

その中にprofile.html

があって

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

モザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイクモザイク

file:///C:/Users/y-kinoshita/Desktop/profile.htmlが表すのは…？？

これが表⽰される！

click!!

click!!

click!!

click!!

click!!

URLをいろいろ変えると⾃分 PC内 あらゆるところにあるファイルに

アクセスできる

URLをいろいろ変えると⾃分 PC内 あらゆるところにあるファイルに

アクセスできる↓

アクセスできるなら、そのURLをブラウザに⼊⼒すれば、

表⽰可能！

でも、隣の⼈のPCのファイルを⾒たいときは…？？

隣のPCはそのままでは繋がってない(=アクセスできない)ので、

隣のPCのファイルを読むことはできない！

profile.html

A B

AさんのPCの中のprofile.htmlにはアクセスできない！！

HTMLCSS

JavaScript

じゃあどうやったらAさんのファイルを⾒れるの？

profile.html

A B

AさんのPCの中のprofile.htmlにはアクセスできない！！

HTMLCSS

JavaScript

レンタルサーバを借りて、そこに置く！

これ全部、コンピュータ!!

レンタルサーバを借りて、そこに置く！

レンタルサーバとは？？ ⇒ みんながアクセス可能なところ

A B

ネット経由でアクセスでき

る！！

DC

ネット経由でアクセス

できる！！

ネット経由でアクセス

できる！！

ネット経由でアクセス

できる！！

http://www.ume.ne.jp

みんながアクセス可能な

ところ

AさんのファイルをBさんが⾒れるようになるまで

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

Aさんがレンタルサーバを借りる

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

profile.html

ファイルを預ける

借りたレンタルサーバに、Aさんがファイルを置く

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

アクセスを要求

Aさんが借りたレンタルサーバに、Bさんがアクセスする

http://www.ume.ne.jp/Asan/profile.html

ここにAさんのページへのURLを⼊⼒する

アクセスするとはつまり、ブラウザからURLを⼊⼒するってこと

ブラウザにAさんのページへのURLを⼊⼒！！↓

http://www.ume.ne.jp/Asan/profile.html

レンタルサーバの中の Aさんが借りた場所にある

profile.htmlにアクセス!!

B

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

http://www.ume.ne.jp

⼊⼒したURLをたどると、Aさんのファイルが⾒れる

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

http://www.ume.ne.jp

/Asan

⼊⼒したURLをたどると、Aさんのファイルが⾒れる

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

http://www.ume.ne.jp

/Asan

/profile.html

⼊⼒したURLをたどると、Aさんのファイルが⾒れる

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html Aさんのprofile.htmlが⾒れた！！

http://www.ume.ne.jp

/Asan

/profile.html

⼊⼒したURLをたどると、Aさんのファイルが⾒れる

A B

http://www.ume.ne.jp

A 借 http://www.ume.ne.jp/Asan

profile.html

もちろんBさん以外も⾒れる！！

D

⾒れた！！

C

⾒れた！！

⾒れた！！

さらに!!

⽇本各地にサーバがあってそれが繋がってるので…

A

レンタルサーバ

サーバ

サーバ

⾒れた！！

profile.html

F

⾒れた！！

⽇本中から⾒れる！！H

A

サーバ

⾒れた！！

サーバ

サーバ

E

M

⾒れた！！

profile.html

もちろん世界中からも⾒れる！！

サーバ

サーバ

まさにWorld Wide Web！！(世界中に張り巡らされた蜘蛛の巣)

ということで、せっかく⾃分がつくったWebページを

世界に公開したい⽅は、レンタルサーバを借りましょう:)

月額129円 借