ナビゲーションをスキップ

about[1] history[2] writings[3] links[4] sitemap[5]

/テーマ別書庫[8]/HTML入門

go back to top page[0]

文系人間のためのテキストサイト用HTML&CSS入門

  1. 初めに要素ありき。
  2. 要素は中身とともにあり。

1.初めに要素ありき。

webmasterが当サイトの作成に取りかかったのは約2ヶ月前。 最初は、とあるフリーのHTMLオーサリングツール(いわゆる「WYSIWYG(What You See Is What You Get)タイプのHTMLエディタ」)を使っていたのだが、そのうちオーサリングツールでは思い通りにならないところについて微修正がしたくなり、仕方がないのでネット上の各種解説などを見ながらテキストエディタでソースを直接触りだして、今に至っている。 立ち上げが終わった今となっては、毎回の更新時にコンテンツを追加していくだけだから、このままではせっかく覚えたHTML関連の知識を忘れかねないので、このあたりでwebmaster自身の頭をもう一度整理し、一からまとめてみよう、それが誰かの役に立つのならラッキー、というのが本企画の趣旨である。

ネット上にはいろいろとすばらしいHTML入門があり(例えば神崎正英氏による「30分間HTML入門」)、上記のように素人同然のキャリアしかないwebmasterごときがこのようなものをあえて書くのもどうかも思う。 しかし、素人同然の、しかも文系人間("about"参照)であるwebmasterが書くからこそ、より低い目線から、よりかみ砕いて、より初歩的なところからの説明が可能となる(かもしれない)、という差別化を狙ってみた。 ネット上のリソースは競合性がない(webmasterがHTML入門を公開したからといって、ほかのHTML入門が閉鎖されるわけではない。まあ、トラフィックの問題はあるから、厳密な意味で競合性がないわけではないが)ので、もしHTMLやCSSがよくわからない、という人がいれば、webmasterなりの理解を試して欲しい(あと、間違いがあったら教えて欲しい(笑))。

なお、次のような文章にする予定なので、以後読み進めるべきか否かのご参考に。

テキストエディタでHTML文書を作成することを前提とする。
上記のように、webmasterは今そのように作業をしているので、これしか書けないのが実態(いわゆるタグ挿入型のHTMLエディタには応用可能なものが多いが)。 ただ、オーサリングツールでサイトを作っている人がそのことに不満を持っていないのであれば、HTML入門を読む必要はないのではないか。 やりたいことができているのであれば、HTML入門を読んでいる時間があれば、サイト内容の充実に使った方がよいとwebmasterは考える。
HTML4.01 strictを前提とする。
テキストエディタでHTML文書を書こうとする人であれば"HTML4.01 strict"とは何か知っていると思うが、一応念のために簡単に説明すると、最新のHTML規格(=4.01)は2種類に分かれていて、1つがstrict、もう1つがtransitional(本当はフレームを使う場合のframesetを入れて3種類だが、以下の文脈ではtransitionalと同じものとして取扱ってかまわないので、2種類とみなす)。 strictとは規格からの逸脱を許さない厳正さのことで、transitionalは過渡的のことだが、つまり"HTML4.01 strict"とは、本来HTMLにそぐわないものの、かつては経緯などもあって認められていた部分について、その使用を不適切であるとしたものである(逆に、これまでは認めていたんだから今更ダメとは言わないよ、というのが"HTML4.01 transitional")。
で、双方とも正式な現行規格なのでどちらを使ってもいいのだが、仮に、後々HTMLについて大きな変化(例えばメジャーなブラウザが次世代HTMLであるXHTML(Extensible HyperText Markup Language)にしか対応しなくなるとか)があった場合、より簡単に対応可能なのはstrictだから、webmasterstrictなHTML文書を作成している。
テキストをメインとするサイトにとって必要最小限の事項のみを取り扱う。
例えばフレーム関連の要素やJavaScriptなど、webmasterが当サイトの作成にあたって使わなかった要素や技術については、当然ながら対象としない(というか、できない)。 つまり、当サイトのようにひたすらテキストが詰まったサイトを作りたいという人にとってはそれなりに有益なものとなるだろうが、それでは満足できない、もっとほかのことがしたいという人にとって実用的なものとして役立つような話は、残念ながら出てこない(考え方の整理には役立つとは自負しているが)。

さて、ずいぶんと前置きが長くなってしまったが、ここから本題。 今回しっかり理解してもらいたいのは、副題にある「初めに要素ありき」(少し今後のネタを明かせば、次回は「要素は・・・と共にあり。要素は・・・なりき」 さあ、「・・・」とはなんでしょう?)。 なんで「初めに要素ありき」なのか、わかりやすいたとえは、音楽。

