みずだこ。こわかったぁ。created:1998.11.30/modified:1998.12.05, by Rj
HTML3.2とかいう文字列を見たことがあるでしょうか。HTMLにもいろいろあって、前衛的なサイトでは、HTML4.0だとか、スタイルシート（Cascading Style Sheets 1及び2、略してCSS1及びCSS2）を駆使してカッチョイイ頁を作ってますが、ここではやや保守的なHTML3.2の、しかも・・・<BODY>の中身、の一部・・・を説明していきます。
HTMLってナアニ？という部分は飛ばします。全くのしょしんしゃ、の方にはちと辛いかもしれません。が、基本的な骨格（<HTML>や<BODY>等の位置関係）や<HEAD>の中身の一部については、下の「おまけ」やこのファイルのソースを直接見て下さい。コメント文として、多少の説明をしてあります。
Netscape 1.1Nなどの古いブラウザやその他いくつかのブラウザは、HTML3.2をサポートしていません。よって、ここに書かれた説明の一部は、それらのブラウザでは「えー？」という結果を生みます。この文書は一応Netscape 1.1Nで見ても何とか理解できるようにはしてありますが、記述と画面の様子が食い違ってしまう場合がありますことをご了承下さい。因みに、Lynxでの表示テストをしてくれるサイトってのもあります。
おまけ：簡素なHTML文書の例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>HTML document</TITLE>
</HEAD>
<BODY>
<P>This is just a sample document.</P>
</BODY>
</HTML>
<Hn>は見出し(heading)を記述します。nは1,2,3,4,5,6のどれかで、数字が小さいほうが「エラい」見出しです。この文書冒頭の「ねこにも書ける...」は<H1>です。上の「見出し(...)」ってのが<H2>です。いくつかのブラウザ（正式にはwww user agentとか言うそうです）では、数字の小さい見出しほど、「でかいもじ」で表されます。しかし、headingsはでかさを指定するためのものではありません。意味的な「上下関係」を指定するだけです。なお、headingの整列(align)属性はleft,center,rightを選べます。無指定の場合はleftになりますが、後で出てくる<DIV>などでの指定がある場合、そっちが優先されます。
↓ソースの例
<H2 align="center">H2の見出し＠真ん中</H2>
HTML文書中での改行は、原則的にはブラウザでの表示の際に無視されます。そこで、HTML文書中の文章は、段落(paragraph)ごとに<P>〜</P>で囲みます。通常、<P>の前と</P>の後に空行が入る形になります。その内部でもっと恣意的に改行を入れたい場合は、<BR>ってのを使うと、そこで改行します（後述）。
paragraphのalignも、left,center,rightを選べます。無指定の場合は左に寄ります。
この段落は、適宜<BR>を入れつつ、右寄せしてあります。
通常の文章を右寄せすることはあまりないかもしれませんが、一応、例示ということで・・・
やーい。
やーい
やー
や
（あっちに行ってしまった。→）
↓ソースの例
<P align="left">この段落は、左寄せしてあります。</P>
箇条書きには３種類あります。
↓ソースの例
<UL> <LI>こうもくその一 <UL> <LI>こうもくその一の子こうもくその１</LI> <LI>こうもくその一の子こうもくその２</LI> </UL></LI> <LI>こうもくその二</LI> </UL>
↓ソースの例
<DL>
<DT>用語その一</DT>
<DD>用語その一に対する定義の文章。</DD>
<DT>用語その二</DT>
<DD>用語その二に対する定義の文章。</DD>
</DL>
<DIV>(document divisions)は、HTML文書を階層を成す「部分」の集合体として構築するために使われます。・・・という説明ではなんだかよくわからないかもしれませんが、かたまり要素の配置属性(left,center,right)を指定できます。
使用例↓
たとえばこの段落を右寄せ配置せよ、と指定するとこうなります。
段落やリストを真ん中に配置するとこうなります。
↓ソースの例
<DIV align="center"><P>たとえばこの段落を真ん中に配置したい場合は・・・</P></DIV>
一時期、巷（ってどこだ？）で話題になった<BLOCKQUOTE>です。これは、ある程度長い引用をする際、地の文と区別するために使います。多くの場合、左右に空白を伴う形で表現されますが、表現方法はブラウザ次第です。一様ではありません。
使用例↓
ゆく河の流れは絶えずして、しかも、もとの水にあらず。淀みに浮ぶうたかたは、かつ消えかつ結びて、久しくとどまりたる例と、またかくのごとし。
たましきの都のうちに、棟を並べ、甍を争へる、高き、いやしき、人の住ひは、世々を経て尽きせぬものなれど、これをまことかと尋ぬれば、昔ありし家は稀なり。或は去年に生るるならひ、ただ水の泡にぞ似たりける。
鴨長明「方丈記」より
<HR>(horizontal rules)は、水平線を引きます。終了タグは無く、単独で使います。音声読み上げ式のuser agentでは、そこで一息入れるものもあり得るかもしれないとか。文書の構成上、話題の転換のある場合などに使うといいかもしれません。<HR>と書いておけば横線が入る、という単純なものですが、多少のオプションがあります。
使用例１：
<HR align="right" noshade size="6" width="80%">
とした場合↓
使用例２：
<HR align="center" size="12" width="20%">
とした場合↓
表ですね。。。これをレイアウトの目的で使うことは、読み上げ式や文字だけのuser agentで閲覧する際に問題となりがちですので、多少の注意が必要かと思われます。「表」としての意味を持つものに使うと無難かもしれません。
表組みには多彩なオプションがあり、全部説明すると多分泣きそうになる（私も、読み手である貴方も）ので、大幅に端折ります。ご了承下さい。ひとまず、簡素な例示に止めます。
| ♂＼♀ | よしこ | みゆき | まなみ |
|---|---|---|---|
| さとし | ○ | ◎ | △ |
| まもる | ◎ | × | ○ |
| けいた | × | △ | ◎ |
そのソース↓
<TABLE border="6" align="center">
<CAPTION align="bottom">あいしょうもんだい</CAPTION>
<TR align="center"><TH>♂＼♀</TH><TH>よしこ</TH><TH>みゆき</TH><TH>まなみ</TH></TR>
<TR align="center"><TH>さとし</TH><TD>○</TD><TD>◎</TD><TD>△</TD></TR>
<TR align="center"><TH>まもる</TH><TD>◎</TD><TD>×</TD><TD>○</TD></TR>
<TR align="center"><TH>けいた</TH><TD>×</TD><TD>△</TD><TD>◎</TD></TR>
</TABLE>
<CAPTION>は無くてもOKです。<TH>は使わなくても構いませんが、上のように端の行／列の意味付けが違う場合には使うといいでしょう。また、<TH>や<TD>の中身として、<TABLE>そのものを入れてしまうこともできます。が、あまり複雑な表というのは、作るのも見るのもたいへんかもしれません。。。
今まではかたまり要素についての説明でした。ここでは、文字要素についての説明をします。簡単に言うと、主に文字を扱うためのものです。いろいろありますが、私が個人的に思うことが一つあります。あまりにも多様な修飾をしてしまうと、見にくくなるし、強調したりしたい場合にも目立ち度が下がってしまいがち、ということです。ので、見映えの変更されそうなものについては、効果的に使うことを考えるとよいと思います。
文字や語句の修飾は入れ子が可能ですが、入れ子構造が乱れないよう留意下さい。
| 要素名 | 説明 | 例 |
|---|---|---|
| TT | 印刷電信機風。等幅です。 | AbCdEfG |
| I | 斜体にします。 | Italic |
| B | 太字にします。 | Bold |
| U | 下線を引いて欲しいです。 | important |
| BIG | 文字をでかくします。 | ふつう→でかい |
| SMALL | 文字をちっこくします。 | ふつう→ちっこい |
| SUB | 下付き文字にします。 | H2SO4 |
| SUP | 上付き文字にします。 | 210は103くらい |
| STRIKE | マチガイの訂正みたいにします。 |
使用例↓
<STRIKE>総<B>入れ歯</B></STRIKE> → 総入れ歯
| 要素名 | 説明 | 例 |
|---|---|---|
| EM | 強調します。 | えいっ |
| STRONG | もっと強調します。 | とりゃっ！ |
| DFN | defining instance of the enclosed term | *see below |
| CODE | プログラムコードの断片表記用。 | 10:GOTO 10 |
| SAMP | プログラムやスクリプトの出力例。 | Hallow Weird! |
| KBD | 鍵盤からの打ち込み表示用。 | このdocumentはつまらんにゃ。 |
| VAR | 変数用。 | fcup(X)=2.5X+10 {X:0,1,2,...} |
| CITE | 引用や参照先を示します。 | 「春はあけぼの。」枕草子 |
*<DFN>について。：表内の説明は仕様書の記述です。補足的に訳すと、「（それが）『（<DFN>〜</DFN>で？）囲まれた語句の、輪郭を明瞭にする／意味を明確に限定する（性質・特徴を示す代表的な）例』（であることを示します。）」という感じでしょうか。私にはやや難解です。怪しげな憶測による使い方の試みとしては、
<DFN>これが"DFN"の使い方だっ！</DFN>
ってなのは・・・やっぱダメですかね。。。（誰かたすけてください・・・）或いはこういうんだったらわかるんですけど、私のカン違いの可能性大です。
猫科の動物：虎，対馬山猫，雲豹，<DFN>リビアネコ</DFN>，はやしばら...
・・・なお、最近のお奨めとして、物理的な文字修飾を指定するのはなるべく控えましょう、というのがあるようです。<I>(italic)や<B>(bold)を直接指定するよりも、<EM>(emphatic)や<STRONG>(strong)を使う方が好ましいのだとか。確かに、ただ斜体にしましたと言われても、それがどうして斜体なのかいろいろ解釈の幅が残りますからね。強調とか引用、といった論理的な意味を明瞭にする方がいいのだろうと思います。
また、例えば<EM>で語句を囲んだ時に、それがいつでも斜体で表されるとは限りません。ブラウザの解釈／表現方法によります。・・・と言っても、<I>で囲んだところで、ブラウザ依存という事情は変わりませんが。。。百回言われていることですが、HTMLは文書の見映えを仕立てるためのものではなく、文書の論理的構造を仕立てるためのものだ、ということでしょうか。
↓こういうやつです。ここでは説明を省きます。
1) 性別を選んで下さい。
2) 年齢を選んで下さい。
3) 名前をおしえてください。
（上で選んだり名前を入れたりしても、何も起こりません。悪しからず。。。）
よく使うアンカーと、画像の埋め込み等について簡単に説明します。
ハイパーテキストというのは、今見てる文書から他の文書へぱっと飛べるからハイパーなのです（強引な物言い・・・）。他の場所へのリンク（参照先の指定）には<A href="...">〜</A>を、文書内部の特定場所への移動目印設置には<A name="...">〜</A>を使います。
<A href="...">〜</A>を使います。例えば・・・
ようこそ<A href="http://rj-chaos.sakura.ne.jp/chaos/">Rjの混沌頁</A>へ。
↓
ようこそRjの混沌頁へ。
注意としては、
といったものを私は思い付きます。
長い文書などで、その文書内部をあちこち移動するためのアンカーを作るには、<A name="...">〜</A>を使って目印を設定します。例えば・・・
<H1><A name="top">たこ</A>にも書けるお手紙講座</H1>
......
<H3><A name="NY">賀状書き</A></H3>
......
などと書いておいて、同じ文書中で
<A href="#top">とっぷへ戻る。</A>
<A href="#NY">賀状書きのとこへ行く。</A>
などとすれば、長い文書内部での移動がらくちんにカッチョよくできるでしょう。この文書でも使っておりますので、適宜覗いてみて下さい。なお、
#」を忘れないようにしましょう。#」以下をくっつけます。↓ソースの例
<A href="http://www.t3.rim.or.jp/%7Erj-taka/SkaaRj.html#intro">Rjのunreal初体験告白：その一：導入部</A>
なお、ブラウザによっては解釈に問題が生じる場合があるそうなので、<A>〜</A>間には改行を入れず、一行にまとめるようにした方がいいようです。
画像ファイルをHTML文書の中に埋め込むには、<IMG>を使います。例えばこう：
<P align="center">
これは網走で遭遇した<IMG src="tako_pic.GIF" width="150" height="60" alt="たこの絵(5KB)" border="1" align="middle" hspace="6" vspace="2">みずだこ。こわかったぁ。
</P>
画像を読み込まない設定の人が見た場合、おそらくこのように表示されます。↓
これは網走で遭遇したみずだこ。こわかったぁ。
widthは画像の幅を、heightは画像の高さを、borderは画像の枠線の太さを、vspaceは画像の上下に取る空白を、hspaceは画像の左右に取る空白をそれぞれピクセル数で指定します。
altは代替文字列を、alignは画像の配置をtop,middle,bottom,left,rightから指定できます。が、alignについては、ブラウザによる解釈に幅があるようです。
注意として私が思い付くのは、
こんなところでしょうか。
<FONT>を使って、文字の大きさや色を指定することができます。
1から7まで、或いは、<BASEFONT>（後述）を基準にして-1とか+2とか相対的に指定できます。数字がでかい方が文字がでかくなります。が、それらが実際に何ptのフォントで表示されるかは、見る側の設定によります。通常、閲覧者は自分にとって見やすいサイズにブラウザのデフォルトのフォントサイズを設定していますので、主要な部分のフォントサイズを絶対指定したり、<BASEFONT>のサイズを極端なものに設定してしまうと、見る人には不都合が生じる場合があります。或いは、使用者の側のブラウザの設定によっては、HTML文書内部での指定は無視されることがあります。
ということで、部分的に相対指定する、くらいにしておいた方がいいかもしれません。<BASEFONT>を定義しなくても相対サイズの指定が使えます。
ふつうは何も指定していなくて、ちょっと小さい文字にしたい部分とか、ちょっとでかい文字にしたい部分にだけ相対指定を使うといいんぢゃないかな、と思います。
文字色を指定するものです。これもあんまり多用すると却って見づらくなる場合もありましょうから、ほどほどに使うのが無難かと思います。これについても、見る側のブラウザの種類や設定によっては無視されます。
↓ソースの例
えっ？<FONT size="+1" color="#CC0000">無視</FONT>されちゃうの？
多くのブラウザでは、デフォルトは3になっているようです。（それが何ptになるのかは、見る側の設定によります。）
一応、書式としては、
<BASEFONT size="3">
こうです。終了タグは使いません。
強制的に改行を入れます。通常、文章はブラウザ窓の幅に合わせて折り返されますが、それとは別に、ということです。大昔、ある種のブラウザでは、日本語の文章は（亜米利加語で単語の区切りとして頻出する半角空白が日本語文章には無いために）窓幅で折り返されず、適宜<BR>を入れてやる必要がありました。しかし最近はそういうブラウザも減ったので、改行に意味を持たせたい場合以外は使わなくてだいじょぶでしょう。なお、これにも終了タグはありません。
一部の掲示板などでは、リターンコードだけでは改行してくれず、<BR>と書き込むことによって改行できる場合もあります。web上の掲示板に何かを書き込む機会のありそうな人は、覚えておくといいかもしれません。（<BR>と書いても反映されないところもありますが。。。）
この<BR>には、clearという属性(attribute)があります。<IMG>で埋め込んだ絵の左右に文章を書く場合、それをおしまいにする時などに使います。left,right,allを指定できます。
使用例↓
この部分は画像の右側の余白に出てきますが、
ここからは画像の下に来ます。（・・・来てます？）
↓そのソース
<P>
<IMG src="tako_pic.GIF" border="1" width="150" height="60" align="left" alt="たこの絵(5KB)" vspace="2" hspace="6">
この部分は画像の右側の余白に出てきますが、<BR clear="left">
ここからは画像の下に来ます。（・・・来てます？）
</P>
住所を書くための<ADDRESS>というものがあります。
↓ソースの例
<ADDRESS>
Rj<BR>
66-6 Styx Street, Hades Town<BR>
Tel: +666 (666) 666 666<BR>
http://rj-chaos.sakura.ne.jp/chaos/<BR>
mailto:rj-taka@t3.rim.or.jp
</ADDRESS>
こんな風に、著者への連絡先などを記すのに使います。通常、<ADDRESS>の前と</ADDRESS>の後に改行が入り、囲まれた部分は斜体で表示されることが多いようです。（因みに、上の住所と電話番号はうそです。）
この文書は、主に上の文献を参考に作成しました。上の文献の翻訳ではありません。私Rjが「比較的重要度の高いと思う部分」というのを基準に据えて扱う内容を選別し、再構成したものです。「文書がやたら巨大になって読み手をげんなりさせぬように」という点も一応考慮しました。これでも十分巨大だという気もしますが、相当省いてます。（省かれた部分の全てが重要ではない、ということではありません。）
いくらかの私見をも挟みました。その部分は、私見であることを示す表現を使ったつもりです。が、私見の内容についてのみならずこの文書の内容全体について、私Rjはいかなる保証もできません。ご了承下さい。（おかしいとこがあったらおしえてください。）
物事の進行が速いInternet上、とりわけWorld Wide Webという世界の流れとしては、HTML3.2というのはやや古い規格かもしれません。しかし、現時点（1998年12月）で「それはもう古典である」という程に古いわけでもないと私は考えています。W3CはHTML4.0を奨めていますが、HTML3.2も破棄されてはいません。私を含めたWWW利用者が現在手にしている環境を想定してみるに、web contentsとしてのHTML文書をHTML3.2に則って記述するというのは、現時点では比較的「穏やかな」選択であると思われます。
この文書に記されたことが「次なる規格HTML4.0では完全に無効である」ということではありません。この文書で、明示的／暗示的に、「先」への配慮を示した部分もあります。内容の取捨選択或いは記述の軽重は「完全にRjの趣味。」というわけでもない、ということです。（ただ、厳密なHTML4.0と照らし合わせると、マズい部分がいくらかあるのも事実です。）
この文書のソースは、一応「参考にしやすいように」ということを心掛けて書きました。しかし、「完全に隙の無い」ものではありません。もしも貴方がこれを切っ掛けにしてHTMLの世界へ深入りし、このソースの「粗探し」が出来るくらいにHTML通な人になったら・・・ご指南下さい。;)
「で、どこらへんが『ねこにも書ける』なの？」という質問は・・・しないで下さい。実際にねこがこれを読んでHTMLを書けるかどうか、私にもわかりません。
（ホントは、きまぐれなねこにも利用しやすいように、興味のある部分だけをちろちろと見てもちゃんと役に立つような文書を目指したのです。が、詮無き夢に終わったような気がしてなりません。。。）