【Web基礎】ブラウザとHTML｜Webページは「設計図」を読み込んだ結果だった

私たちが普段使っているGoogle Chrome、Safari、Edgeなどのソフトを「Webブラウザ（Browser）」と呼びます。
直訳すると「閲覧する人」という意味です。

実は、インターネット上を流れているデータには、画像や動画以外に「色」も「レイアウト」もついていません。
ただの「文字（コード）」が流れてきているだけです。

では、なぜ私たちの目にはカラフルなWebページとして映るのでしょうか？
それは、ブラウザがものすごいスピードで「翻訳（レンダリング）」をしてくれているからです。

1. Webページの実体は「文字だけの設計図」

パソコンをお使いの方は、今見ているこのページの上で「右クリック」をして、「ページのソースを表示」を選んでみてください。

意味不明な英語や記号がズラッと出てきませんか？
<div class="header">...</div>
実は、これこそがWebページの本物の姿（HTMLファイル）です。

サーバーから送られてくるのは、この「文字データ」だけ。
それを受け取ったブラウザが、「ふむふむ、ここは太字にするのか」「ここに画像を配置するのか」と解釈して、一瞬で綺麗な画面を描画しているのです。

この設計図を書くために使われるのが、HTML、CSS、JavaScriptという3つの言語です。
家づくりに例えると、役割の違いがよく分かります。

HyperText Markup Language

家の柱や壁を作る言語です。
「ここが見出し」「ここが段落」「ここに画像を置く」という、文書の構造を定義します。
これだけだと、白黒で愛想のない書類のような画面になります。

Cascading Style Sheets

壁紙を貼ったり、家具を配置したりする言語です。
「文字を赤くする」「背景を水色にする」「スマホで見たら縦並びにする」といった、見た目（デザイン）を指定します。

動的な仕掛けを作るプログラミング言語です。
「ボタンを押したら画面が動く」「自動でスライドショーが切り替わる」といった、動き（アクション）を担当します。
家のドアを自動ドアにしたり、電気をつけたりするイメージです。

昔（1990年代後半）、Internet ExplorerとNetscapeという2つのブラウザが、「どっちが便利か」を競って戦争をしていました。
その結果、「Explorerでは綺麗に見えるのに、Netscapeだと崩れる」という困った事態が多発しました。

これでは困るので、現在は「W3C（ダブリュースリーシー）」という団体が、「HTMLはこう書くべき！」という世界共通ルール（Web標準）を決めています。
おかげで、今はChromeでもSafariでも、ほぼ同じようにページが見られるようになったのです。

ブラウザは、ただ表示するだけでなく、あなたの「秘書」のような仕事もしています。

これらはすべて、サーバー側ではなく、あなたのパソコン（ブラウザの中）に保存されています。
だから、PCを変えたりブラウザを変えたりすると、ログインし直しになったりするのはそのためです。

もし将来プログラミングを学ぶなら、まずは「HTMLとCSS」から始めるのがおすすめです。
自分の書いた文字が、ブラウザを通して一瞬で「形」になる感動は、エンジニアへの第一歩として最適だからです。