ホームページ作成講座

HTMLの歴史

HTMLの「黒」歴史

かつての「高度なテクニックを駆使した」ホームページ

各ブラウザが独自タグで「高機能」を競った時代の「ホームページ」。

この時代のコンピュータ学習用教科書には某テキストの例題みたいなのがいっぱい並んでいました。このレベルの「ホームページ」なら簡単に作れますが、今見てみると余り嬉しくありませんね。

ほとんど裸のHTML

リンク先のページ自体はHTML4.01 Transitionalで書かれていますが、もっと古い規格でも同内容のものは書けます。そして本サイトが準拠しているHTML5でもほぼ同等に書けるのです。HTMLとしては扱いやすい記述で書かれていますが、書式をブラウザ任せにしているのであまり見やすくはありません。特に文字が画面横にびっちり埋められているのが読みにくい!書籍でもそうですが、マージン(余白)のない文章は非常に読みづらいものなのです。

マージンが無くて読みにくいから…

左に文字がきっちり埋まってしまうHTML(ブラウザ)の初期表示に対して、変化を持たせようとして流行ったのが「センタリング」です。ワープロソフトでも最初にやりたくなる書式設定ですね。ただ見出しをセンタリングするのは良いのですが、本文まるごとセンタリングするには通常はやりません。でもなぜか「ホームページ」ではそういう書式が横行したのです。いま改めて見てみると結構みっともないですね。当時から嫌う人は嫌っていて、この手の書式設定を行っているサイトを「蛸壺」サイトなどと呼んでいたりしました。

マージンを作ってみた!

大切なのは左揃えを拒否することじゃない!マージン(余白)を作ることなんだ!というわけで、通常では作れない余白を作る「裏技」が流通しました。ふむ、見事に余白が作られていますね。めでたし、めでたし!じゃない!

このページが余白を実現している手段はソースを見てみてください。<blockquote></blockquote>で全体を囲っています。blockquoteのquoteは「引用する」という英語の動詞です。このタグは引用部を示すためのものなのです。リンク先のページ、全文引用なのですか?

段組風?

余白作りへの苦闘とともに、もう一つHTMLで人々がやりたかったことがあります。それは「段組」表示です。「段組」本来の使い方と言うよりも、左右どちらかに本文とは別の領域を作り、そこにリンク集とか更新情報、その他諸々のサイトの付帯情報を載せたい、というものです。いわゆる「サイドバー」などと呼ばれるものです。

この「サイドバー」部分は、サイト内でページを遷移しても、共通して用いたいことが多く、段組を作りたいという要望と部品を共通化して用いたいという要望を一気に解決する手法として用意されたのがこの「フレーム」と呼ばれる技術でした。中々に便利そう、と一旦は多くの人が飛びついたのですが、その後早々に廃れ、いまでは組織内アプリに細々と用いられている程度になっています。またフレームを作る規格もHTML5では廃止されてしまいます。何が悪かったのでしょう?(「サイドバー」の「プロフィール」のリンクをクリックしてみてください)

これぞ段組!?

「部品」を共通化したい、という要望は脇に置いておいて、ともあれ段組風にサイドバーを設置したい、ページ全体にマージンを作りたい、という要求を一気にかなえる手法が席巻しました。全体を表組みにしてしまえ、というものです。表でレイアウトを実現するというのは、表本来の使い方かどうかはともかく、blockquoteのような根本的な意味の取り違えはありません。しかも頑張れば相当に緻密なレイアウトも可能、ウェブデザイナー必須の技術となりました。今でも凝った体裁のウェブページの半数かそれ以上がこの技術を使っています。

でもこれももはや過去の技術となりました。やはりレイアウトというのは「表本来」の使い道ではないのです。具体的にはいくつかの問題点が指摘されています。その大きな問題の一つはソースの中にあります。これまでのソースは(フレームバージョンを除き)「リンク集」部分は「本文」より下に書かれています。情報の優先順位からすれば当然です。しかしこの表を用いた段組方式ではサイドバーを左に配する限り、「本文」の前に「リンク集」が来てしまいます。これでは本末転倒です。サイドバーを右に置けば解決することではありますが。。。

その他、ソース自体が余りにも複雑で、その構造を読み解くのは容易ではありません。少しの内容、デザイン変更でも大きな手間が掛かる可能性があります。見かけというのはウェブサイトにとって大切な要素ではあるのですが、そのために犠牲にしたものが余りにも多い、HTMLはシンプルに情報だけを記述し、見かけ・書式は別に設定したほうがよかろう、というのが現在の考え方です。

現在のトレンド

HTML4.01+CSS2/3からHTML5+CSS3へ

HTMLから見かけ・表現のための要素を徹底的に排除し、それはすべてスタイルシート(CSS)と呼ばれるものに移行する方向で規格化が図られていきます。ただいきなりそうしてしまうのは諸々無理があったため、移行のための規格も作られました。それがHTML4.01 StrictとHTML4.01 Transitionalです。HTML4.01 Transitionalは移行用の規格なので、見かけのための要素が*渋々*残りました。それ以前のサイトもこの規格でほぼ再現できるようになっています(上のHTML群はそうして書かれています。)。

一方HTML4.01 Strictやそれと同等(+α)のXHTML1.01はHTMLの理想を実現したものとなっています。使用できるタグは大幅に削減され、その代わりにスタイルシートがどんどん充実していきました。懸案の余白(マージン)も段組もすべてCSSでエレガントに実現できます。

そしてこの流れをより洗練させたものとして登場しているのがHTML5です。文書構造を記述するための要素をより充実させ、論理的なマークアップがよりやりやすくなっています。

番外編

ちゃっかり生き残ったフレーム

HTML5では「フレーム」は廃されました。それではサイドバーのような「部品」の共通化ができなくなってしまいます。そのための手段としてHTMLの外の技術、ウェブプログラムが用いられることが多くなっています。が、すべてのウェブサーバスペースでサーバサイドプログラムを動かせるわけではありません(セキュリティ的にユーザに使用を許可していないところが大半です)。ということでそのための救済的な意味もあるのでしょうか、フレームはフレームでも「インナーフレーム」という規格だけはHTML5でも生き残りました。インナーフレームは段組的なレイアウトには役に立ちません(リンク先はそうしたレイアウトはCSSで実現しています)。フレームの役割を限定することで、存続を許された、ということでしょう。ただしインナーフレームは運用の仕方によっては廃止されたあの「フレーム」の邪悪さはほぼ持っています。でもそこは運用次第ということで、一定の役割を持って生き残っていくのでしょう。

LINK

GMail
メール
Googleドライブ
ファイルの保存
『社会学評論スタイルガイド』
レポートの書式は極力このスタイルに準拠するように
アカデミック・ライティング
大阪大学 全学教育推進機構
論文・レポート作成の参考に
統計検定
統計に関する知識や活用力を評価する全国統一試験

Profile

Profile
授業担当者プロフィール