最終更新： 2001年5月28日
& < >)
<br>)
<p> </p>)
<blockquote> </blockquote> <q> </q>)
<a href="..."> </a>)
<ul> </ul> <ol> </ol> <li>)
<dl> </dl> <dt> <dd>)
<pre> </pre>)
<html> ... <h1> <h2> <hr>)
align="center" align="right")
[Send HTML Text and Preview] で掲示を出すために必要な HTML に関する最低限の知識を説明しましょう。以下で説明する内容は、 記事を書くのページに飛んで、記事の本文としてテスト文書を入力し、 [Send HTML Text and Preview] を使って投稿前のプレビュー画面を見ることによって確かめることができます。
なお、以下の説明においては、厳密さよりも簡素で平明であることを優先しました。ここに書いてあることをマスターすれば、地味だけどすっきり読み易い HTML を書けるようになります。
& < > の3文字は HTML ファイルにおいて特殊な意味を持ちます。それらを表示させるためには、それぞれに代わりに、 & < > と入力しなければいけません。
例えば、「Sokal & Bricmont」と表示させるためには「Sokal & Bricmont」と入力して下さい
入力時の改行は出力時には空白程度の意味しか持ちません。改行したいところで本当に改行させるためには、改行したい場所に <br> を入れる必要があります。
<br> を入れる
ただし、 <br> は強制的に改行したいという特別な状況のみで使用されます。段落を区切るために使用するのは正しいやり方ではありません。段落を区切るためには以下で説明する <p> </p> を使いましょう。
各段落を <p> </p> で囲みます。
<p> </p> で囲む
例えば、
<p>段落1</p> <p>段落2</p> <p>段落3</p>
と入力すると、
段落1
段落2
段落3
と表示されます。
引用や箇条書き以外のほとんどの部分が <p> </p> で囲まれることになるはずです。
短文の引用は「」や " " や <q> </q> で囲んでおけば十分でしょう。例えば、 <q> </q> で My parody is hilarious! を囲むと、 My parody is hilarious!
となります。 (注意： Netscape Navigator 2.x などのブラウザーは <q> </q> に対応してない。)
長文を引用する場合は <blockquote> </blockquote> で囲みましょう。
文脈によって明らかでない場合は、どこから引用したかに関する情報を何らかの方法で付け加えておくべきです。
「」や " " や <q> </q> で囲む
<blockquote> </blockquote> で囲む
ただし、 <p> </p> で囲まれた段落の中に、 <blockquote> </blockquote> で囲まれたブロックを入れてはいけません。 <blockquote> の直前に </p> を挿入し、段落を終えるようにしてください。このため、文章としての論理的な段落と <p> </p> で囲まれたブロックが一致しなくなる場合もあるのですが、気にしないようにしましょう。例えば、
<p>アインシュタインは1916年のマッハへの追悼文で次のように述べている：</p> <blockquote> 物事を秩序づけるのに役立つ概念は、すぐに、非常に強力に私たちを支配する ようになり、私たちは、それがこの世の経験から生まれたものであることを忘 れて、変えることのできない事実として受け入れてしまう。こうしてそれらの 概念は「必然的な概念」「先験的な状況」などと分類される。科学の進歩の道 は、そのような誤りによって、しばしば長い期間妨げられた。したがって、使 い慣れた概念を分析する能力を吟味し、その概念の正当性と有用性が依存する 条件と、その概念が経験の蓄積から、徐々に徐々に発展してきた道すじを明ら かにするのは、単なる退屈なゲームではない。このようにして、それらの概念 は余計な権威を奪われる。成り立つことが示されない概念は除かれる。十分な 注意のもとに、事物の秩序にうまく調和できない概念は改良されるか、または、 いくつかの理由で望ましいと思われる新しい体系がつくられるときに、新しい 概念によってとって代わられる。<br> (Arthur Fine 著『シェーキーゲーム』(町田茂訳、丸善)の25頁より孫引き) </blockquote> <p>マッハは実証主義に基いた分析を批判の道具として破壊的に用いた。これ に対して、アインシュタインは、同様の分析を建設的な道具として用いたので、 悪しき実証主義には陥らずに、天才的な独創性を発揮できたのである。</p>
と入力すると、
アインシュタインは1916年のマッハへの追悼文で次のように述べている：
物事を秩序づけるのに役立つ概念は、すぐに、非常に強力に私たちを支配する ようになり、私たちは、それがこの世の経験から生まれたものであることを忘 れて、変えることのできない事実として受け入れてしまう。こうしてそれらの 概念は「必然的な概念」「先験的な状況」などと分類される。科学の進歩の道 は、そのような誤りによって、しばしば長い期間妨げられた。したがって、使 い慣れた概念を分析する能力を吟味し、その概念の正当性と有用性が依存する 条件と、その概念が経験の蓄積から、徐々に徐々に発展してきた道すじを明ら かにするのは、単なる退屈なゲームではない。このようにして、それらの概念 は余計な権威を奪われる。成り立つことが示されない概念は除かれる。十分な 注意のもとに、事物の秩序にうまく調和できない概念は改良されるか、または、 いくつかの理由で望ましいと思われる新しい体系がつくられるときに、新しい 概念によってとって代わられる。
(Arthur Fine 著『シェーキーゲーム』(町田茂訳、丸善)の25頁より孫引き)マッハは実証主義に基いた分析を批判の道具として破壊的に用いた。これ に対して、アインシュタインは、同様の分析を建設的な道具として用いたので、 悪しき実証主義には陥らずに、天才的な独創性を発揮できたのである。
と表示されます。
HTMLファイルにおいては、ネットワーク・ニュースの真似をして、引用文の行頭に > を挿入するのは大変ダサいやり方です。次のいずれかの方法を用いるのが良いと思います： リンクを張るだけで済ます、短文を「」で囲んで引用する、長文を <blockquote> </blockquote> で囲んで引用する。
リンクを張りたければ、例えば、
<a href="http://www.math.tohoku.ac.jp/~kuroki/index-j.html">黒木玄</a>
のように書いて下さい。これは次のように表示されます。
黒木玄
リンクを「リンク集」という形式で張るのではなく、文章の中にリンクを埋め込む方が格好良いやり方です。
様々なHTMLのソースを覗いてみると、
<a name="hoge">ほげ</a>
のように書いてある部分を見付けることができます。そのような場合はその文書内のその位置に直接ジャンプするようなリンクを張ることができます。そのためには、リンクを張るときに、
<a href="http://domain/dir/poe.html#hoge">poe.html の「ほげ」にジャンプ</a>
のように、 name=... で指定されたタグを # の後に付け加えてください。
自分の書いたウェブページには適度に ... のような記述を挿入しておくと、そのページにリンクする人に対して親切です。
これの、応用として、掲示板内の任意の掲示に直接ジャンプするリンクを張ることができます。各掲示にジャンプするためにはその記事の Id: ヘッダーの #a20000101012345 のような文字列へのリンクをたどって下さい。それによってその掲示の URL を知ることができます。例えば、 a1234.html#a20000101012345 にリンクの記事にリンクを張りたければ、
<a href="a1234.html#a20000101012345">2000年1月1日01:23:45の掲示</a>
のようにリンクを張って下さい。
すでに整形済みのテキストを挿入したければ、
<pre>
1 ∞ -s
ζ(s) = Π --------- = Σ n
p:prime -s n=1
1 - p
</pre>
のように書いて下さい。これは、
1 ∞ -s
ζ(s) = Π --------- = Σ n
p:prime -s n=1
1 - p
と表示されます。
ただし、 <pre> </pre> の間でも、 & < > は特別な意味を持つので、必要ならばそれぞれを & < > に置換しておく必要があります。
なお、 <blockquote> </blockquote> の場合と同様に、 <pre> </pre> で囲まれたブロックを <p> </p> の間に挿入してはいけません。
<pre> </pre> は便利ですが、濫用しないように気を付けましょう。
箇条書きをしたければ、
<p>以下の言葉はよく使われている：</p> <ul> <li>ほげ <li>ほげげ <li>ぽえ </ul> <p>これはなぜだ？</p>
のように書いて下さい。これは次のように表示されます。
以下の言葉はよく使われている：
- ほげ
- ほげげ
- ぽえ
これはなぜだ？
ただし、 <blockquote> </blockquote> の場合と同様に、 <ul> </ul> で囲まれたブロックを <p> </p> の間に挿入してはいけません。
<ul> </ul> の代わりに、 <ol> </ol> を使うと、各項目の見出しが数字になります。
説明付きの箇条書きは例えば次のように書きます。
<dl> <dt>項目1の見出し <dd>ここに項目1の説明を書くべし。 <dt>項目2の見出し <dd>ここに項目2の説明を書くべし。 <dt>項目3の見出し <dd>ここに項目3の説明を書くべし。 </dl>
これは次のように表示されます。
- 項目1の見出し
- ここに項目1の説明を書くべし。
- 項目2の見出し
- ここに項目2の説明を書くべし。
- 項目3の見出し
- ここに項目3の説明を書くべし。
ただし、 <blockquote> </blockquote> の場合と同様に、 <dl> </dl> で囲まれたブロックを <p> </p> の間に挿入してはいけません。
<dd> には <p>…</p> などのブロック要素を書くこともできます。
<dl> <dt>項目1の見出し <dd> <p>項目1の説明の段落1</p> <p>項目1の説明の段落2</p> <dt>項目2の見出し <dd> <p>項目2の説明の段落1</p> <p>項目2の説明の段落2</p> </dl>
これは次のように表示されます。
- 項目1の見出し
項目1の説明の段落1
項目1の説明の段落2
- 項目2の見出し
項目2の説明の段落1
項目2の説明の段落2
文字を拡大するためには拡大したい部分を <big> </big> で囲みます。囲む回数を増やすとより大きく拡大されます。逆に縮小したければ <small> </small> で囲みます。
<big> </big> で何回が囲む
<small> </small> で何回が囲む
例えば、
<ol> <li><small><small>縮小 -2</small></small> <li><small>縮小 -1</small> <li>標準 +0 <li><big>拡大 +1</big> <li><big><big>拡大 +2</big></big> <li><big><big><big>拡大 +3</big></big></big> </ol>
と書くと、
- 縮小 -2
- 縮小 -1
- 標準 +0
- 拡大 +1
- 拡大 +2
- 拡大 +3
と表示されます。
拡大縮小と同時に文字に色を付けることもできます。詳しい説明は省略しますが、例えば、
あなたの主張は<font color="#ff0000" size="+3">完全に間違っている</font>んだよ！
と書くと、
あなたの主張は完全に間違っているんだよ！
と表示されます。色の付いた文字を多用すると一般に趣味が悪くなります。それが嫌なら濫用しないように気を付けましょう。また、背景の色との相性によって、非常に読み難くなる場合があります。このページのように背景が明るい色ならば、赤や青のような暗い色は大丈夫ですが、緑のように明るい色を使うと読み難くなります。暗い赤、暗い青、暗い緑なら、より読み易くなります。背景色と文字の色のコントラストは心持ち強めにした方が安全なようです。ときどき、デフォルトの明るい灰色の背景に白い文字を表示している人がいますが、見難いので止めた方が良いと思います。
カラーデザイン (no frames) には十分に注意を払い、所謂色覚異常にも配慮すべきです。
以上の説明は主に掲示板に書くHTMLに関する説明でした。掲示板とは独立に、例えば自分のウェブサイトに置くために、 HTMLファイルを書く場合は、次のような形式でファイルを書けば良いでしょう。 (DTD を先頭に置いたより厳密な書き方を好まれる方はこのページの HTML ソースを参考にして下さい。)
<html><head> <title>ファイルのタイトル</title> </head><body> <h1>ファイルのタイトル</h1> <p>著者名や日付け</p> <h2>第1節のタイトル</h2> <p>第1節の段落1</p> <p>第1節の段落2</p> <h2>第2節のタイトル</h2> <p>第2節の段落1</p> <p>第2節の段落2</p> </body></html>
これは次のように表示されます。
ファイルのタイトル
著者名や日付け
第1節のタイトル
第1節の段落1
第1節の段落2
第2節のタイトル
第2節の段落1
第2節の段落2
節 (section) よりもさらに細かい subsection も必要になる場合はそのタイトルに <h3> </h3> を使えば良いでしょう。
なお、ときどき見掛けるように、 <h1> </h1> や <h2> </h2> を単に文字を拡大するために用いるのは誤りです。
<h2> </h2> で囲んだ節のタイトルにリンクを張りたい場合は、
<h2><a href="http://domain/file.html">ほげげ</a></h2>
のように、 <a href="...">...</a> の部分を <h2> </h2> の間に入れます。逆であってはいけません。 <a name="...">...</a> でも同様です。
幅一杯の横線を <hr> で入れることができます。節と節の区切りをはっきりさせたいときに便利です。
ただし、掲示板では使わない方が良いと思います。なぜなら、掲示の中に幅一杯の横線があると、掲示と掲示の境目と紛らわしいからです。どうしても横線を入れたいの場合は、
<hr width="80%">
のように幅を制限した方が良いでしょう。これは、
と表示されます。
節のタイトルの中寄せや日付などの右寄せは <h2> や <p> の属性として、 align="center" や align="right" を指定することによって行ないます。例えば、
<h2 align="center">中寄せについて</h2> <p align="right">1998年9月13日</p> <p><tt><center></tt> <tt></center></tt> は時代遅れなので使 うのは止めましょう。長い段落を中寄せするのはみっともないので止めましょ う。(どちらも結構多いのだ。)</p>
は次のように表示されます。
中寄せについて
1998年9月13日
<center></center>は時代遅れなので使 うのは止めましょう。長い段落を中寄せするのはみっともないので止めましょ う。(どちらも結構多いのだ。)
以上で説明した知識があれば大抵の掲示を不自由なく書くことができると思います。これ以上のことを知りたければ、より詳しいHTML入門を読んで下さい。
微小に修正した。
旧掲示板に関わる記述を書き直して現在の掲示板に対応した。
Another HTML-lint gateway で100点満点が出るようにした。
説明付き箇条書きの仕方を追加した。
中寄せや右寄せの仕方を追加した。
もとはしみほさんの指摘に基き、「掲示板内の人気の掲示」を「掲示板内の任意の掲示」に修正し、さらに、「蜘蛛の巣を張り巡らす」という言葉に説得されたので、「(リンクを)貼る」を「張る」に書き直した。 <hr> に関する説明を追加。その他色々細かい説明を追加。
公開。