制作者(webmaster)
野嵜健秀(Takehide Nozaki)
改訂
2002-01-27

「HTMLどうすりゃ委員会」を斬る

HTML文章入力の巻

ソース

入力した文章が現れる。

文章を入力したファイルを保存して再びブラウザーで開くかドラッグアンドドロップして見ましょう。
いま入力した文章がブラウザーに現れましたね。

「 皆さん今日は。こちらはHTMLどうすりゃ委員会です。
   HTMLを楽しく書くことを目標にしています。
   本当に初めての人は是非みてね。
   一緒にインターネットを楽しみましょう。」

body直下の文字列は、HTML 4.01 Strict的には文法違反です(好ましくないと云ふ事)。また、改行は空白文字扱ひされます。サンプルの改行は改行とならず、全ての文章が繋がつて表示されます(ブラウザの右端で折返されるだけ)。筆者の示すサンプルは大嘘です。

これでホームページが一枚もう出来ました。
勿論まだ文字だけですが、基本的な仕組みの一端は覗けた訳です。
多くのHTMLの参考書では、ここから延々とHTMLのコマンドが続くのですが、ブラウザーの画面を変化させながらやって見ると簡単に仕組みがわかりますし、第一、大変面白いと思います。
私も、最初に一枚だけホームページを作って見た時、「えっ、こんな仕組みだったのか」 という新鮮な驚きを今でも覚えています。

さう云ふ事に驚ける感性は一般に「素晴らしい」ものとされてゐますね。私はその手の事にはちつとも驚かないのですが、何にでも驚ける人は世間に多いみたいです。大體、プログラムなんてものは豫め擧動が決つてゐるから「プログラム」と云ふのであります。豫め擧動の決つてゐるものに驚く人間の氣が知れません。

それから、參考書でコマンドが續いてゐる、なんて事はあり得ません。「HTMLのコマンドの解説」ならば續いてゐるかもしれませんが、そもそもHTMLに「コマンド」なるものは存在しません。

駄目な參考書では、タグとその「效能」が羅列されてゐる可能性はあります。しかし、さう云ふ參考書の駄目な解説も、大抵の場合、著者が「ブラウザーの画面を変化させながらやって見」て「發見」した事が書かれてゐるものです。自分で「面白」がつて色々やつてみたところで、所詮得られるのは、さつき忌避した書物の「間違つた知識」と同じものでしかありません。時間を無駄にするだけですから、止めませう。

そもそも、ブラウザーの画面を変化させ面白がつてはいけません。制作者が一人で面白がるのがウェブサイト制作だと勘違ひしてはいけません。

余談はさておき、今度は見出しをつけてみましょう。

なぜ?

見出しをつけて見る。

適当な短い文章を入力し、その文章を<H1></H1>で括ります。
……
見出しの部分と本文の間は自動的に空行が出来ています。

「自動的に空行が出来」てゐるのではありません。見出しは、ブロック要素なので、前後で改行されるものなのです。

このH1の数字を2から6まで変えてみましょう。
次第に字の大きさが小さくなってくるでしょう。
自分の好きな適当な大きさにします。

「字の大きさ」が變化するのは、Mosaic系のブラウザが見出しレヴェルを文字の大きさで表現するからです。

h?の?の數字は「見出しレヴェル」を意味してゐるので、絶對に自分の好きな適当な大きさにしてはなりません。

「どうすりゃ委員会」氏は、恐らく「見出し」の意味を知りません。

センタータグを使ってみる。

html 3.2以降、centerはdiv align="center"の「略記」扱ひで採用されました。出自は例によつてNetscapeの獨自要素です。divのalign屬性はhtml 4.01で非推奬となつてゐます。當然centerも非推奬です。

空行と改行を入れてみる。

もし、本文の行のどこかを一行開けたいのなら、<P>を一個入れて見ましょう。

そんな事にpを使つてはなりません。「ブラウザー」の表示で納得してゐるから、かう云ふ誤つた解説を平氣で出來るのです。

本文の文章の並びが見づらいのなら、折り返ししたい個所に<BR>を入れてみます。