あるとき、すばらしいメロディが頭の中に浮かんだとして、それをどうやって人に伝えるか。 何回か口ずさんでみて(楽器で演奏してもいいのだが)覚えて人に会ったら歌ってみせるとか、そうやって歌ったりしたものをテープやMDに録音して聞かせるとか、コンピュータで音楽をしている人ならMIDIデータにして(歌ったものをmp3ファイルに変換したっていいんだけど)ネットで公開するとか、いろいろな方法がある。 そんな中で、とってもメジャーな方法は何かといえば、それは楽譜に記述することだ。 実は、これはHTML文書の作成と本質的に同じ行為である(ってなことを誰かが思いついているかどうか調べてみたら、「HTMLに似せた楽譜記譜法MHTML」なんてものがありました。まあ、そんな新しい言語を考えなくてもXML(Extensible Markup Language)で同じことができるはず(MusicXMLがそれに該当するのかどうかはよく知らないが))。

楽譜にメロディを記述するときには一定の決まりがあって、それに従って音符などを書いていかなければならない。 勝手な記号などを書いても意味がなく、頭の中のメロディを各種の音符や休符、強弱記号などの一定の記号を用いて書かなければ、それを見た人は、この楽譜はどのようなメロディを表しているのかがわからない。 共通のルール、書式に従ってメロディが表現されているからこそ、楽譜の読み方を知っている人が見れば、メロディを再現することが可能となっている。 HTMLにとっての要素は、楽譜(の記述方法)にとっての音符や休符、強弱記号などに当たる。 楽譜がそれらの記号の組み合わせでメロディを記述するように、HTML文書は、その中に含まれる要素の組み合わせで、テキストや画像、音楽といった、作成者が表現したいものごとを記述するものなのだ。

逆に言えば、HTML文書は要素しか記述できない。 あなたが表現したい何かがあるとして、それをウェブでの公開という形で表現するのであれば、楽譜でメロディを記述するときに必ず五線紙と音符などの組み合わせだけで記述しなければならないように、必ず要素の組み合わせだけで記述しなければならないのだ。 それがいやなら、HTML文書による公開=ウェブでの公開はあきらめ、なにか別の手段を探す必要がある。

これが、「初めに要素ありき」ということだ。 HTMLを知るということはこのこと、すなわちHTMLとはあなたの表現したい何かを要素の組み合わせで記述する言語であることを知るということであり、HTML文書の作成方法を知るということは、あなたが表現したい何かはどのような要素に当てはまるもので、その要素はどのように記述すべきものなのかを知ることなのである。

というわけで、今回はここまでとして、次回からはもっと具体的な話に移るが、一つお断りを。 冒頭に書いたように、webmasterは当サイトを作成しながらHTMLやCSSを勉強していったので、初期に書いたソースには、次回以降の話で否定しているようなものがある。 本来、偉そうに「HTML&CSS入門」を書くのであれば、そういった部分は率先してすべて訂正すべきだとは思うが、そこは目をつぶっていただき、当サイトのソースを見て信頼できないと判断するのはちょっと待っていただきたい。 見放すのであれば、次回以降の文章を見て、やっぱり信頼できないというときにしてもらえれば幸いである。

(2003-01-11記)

2.要素は中身とともにあり。

最初にお断りを2つ。 まず、前回、今回のサブタイトルを予告しましたが、ちょっと変更。 次に、この連載はじっくりと基本的な考え方から説明していて、急がば回れでこのやり方が結局はわかりやすいと思うからそうしているのだが、手っ取り早くHTMLについての知識を得てみたい人のために、この連載の付録として「HTMLを始めてみよう」という参考ページを別に作ってみた。 といっても、webmasterのオリジナルではなく、もともとはHTMLの生みの親W3C(World Wide Web Consortium)のサイトに掲載されている"Getting Started with HTML"というページで、それを訳したものだ。 もしよかったらそちらも読んでみて欲しい。

前置きはこのくらいで、今回の話題に移ろう。 今回は、要素って何、というのがお題。

結論から言うと、要素とは構造の位置づけのことだ(そもそも、HTMLのM = markup(マーク付け)とは、HTMLにより表現される中身について、マーク(HTMLで言えば「タグ」)を付けて要素=(マークを付けた部分の中身内での)構造における位置づけは何かを明らかにする、ということを指している)。 さっそく、具体例を出してみよう。 元ネタは、首相官邸サイトから引っ張ってきた、日ロ首脳会談(2003-01-10)後の「日露行動計画の採択に関する共同声明」の概要と、「日露行動計画」の概要だ。

中身

日露行動計画の採択に関する日本国総理大臣及びロシア連邦大統領の共同声明(骨子)
国際の平和と安全の強化、国際的なテロリズム問題を始めとするグローバルな問題の解決のために協力する。
(中略)
日露協力の飛躍的かつ全面的な発展を確保するために具体的施策を採ることの重要性を強調して、附属する日露行動計画を採択するとともに、本行動計画を着実に実現していくために共同作業を行う。

