[TOPへ][学びの道へ][気づきの小箱へ][いのち][Eメール]

2000/04/21

大改訂しました!

 皆さんこんにちは。お久しぶりです。今回このサイトのページすべてを大改訂しました。ちょっと見には大した違いはないように思われますが、本質的には全く異なったページになっています。

一体どのように変わったのか、なぜ大改訂したのかについてこれからお話ししましょう。

 インターネット上のホームページはHTMLという言語で書かれているのは皆さん知っていますよね。私もこのサイトを開設している者として当然知っているつもりだったのですが、最近きちんと『HTML』を勉強してみて、本当は全くわかっていなかったということに気づきました。  以前の私は、『HTML』に対して、「テキストファイルなのに、<タグ>という特殊な記号を使い、専用のブラウザで見ることによって、ワープロソフトで作ったような見栄えのよい文章ができる。しかも、基本的にテキストファイルなので、ファイルサイズが小さくてすみ、汎用性が高い。」というように捉えていました。簡単に言えば、『HTMLは、テキストファイルの見栄えを良くするもの』と思っていたのです。

 実は、それまで私は、WebページをMicrosoft Wordで作っていました。ワープロ感覚で簡単に思った通りのレイアウトのページができるので、とても満足していました。

 ところがある日、ふとしたきっかけで次のことに気がつきました。

「あれ、HTMLなのにファイルサイズがずいぶん大きいんじゃないかな?」

 そうなんです。基本的にテキストファイルのはずなのに、Word文書(.doc)とそう変わらないファイルサイズなのです。「こ、これは、一体どういうことだ!」と思いソースを見ましたが、それまで、HTMLの勉強をちゃんとしていなかったので、何が何だかわかりませんでした。

 そこで、簡単な解説書を見て、少し勉強し、再びソースを見てみると、<!-- -->でコメントアウトされている部分がたくさんあり、どうもHTML以外の言語が混在して書かれているようでした。そこでそのような部分を恐る恐る削除してみたところ、見た目に変化はなく、ファイルサイズも半分くらいになり、私は大変満足しました。

 それ以来、私は、Wordでページを作るのをやめようと思い、FrontPage Expressで作ってみました。ほぼ同じページが比較的簡単にできました。しかし、よく見ると、行間が詰まっており、文章は読み難くなっていました。私のサイトは文章ばかりですから、読み難いことは致命的です。また、Wordでは行間が開くのに、FrontPage Expressでは、なぜ行間が開かないのか疑問でした。

 それで私は観念して、HTMLを基本から勉強することにし、初心者向けの入門書ではなく、辞書的なある本を購入しました。その本をはじめから読んでいくとそれまで自分が作っていたWebページがいかにいいかげんなものであったかがすぐにわかりました。そしてHTMLに対する私の認識も全く見当違いだったことに気づかされました。

 実は、HTMLとは、見栄えを良くするものではなく、論理構造を記述する言語だったのです!   ‥‥ん?
と書いても何のことやらわからない人もいると思いますので少し説明します。

 <タグ>というのは、その間にある部分に意味付けする為のものなのです。例えば、段落と段落の間にスペースを取ろうとすると、<BR>タグを五つも六つも並べてみたり、レイアウトの為に<TABLE>タグを使ったりしていたのですが、このようなことは、HTMLの文法からすると、全くとんでもないことなのです。<BR>タグは、段落の中での改行を意味するものであり、<TABLE>タグは、その間にある内容が表であることを意味するものでした。つまり、HTML文書とは、あくまでもテキスト文書であり、テキストのまま見ても、ある特定の<タグ>で囲まれた範囲が一体どういう意味を持つのかがわかるようにしてある言語だったのです。

 例えば、文章の中で太字にしたいときは、<B>タグで挟みますが、我々は、しばしば太字は強調の意味で使います。しかし、<B>タグには強調の意味はありません。この場合、<STRONG>タグを使うと強調の意味が付加されます。インターネットエクスプローラのようなブラウザで見るとどちらも太字になって見えますが、<B>タグで挟まれているのと<STRONG>タグで挟まれているのとでは、本質的に異なるということがおわかりのことと思います。

 このことを知ったのは、まさに目からうろこの体験でした。そのような目でみると、段落と段落の間にスペースを取るために<BR>タグを五つも並べるというのは、文章の途中で意味もなく5回も改行しているのですから、本質的にはとてもおかしなことです。

 それでは、五つの<BR>タグを削除してみます。すると、段落と段落の間がくっついてしまい、そのままではブラウザで見ると見栄えが良くなく、読み難くなってしまいます。

「一体どうしたらいいのだろう?」

 実はそのような、ブラウザで見るときのレイアウトに関しては「スタイルシート」というものが用意されています。「スタイルシート」は、純粋にレイアウトだけに関するもので、例えば、段落と段落の間に、スペースを空けたいときには、その分だけ上下のマージンを設定すれば良いのです。また、文章を読みやすいように行間を空けようと思えば、「line-height属性」を使って行間の距離を設定すればよいのです。ここでもまた目からうろこでした。

 HTMLは誕生してから現在までに発展を遂げており、97年にW3Cから勧告された「HTML4.0」において、このように、文章の内容をあらわす部分とレイアウトに関する部分とを分けるようになったそうです。このようにすると、HTML文書は大変すっきりしますね。私の理解も大変すっきりしました。

 ただ、今は移行期であるので、従来の表記もまかり通っているようですが、将来的には、レイアウトに関する部分はすべてスタイルシートになるようです。

 というわけで、今回移行期のHTML4.0になるべく準拠するよう、スタイルシートを使ってWebページを書き換えました。まだまだ勉強が足りずにいたらないこともあるかと思いますが、今後ともよろしくお願い申し上げます。

PS:ちなみに、世に出回っている、いわゆる「ホームページ作成ソフト」でWebページを作ると、HTML4.0には全く準拠せず、<BR>タグや<BLOCKQUOTE>タグのオンパレードだったり、スペースが一つだけ挟まった段落(<P> </P>)とかができてしまいます。

 現在私は、テキストエディタLittle Spider(b2rさん作フリーウエア:URL http://kobe.cool.ne.jp/b2r/)を自分仕様にカスタマイズしてWebページを作成しています。

平成12年4月21日

Dr.0910

目次 1.年賀状 3.HTMLに学ぶ

[TOPへ][学びの道へ][気づきの小箱へ][いのち][Eメール]