さう云ふ言ひ方は初心者に、自分が「見づらい」のならば閲覽者も皆「見づらい」のだ、と決めつける事を推奬してゐるやうなものです。そもそも、ブロック要素としてのp要素を知らないから、htmlではbrを入れて改行させねばならない、と思ひ込んでしまふのです。

「どうすりゃ委員会」氏は、恐らく「段落」「改行」「折返し」の意味を知りませんし、それぞれを互ひに區別出來ません。

区切り線も入れてみる。

そして、更に本文のなかでも区切りをいれたいなら<HR>を入れます。
Horizontal Roule(区切り線)が引かれましたね。
色々組み合わせてやってみましょう。

Horizontal Rule。罫線とも言ひます。

ここまでで文章の基本が出来た。

本文の入力は自由自在ですね。
なお、 <HR><P><BR>は単独で働くタグです。

pには開始タグと終了タグがあります。かう云ふ大嘘を平氣で書けるのだから、無知は強いと言はざるを得ません。

また、xhtml 1.0以降、全ての要素で開始タグと終了タグの記述が必須となつてゐます。hrにもbrにも終了タグが必要となります。

更に文章の体裁を整える。

もう少し文章を整えてみましょう。
本文の中の適当なセンテンスだけ強調してみたい時は<B></B>で括ります。
ボールド体(太字)になります。
イタリック体(斜体)にしたい時は<I></I>で括ります。
一部分の文章だけ<CENTER></CENTER>で括ったりしてみましょう。
段々ホームページのテクニックが分かってきましたね。

誤解が増えてゐるだけです。さう云ふ風に「文章を整え」るのは、htmlの理念から言つて「邪道」です。

なほ、強調はem、より強い強調はstrong。

文字の大きさを自由に変えてみる。

fontタグは邪道です。

文章を整列させておきたい時は。

preの濫用は禁止です。

ブラウザーの画面の大きさを変えると、それに従って本文の並びかたが変わることに気づかれたでしょう。
でも並びかたを変えたくない場合もありますね。
その時は<PRE></PRE>で括ってみましょう。
ブラウザーの画面の大きさを変えても文章の並びかたは変わりません。

HTMLでレイアウトに「こだはる」のは、殆ど「フェティシズム」か偏執狂ではないか、と思ひますがねえ。

引用の仕方もやってみよう。

文章中に引用句を入れるような時は<BLOCKQUOTE></BLOCKQUOTE>タグを使います。
人の発言や記事を引用する時、それを明確にするために使います。
これを使うと文字列が一段下がって表示されます。

文字列が一段下がって表示されるのは、Mosaic系ブラウザのデフォルトスタイルシートがさうなつてゐるからなのに過ぎません。

文字をブリンクさせて見る。

blinkは禁止。正式なHTMLの仕樣で、blinkと云ふ要素は定義されてゐません。

まだ文字だけですが、ここまでで、結構ホームページらしくなってきたと思います。

こんな小手先の「テクニック」を驅使する事で出來てしまふのが「ホームページ」です。

かう云ふ「ホームページらしいホームページ」を作つてはいけません。

今までの要素を全部入れて一枚作ってみましょう。 意外とワープロ感覚でホームページを作れることに気づかれたと思います。

ここで云ふ「ワープロ感覚」の指す「ワープロ」とは、一太郎みたいなワープロの事を指すのでせう。一太郎ユーザならば、倍角とか表とかを驅使して、レイアウトを組立てて行くやり方は手慣れたものです。

しかし、全うなWordユーザから見れば、小手先の技を驅使して文書をレイアウトして行く一太郎のやり方は「邪道」なものでしかありません。物理マークアップ主義的な「ホームページ作り」もまた、「邪道」なものでしかあり得ない筈です。

Wordを全うに使ひこなしてゐる人間は、アウトラインモードを活用し、「スタイル」を利用して文書全體をレイアウトするものです。さう云ふWord流の「ワープロ感覺」を身に着けた人間には、文書の論理構造と見榮えを分離した「html 4.01 Strict+CSS」と云ふHTMLの記述のやり方が、正當な表現方法であり、同時に極めて效率的である事を理解出來るでせう。

目次