前号: No 239 / 次号: No 241 / 一覧に戻る
インターネットで調べものをする、ニュースやブログを読む、通販 で買い物をする、こういった時にはChromeやEdge、Firefoxといった Webブラウザ（インターネットブラウザとも。以下ではブラウザと 書きます）を利用します。 このブラウザというのは、インターネットを活用するのに必ず利用 する道具ですが、その内部で何をしているのか？というのは意外に 知られていません。 今回から、数回に分けてブラウザについて解説をします。1. ブラウザとは？
インターネットと言えばwebブラウザというくらいに一般的な道具 となったブラウザですが、技術的にはHTTP(Hyper Text Transfer Protocol)という通信手順を使って、HTML(Hyper Text Markup Language)形式のデータを扱えるプログラムのことを指します。 このHTML形式のデータには、画面に表示させたい文章や書式を 記述したもので、その名の通りLanguage(言語)ですので、プロ グラム言語などと似たような書き方です。 例えば、HTMLというのはこんな記述になります。 ----ここから <HTML>gt; <HEAD> <TITLE>サンプルのHTML文書</TITLE> </HEAD> <BODY> <H1>サンプルのHTML文書</H1> <P>これはサンプルです。<BR> このようなデータをブラウザは解析して表示を行います。</P> </BODY> </HTML> ----ここまで いろいろと、本文以外の飾り（タグなどと呼びます）が付いて いて、人間には非常に読みづらいのですが、ブラウザはこれを 読み解いて表示を行ってくれます。 そのHTMLを解釈して表示するのが元々のブラウザの仕事だった のですが、HTMLだけでは後述のように不足部分があるため、 他の機構も利用しながら、画面表示をしているのが現代の ブラウザと言えます。 ブラウザが利用する機構には以下の二つがあります。 ・CSS(Cascade Style Sheet)による表現力向上への対応 ・JavaScript(ECMA Script)による変化のある画面への対応 今回はこのうち、HTMLとCSSの関係について解説をします。2. HTMLの混乱
当初はブラウザが扱えるのはHTMLだけでした。 というか、HTMLというのは学者が学術論文の末尾の参考分献を簡単 に参照したいという夢を実現するための手段でした。 当時、論文の参考分献というのは図書館で過去の資料を探すか取寄せ するしかありませんでした。 それに対して、各学者や図書館がサーバを立ち上げ、それぞれが 所有している論文をサーバに上げておけば、HTMLに記載された リンクを通して、参考文献をいくらでも閲覧できる環境が得られます。 これは学者にとっては理想でしょう。 HTMLはこのように学術論文の記述に便利な機能を中心に実現されて いましたので、決して表現力は豊かなものではありませんでした。 HTMLでは最初から画像表示や表の作成ができましたが、これらも 画像は説明用の写真や図に、表は実験結果の表作成にと、いずれ も論文の記述に便利な機能だったから含まれていたと言えます。 HTMLはその名の通り文書構造記述（マークアップ）のための言語 です。色や文字サイズといった装飾情報についてはほんのオマケ として定義されていただけでした。 それに対して、商用目的で各サイトを運営しようとしている側は、 魅力的で見やすくしたいわけです。 ですが、それを実現するにはHTML側の機能がショボすぎたのです。 これをクリアするために、タイトルに画像を使ったり、表を使って 自由なレイアウトを目指すといった、当初の狙いから明らかに外れた 使い方をするケースが目立ってきました。 こんなことは大した話ではないように思われるかもしれません。 ですが、HTMLを「文書構造の記述」以外に使われると、文書の意図 を検索エンジンが正しく汲み取れない可能性が高まります。 起きていたことの例として、タイトルが画像で表示されると検索 エンジンはタイトルを読めませんし、表形式でレイアウトを決め られると検索エンジンは文章の前後関係を把握できません。 「ぐぐる」などと動詞化するほど、検索エンジンが使われている 現状を考えれば、検索エンジンにとっては情報の質が確保できる ことが決定的に重要です。 ですが、この時点で10年以上に渡って世界中で商用にも利用されて いる（結果的にダメなものも含めて大量の情報資産がある）HTML を捨てることはできませんでした。 HTMLの構造を破壊する流れは決して見過ごすわけにいかない事態 だったのです。3. CSSの誕生
この時点では、HTMLには文書構造（段落や見出しといった文書に 必要な情報）と装飾情報（色、フォント種別、アイコン、背景画像、 アニメーション、表示位置情報など）が混然一体となっていました。 この状況から、HTMLに含まれる情報を文書構造に絞り、装飾情報 を別形式のファイルに分離させようというポリシーの元で、1995年 あたりから様々な提案がなされます。 その結果、採用されたのは、装飾情報をCSS(Cascade Style Sheet） に持たせて、HTMLと完全分離する方式でした。 ちなみに、CSSの記述内容は次のような感じになります。 かなりHTMLとは雰囲気が違っていることがわかります。 ----ここから h1 { font-weight:normal; font-size:2.2em; background:#8888ff; padding: 5px; margin: 0; } .h1special { font-weight:normal; font-size:1em; background: url(images/image-1.JPG) no-repeat; margin: 5px; } ----ここまで ブラウザは表示のためにHTMLとCSSを参照して内容を表示します。 検索エンジンは基本的にHTMLのみを参照して記事を解析します。 これによって、HTMLは当初のように文書の内容だけを記述できる ようになったのですが、これが一般化するのにはかなりの時間が 必要でした。 規約が決まったからといって、すぐに使えるようになるわけでは ありません。 規約が決まってから、それに合うようにブラウザの改修が行われ、 その内容を技術者が理解し、その理解に合わせてコンテンツを作成 する、という段階を踏むことが必要だからです。 道具としてのCSSは既に2005年頃には使えるようになっていましたが、 それを多くの現場技術者が使いこなせるようになるのは2010年を 過ぎてからでした。 現在では、新たに作られるページは、CSSとHTMLに分離するのが ごくあたりまえのこととなっています。 余談： 時に画面のレイアウトが崩れてしまい、写真や、メニューや その内容が縦にずらずらと表示されてしまう場合がありますよね。 あれは何らかの理由でCSSの読み込みに失敗しているのが原因 です。通常は再読込すれば直ります。 それでも直らない時は、おそらくCSSが壊れた（途中までしか ダウンロードできていない）状態でキャッシュされてしまって いると思われます。 CSSの装飾情報がないと、ああいった素っ気ない画面となります。 逆に言えば、CSSなしでも文字に関する情報はHTMLだけで正しく 表示できるわけです。4. まとめ
日常的にブラウザを使うわけですが、その内部ではかなりいろんな ことをやっています。 元々はHTMLというデータ形式で全てを処理していたのですが、その 表現力には限度がありました。 それでも表現力を増やしたい人々が、本来の使い方を逸脱した手法 に頼るようになりました。 その状況に危機感を感じた人々が、CSSという方式により、HTMLから 修飾情報をCSSに外出しとする方式を考案しました。 その後、ブラウザはHTMLとCSSの両方を参照して表示を行うように なり、今に至っています。 さて、今号で、2021年の「がんばりすぎないセキュリティ」は最終 号となります。一年間のご愛読に感謝いたします。 来年も変わらぬご愛読をお願いいたします。 なお、次週の22年1月3日はお休みをいただき、次号は1/10(月)に 配信いたします。 次回は、今回の続きとなりますが、HTMLとJavascriptについて 解説をします。 次回もお楽しみに。 （本稿は 2021年12月に作成しました）