doc drawn up: 2003-09-13 .. 2003-09-13
既に紹介した『シンプル HTML のすゝめ』では、「題名」と「段落」だけを表現することで、原稿用紙を使った作文レベルの文章構造を実現できることを示しました。
この『シンプル HTML+』では、ワンランクアップのシンプル HTML として、画像・ハイパーリンク・見出しの 3 つを伝授します。これだけ学べば、もうあなたはシンプル HTML の達人と言ってもいいでしょう。論文やレポートのようなレベルの文書であれば、「シンプル HTML+」で十分に対応できるはずです。
論文やレポートのようなものの場合、「目的」「実験」「結果」「考察」といった章を設ける文書構造をとることが普通です。こういう場合には「見出し」を使って文書の章節構造を表現します。
見出しを示すのは <h[1-6]></h[1-6]> タグです。「h」は「heading」の略です。[1-6] というのは 1 ～ 6 の数字であることを便宜的に表記したもので、そのまま書くわけではないので注意して下さい。実際には <h1>第一章</h1> のようにして使います。
[1-6] の数字は、見出しのレベルを示しています。1 が最上クラスであり、順次 6 に至るまでレベルが下がります。文章の階層構造は、章【chapter】＞節【section】＞項【subsection】という風にレベル分けされるのが普通ですが、例えば <h1></h1> を章題として使うことにしたのであれば、各章の内側の節題を示すには <h2></h2> を使い、各節の内側の項題を示すには <h3></h3> を使う……という風な使い方が考えられます。
また、題名のために <title></title> が存在しますが、このタグは通常、ブラウザのウィンドウの上端に表示されるのみで、文書の内容として表示されるものではありません。そのため、文書の内容として題名をちゃんと表示させたいという人は、題名を <title></title> で記述すると共に、<h1></h1> でも記述するというようなやり方を好みます。例えば下のような感じです：
そして章題を <h2></h2>、節題を <h3></h3>、項題を <h4></h4>……という風に使うわけです。
<h1></h1> を題名から始めるか、それとも章題から始めるかというような使い方は、各自の好みで自由に決めて構いません。要するに、<h1></h1> から <h6></h6> に至る 6 つのレベルの中で、見出し同士の相対的なランク分けが適切に区別されていればいいのです。
基本的に文書の章節構造は、大きい構造から小さい構造へと降りていくことになりますので、<h1></h1> から 1 つずつ下のレベルの見出しタグを使っていくことはあっても、その逆に <h6></h6> から使い始めて 1 つずつ上のレベルの見出しタグを遡って使っていくようなことはありません。また、前をとばしていきなり <h3></h3> から開始するようなことも普通はやらないでしょう。
また、見出しのタグはブラウザによって色々なスタイルで表現されますが、それは一義的なものではありません。それがどのくらいの文字サイズで表現されるのか？ 文字色は？ 文字の太さは？ 中寄せするのか？──そういったことは「文章の構造を示す」という HTML の守備範囲外なので、シンプル HTML では気にしないことにしましょう。（ちなみに、文章の構造をどういう見た目上のスタイルで表示するかという問題は CSS (Cascading Style Sheet) というスタイルシートによって HTML とは別個に行います。）
下に、h1 ～ h3 までの見出しを用いた、実験レポートの例を示します。実際にメモ帳などのテキストエディタで HTML ファイルを作成して、ブラウザで表示させてみて下さい：
HTML が従来の紙を媒体とする文書と違う、電子文書ならではの特徴は、このハイパーリンクにあります。
HTML という名称自体、Hyper Text Markup Languageの略称です。Hyper Text とは、日本語訳すれば「超越文書」、要するにハイパーリンクによって他の文書に一瞬にしてジャンプすることができる文書という意味です。
紙の文書においては、他の文書は「参考文献」として著者名、文書名、ページ数などを記して、読者に実際にその文書を参照してもらうための情報を提示するしかありませんでした。しかし、超越文書においては、ハイパーリンクをクリックするだけで、リンク先の他の文書へと飛び移ることが出来ます。
リンクを張るには、<a></a> タグを使います。「a」は「anchor」の略で、「錨」の意味です。そこが他の文書とハイパーリンクでつなぎとめるための錨を降ろすポイントだからです。
<a></a> タグは、今まで覚えた <title></title>、<p></p>、<h[1-6]></h[1-6]> と違って、単にタグを使うだけではなく、タグの中で「属性値」を使う必要があります。属性値は、ハイパーリンクされる先の文書の、Web 上の URI を指定します。例えば、Yahoo Japan なら URI は「http://www.yahoo.co.jp/」ですから、この場合の <a></a> タグの使い方は：
という風になります。href="" のダブルクォーテーションマークの内側に URI を書きます。
これで<a href="https://www.yahoo.co.jp/"> と </a> によって囲まれた「ヤフーへのリンク」という文字がハイパーリンク化されて表示され、クリック可能になります。例えば下のようになるわけです：
リンクの利用方法は色々に考えられますが、通常は参考文献へのハイパージャンプや、特定の語句を解説する用語集へのリンクとして使ったりします。単なる文書へのリンクだけではなく、文書内のある特定の場所にリンクすることもできますが、やや複雑な話になるので、シンプル HTML としては取り上げません。各自、Web 上で色んな実例を見ながら研究してみたりして、工夫してみるといいでしょう。
論文やレポートを作成するような場合、どうしても図やグラフを添える必要性というものが生じてくるかもしれません。そういう場合には、<img /> タグを文章の中に埋め込むことによって、そこに画像を挿入することができます。
<img /> タグは他のこれまでに覚えたタグとは違って、文字の前後を挟み込んで使うというようなタグではありません。そのため、タグの最後が /> という風な表記になっていて、これが閉じタグを併合した特殊なタグであることを示しているのに注意して下さい。
<img /> タグの使い方は、<a></a> タグの要領と似ています。読み込みたい画像ファイルの URI を src="" のダブルクォーテーションマークの内側に属性値として指定します。画像ファイルが HTML ファイル本体と同じディレクトリにある場合は、URI はファイル名そのものを指定すれば OK です。例えば、ファイル名が「picture.jpg」なのであれば <img src="picture.jpg" /> とすれば OK です。具体的には文書の中で、画像を表示させたい場所に <img /> タグを埋め込むので、下のようになります：
通常、画像は文字よりもサイズが大きく、一行の高さの幅をはみ出してしまって、レイアウトが崩れてちょっと不格好になってしまうことがあります。そのため、画像は、独立した段落として表示するのが無難なやり方です。例えば下のようにします：
シンプル HTML としては、画像を独立した段落として表示するやり方をお勧めしますが、より高度なやり方としてスタイル指定を使った画像のレイアウト方法もあります。スタイル指定はシンプル HTML の範囲外のテクニックではありますが、画像のレイアウトの方法としてだけ、覚えておくのは構わないでしょう。src="" の属性指定に続けて、style="" という属性指定を加えることによって可能になります。指定する内容は style="float: left" もしくは style="float: right" のどちらかで、「画像を左寄せにして、残ったスペースに文字を流し込む場合は "float: left"」「画像を右寄せにして、残ったスペースに文字を流し込む場合は "float: right"」になります。具体例は下の通りです：
float 指定で注意しなくてはならないのは、指定した以降のすべての文章に影響を及ぼすということです。画像の含まれる段落だけでなく、次の段落にも影響します。それを回避したい場合は、次の段落の <p> タグにスタイル属性の指定を行って、float 指定を解除しなくてはなりません。「"float: left" に対しては "clear: left"」「"float: right" に対しては "clear: right"」で解除します。具体的には次のようになります：
スタイル指定が入ってきてややこしいと感じられましたか？ もしそういう場合は、無理に float 指定による文字の流し込みをやろうとは思わず、「画像を独立した段落として表示するやり方」を使う癖を身に付けるようにして下さい。基本的にそのやり方で十分に用が足りるはずです。
『シンプル HTML+』は、これで終わりです。『シンプル HTML のすゝめ』で覚えたタグとあわせても、たった 5 種類のタグ、<title></title>、<p></p>、<h[1-6]></h[1-6]>、<a href=""></a>、<img src="" /> の使い方を覚えただけで、もうあなたはシンプル HTML を完全にマスターしたことになります！ 今やあなたは Web の達人です！
さあ、今日からあなたも、日記やノート、論文やレポートは、シンプル HTML を使って書きためて行きましょう！
（終わり）
<HTML>