「日露行動計画」(骨子)
1.政治対話の深化:「重層的かつ全面的な対話の推進」
・首脳間の定期的な交流を定着。閣僚レベルの接触の拡大(外相間の緊密な接触、国防担当大臣の相互訪問、貿易経済政府間委員会の開催等)。議会・議員間の交流の拡大を支援。
(中略)
6.文化・国民間交流の進展:「相互理解と友好の深化のために」
・「ロシアにおける日本文化フェスティバル2003」における協力の緊密化。
・青年交流の充実。
・第3回日露フォーラムの実施に向けた協力。
・人的交流拡大のための環境整備。

マーク付け後

!ここから「文書」-
!ここから「声明」-
!ここから「題名」-

日露行動計画の採択に関する日本国総理大臣及びロシア連邦大統領の共同声明(骨子)
-「題名」はここまで!
!ここから「本文」-

国際の平和と安全の強化、国際的なテロリズム問題を始めとするグローバルな問題の解決のために協力する。
(中略)
日露協力の飛躍的かつ全面的な発展を確保するために具体的施策を採ることの重要性を強調して、附属する日露行動計画を採択するとともに、本行動計画を着実に実現していくために共同作業を行う。
-「本文」はここまで!
-「声明」はここまで!

!ここから「計画」-
!ここから「題名」-

「日露行動計画」(骨子)
-「題名」はここまで!
!ここから「項目名」-

1.政治対話の深化:「重層的かつ全面的な対話の推進」
-「項目名」はここまで!
!ここから「項目内容」-

・首脳間の定期的な交流を定着。閣僚レベルの接触の拡大(外相間の緊密な接触、国防担当大臣の相互訪問、貿易経済政府間委員会の開催等)。議会・議員間の交流の拡大を支援。
-「項目内容」はここまで!
(中略)
!ここから「項目名」-
6.文化・国民間交流の進展:「相互理解と友好の深化のために」
-「項目名」はここまで!
!ここから「項目内容」-

・「ロシアにおける日本文化フェスティバル2003」における協力の緊密化。
・青年交流の充実。
・第3回日露フォーラムの実施に向けた協力。
・人的交流拡大のための環境整備。
-「項目内容」はここまで!
-「計画」はここまで!
-「文書」はここまで!

HTMLを知っている人はずいぶん驚いただろう(笑)。 「なんだこれは!」と。 見慣れたタグがない代わりに、わけのわからない注釈のようなものがいっぱい書き込んであるし。 しかし、マーク付けをする=要素を明示するということは、こういうことなのだ。 HTMLとは全然違う、というのは、マーク付けの方法が異なっているので外見が異なるだけで、上記のマーク付けは本質的にはHTMLのマーク付けと同じことをしているのだ。

どう読めばいいのかについて、といっても見たまんまだが、一応解説しておくと、上記の例では、"!ここから「」-"というマークで要素の開始を表し、"-「」はここまで!"というマークで要素の終了を表し、"「」"で挟まれている部分がその要素が何かを表す(それが何かはご覧の通りだ)、というマーク付けをしている。 HTML風に書くとすれば、例えば"「日露行動計画」(骨子)"のマーク付けは、<題名>「日露行動計画」(骨子)</題名>ということになる(なぜそう書かなかったというと、建前はHTMLのタグからできるだけ離れてもらう方が要素とは何かがわかってもらえるのでは、ということで、本音は文字実体参照("<"とか">"といった一定の文字について、&xx;といった形で記述すること)が面倒だから(笑))。

上記の例を見ればわかるように、それぞれの要素は、中身の構造においてそれぞれが当てはまっている位置づけを示している。 それが題名という位置づけに当てはまるのなら題名要素だし、項目名という位置づけに当てはまるのなら項目名要素。 だから、なんらかの表現する中身を作った場合、要素はその中に必然的に含まれているものだ(少なくとも何らかの構造をもった中身ならね)。 紙に書かれた普通の文書なら、それがどんな構造になっているかは、そこは人間同士ということで暗黙の了解があって、いちいち「これは題名で、これは本文で、・・・」と説明しなくても、文書の中身のそれぞれがどのような位置づけ=要素なのかはわかる。

しかし、HTMLを「読む」のは、人間じゃない。 ブラウザに表示されたHTMLを読んでいる、といいたい人もいるかもしれないが、それはHTMLを読んでいるんじゃなくて、HTMLをブラウザが読んで解釈し、「この要素はこうやって表示する(例えば見出しのh1要素は字を大きくする、とか)」と処理した結果の表示を読んでいるだけだ。 結局、HTMLを書くということは、表現する中身について、ブラウザなど(正確にはHTMLパーサ)が読めるよう、人間なら言わなくてもわかる文書の構造的位置づけ=要素を逐一明示していくということなのだ。

というわけで、今回はここまで。次回は「要素は中身なりき」だ。

(2003-01-18記)

bewaad<webmaster@bewaad.com>

go back to top page[0]

/テーマ別書庫[8]/HTML入門

about[1] history[2] writings[3] links[4] sitemap[5]