今回はブラウザについてです。
話の軸としては、サイト制作しているみなさんから見た時のブラウザとはどういう存在か。
これについてお伝えします。
ブラウザとは？
ブラウザとはホームページを見るためのソフトです。
アプリとも言いますが。
Google Chrome、Safari、Firefox、Microsoft Edgeなどが代表的なブラウザです。
そして、スマホのAndroidならGoogle Chrome。
アップルのiPhoneやMacならSafari。
WindowsならMicrosoft Edgeが最初から入ってますね。
で、このブラウザによってホームページが見れるようになっています。
と同時に、今html/cssでサイトを制作しているみなさんもこのブラウザ。
おもにはGoogle Chromeだと思うのですが、これを使ってデザインを確認できているはずです。
ここまでは大丈夫ですか？
次はWEBサーバーについて解説します。
冒頭でお伝えしたとおり、あくまでサイト制作者視点での話となります。
※サイト制作を勉強していると、サーバーとよく耳にすると思いますが、これはほぼWEBサーバーと思って間違いないです。
WEBサーバーとはデータの置き場所
ざっくり言うと、WEBサーバーとはデータの置き場所です。
※データ…htmlやcss、それに画像などもデータになります。
つまり、置き場所だけで考えるなら、みなさんのパソコンにデータを置いているか。
WEBサーバーに置いているかの違いだけなんです。
で、WEBサーバーにデータを置いておくと何が都合いいかといえば、世界中の人がサイトを見れるようになるわけです。
もちろん、WEBサーバーに置いておくだけではダメで、みなさんのサイトを見るためにはブラウザも必要になります。
- WEBサーバー…データの置き場所。世界中の人にホームページを見てもらうために必要。
- ブラウザ…データに基づいてホームページをモニター上に表示させるソフト。
ですから、片方だけではダメなんですね。
北海道や沖縄、地球の裏側のイギリスの人に見てもらうためには、両方が必要です。
ただし、自分だけのパソコンで見れれば問題ない時。
まさに今制作中のサイトはそのような状態にあるはずです。
その時は、データをサーバーに置いておく必要はありませんよね。
そして、今どきのテキストエディタのソフトはブラウザソフトと連携できており、制作途中のサイトを見れるようになっています。
※テキストエディタ…Atom・Visual Studio Code・DreamWeaverなどのこと
ですから、極論サーバーにデータを置いておくのと、自分のパソコンにデータがあるのとは大きくは違わないんです。
ブラウザでサイトを表示させるという意味では。
※WEBサーバーにはいろんな働きがあります。
ブラウザとhtm/cssファイルの関係
じゃあ、ここで自分のパソコンにサイトのデータが入っているとしましょう。
html/css、それに画像などのデータですね。
そして、みなさんはサイトの制作中です。
その制作の過程において、Google Chromeを開き何度もサイトのデザインを確認していると思います。
ブラウザはどうやってサイトを表示しているのか
この時、何がどうなってパソコンの画面にみなさんのサイトが表示できているかというと、データがコピーされて、それがブラウザに渡されてるんです。
例えば、
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<title>いろいろテスト中！</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>テスト</p>
</body>p {
color: red;
}と書いた、html/cssファイルを作ったとしましょう。
それぞれ、test.html、test.cssという名前です。
そして、検証画面を開きます。
右上に注目してください。
拡大します。
「Sources」とありますね。
※「Sources」と出てない場合は、下図のように》をクリックしてください。
「Sources」をクリック。
すると、test.htmlとtest.cssがそれぞれあります。
これは、パソコンの中にあるtest.htmlとtest.cssファイルがコピーされていることを表しています。
そして、htmlやcssファイルに書き加えたり修正したりして、更新するとその情報がGoogle Chromeに伝わるようになっています。
ですから、このようにしてみなさんが制作しているサイトは表示できているんです。
で、サーバーからサイトを表示する場合もほぼ同じことが行われています。
つまり、サーバーにあるhtml/cssのデータをコピーし、それをブラウザが受け取ることによってサイトを表示できるようになっているんです。
このような仕組みだから、検証画面でcssの値を変更したりしても問題ないわけです。
本来のデータはパソコンの中、またはサーバーにあるので。
検証画面では、あくまでもコピーしたファイルをいじっているに過ぎません。
こう見ると、サーバーまたは自分のパソコンにデータを置いておくのも、ブラウザでサイトを表示させる仕組みは同じだと分かっていただけたかと思います。
※ブラウザの働きは実際はもっと複雑で、html/cssなどのファイルを分析したうえで、サイトデザインとして表示させる(レンダリング)といった手順を踏んでいます。
まとめ
というわけで、サイト制作者視点で見た時のブラウザについてお話ししました。
このへんの仕組みはちょっとむずかしいですが、分かるとすごい楽しいと思います。
自分だけかもですが…
