プチリファレンスHTML

　HTMLのファイルは、テキストファイルです。つまり、Windowsであれば「メモ帳」、Macであれば「SimpleText」などのテキスト形式で保存のできるソフトで作成できます。一言でいえば、ある文章が書かれたテキスト形式のファイルがあったとすると、その内容にしたがって <○○○> のようなタグをつけて保存し、拡張子を「.html」に変更すればHTMLファイルになるのです。

　ここで、どのようにタグをつけていくのかを簡単に紹介しましょう。たとえば、以下のような文章があったとします。

海の生き物を飼ってみよう

海の生き物を飼うのは難しいと思っている人も多いと思います。たしかにその通りでもあるのですが、磯で採集した生き物などを水槽で長期間飼育することも無理ではありません。

　この例では、まず「海の生き物を飼ってみよう」という見出しがあって、そのあとに段落が１つあることがわかると思います。そこで、見出しには見出しのタグを、段落には段落のタグをつけます。見出し（Heading）のタグは<h1>、段落（Paragraph）のタグは<p>なので、それぞれ該当する範囲を次のように囲います。この時、後ろのタグには < の後に / をいれます。また、見やすいようにタグの前後に改行を入れることもできます。

<h1>海の生き物を飼ってみよう</h1>
<p>
海の生き物を飼うのは難しいと思っている人も多いと思います。たしかにその通りでもあるのですが、磯で採集した生き物などを水槽で長期間飼育することも無理ではありません。
</p>

　HTMLでタグをつけることは、このような作業になります。もちろん、このほかにHTMLの全体構造を示すための基本的なタグも入れる必要はありますが、基本的にはそれぞれの部分が文書の構成要素としてどのような役割や意味を持っているかによって、既にあるタグの中からふさわしいものを当てはめていけばいいのです。

　ここで、「あれっ？」と思った人もいるかもしれません。これでは、カッコいいレイアウトのホームページにはなりません。ブラウザの表示の仕方にまかせたそっけないホームページになります。しかし、HTMLでは表示方法を指定しない利点もあるのです。

　たとえば、そのページを別ファイルに用意したスタイルシートでレイアウトしたとします。HTML文書には、それを読み込むためのタグを１行追加するだけです。あとは、スタイルシートを変更するだけで、HTML文書には手を加えずに自由にレイアウトを変更できるようになります。逆にHTML側に文章を追加する場合には、レイアウトを気にせずに内容を追加できるようにもなります。また、一度に大量のページのレイアウトを変更することも可能になります。もし、100ページで共通して１つのスタイルシートを読み込んで利用していたとすると、１つのスタイルシートを変更するだけで、100ページのレイアウトが変更できるのです。また、表示方法の指定を各HTMLに埋め込むのではなく１ヵ所にまとめることで、全体の容量も驚くほど少なくなります。

　ほかに、もっといいこともあります。HTMLで表示方法を指定せずに、文書中の各構成要素の役割や意味に従って適切にタグ付けされていると、通常のパソコン環境以外の様々な環境でも利用できるページになります。表示方法が指定されていないので、それぞれの環境に合わせて表示することはもちろん、音声や点字でも利用できるようになるのです。逆にHTMLで表示方法だけを指定していると、その通りに表示できない環境ではうまく処理できなくなるのは当然です。HTMLでは表示方法を指定しないということは、ホームページのユニバーサルデザインにもつながるのです。

　このように、現在の標準的な方法でホームページを作成すると、作る側も楽ができますし、そのホームページを利用できるユーザーの幅もぐんと広がります。ただし、問題がないわけではありません。最新のブラウザでは、ほぼ問題はないのですが、古いブラウザの中にはスタイルシートに部分的にしか対応していないものがあります。そればかりか、ブラウザによっては表示がおかしくなって内容が読めなくなることもあります。そのような問題を避けるためには、部分的にHTMLで表示方法を指定してもかまわないでしょう。

　本書では、基本的にはHTMLでは役割や意味を示し、表示方法についてはスタイルシートで指定するといった標準的な方法で作成することを前提として解説しています。そのため、スタイルシートで指定すべき部分にはその旨を明記し、代わりに使うべきスタイルシートを示すようにしました。ただし、スタイルシートについては、よく使われる部分の解説にとどめていますので、詳細はスタイルシートの専門書などを参考にしてください。

　HTMLでは、文書の構成要素をタグで囲って示しますが、その範囲全体やタグの各部分などにはそれぞれ呼び名があります。以下に、テキストをリンクさせる場合のソースを例にとってHTMLの用語を示しますので、どの部分を何と呼ぶのかを覚えてください。

タグと要素

　開始タグと終了タグで囲った範囲全体を要素といいます。開始タグは基本的に<要素名>、終了タグは</要素名>のように要素名の前に「/」をつけて示します。これらは必ず半角で入力してください。HTML4.01では、要素名は大文字で書いても小文字で書いてもよいことになっています。しかし、HTML4.01以降に出されたXHTMLでは、すべてを小文字で書く決まりになっていますので、現在ではHTML4.01を書く場合にも小文字で書かれることが多いようです（本書では、小文字で統一しています）。

　また、要素には内容を持たないものもあります。たとえば、画像を表示するためのimg要素や、改行のためのbr要素などがそれにあたります。これらの要素は空要素と呼ばれ、開始タグだけを使います。終了タグは必要ありませんので、書かないようにしてください。

属性

　属性は、要素の開始タグの中に指定して、その要素の性質や特性を示すために使います。基本的には「属性名="属性値"」の形式で指定しますが、「属性名」だけで指定するものもあります。属性の属性値以外の部分は必ず半角で入力してください。また、２つ以上の属性を指定する場合は、半角スペースで区切ります。属性を指定する順序に決まりはありませんので、好きな順に指定してかまいません。属性は、要素名と同様に大文字で書いても小文字で書いてもよいことになっていますが、一般的には小文字が使われています。また、属性値を囲う引用符（"）は、条件によっては省略することができますが、基本的には常に引用符をつけるようにしてください。なお、引用符には「"」だけでなく「'」も使うことができますが、必ず同じ種類でペアにする必要があります。

半角スペースや改行の扱い

　HTMLのソースに改行や半角スペースを入れても、基本的には表示に影響しません。したがって、自分でソースが見やすいようにタグの前後で改行したり、半角スペースやタブでインデントしておくことができます。ただし、ブラウザの種類によっては、それらを入れる位置によって半角スペースが入ってしまう場合がありますので注意してください。

　以下に示す属性は、ほとんどの要素に対して指定することができます。

id="ＩＤ名"

　id属性は、要素に固有の名前をつけるための属性です。同じページの中では、複数の箇所で同じ名前を指定することはできませんので注意してください。この属性は、その要素をスタイルシートの適用対象として指定したい場合などに利用されます。id属性の値は、大文字と小文字は別の文字として扱われますので注意してください。また、id属性の値は必ず先頭をアルファベットで開始する必要があります。先頭以外にはアルファベットと数字を組み合わせて使うことができます（実際には「-」や「_」なども含むことができるのですが、古いブラウザの中には問題が発生するものもあります）。

class="クラス名"

　class属性は、その要素の種類を示す属性です。id属性とは異なり、同じページの中で複数の要素が同じクラス名を持つことができます。この属性は、その要素をスタイルシートの適用対象として指定したい場合などに利用されます。class属性の値は、大文字と小文字は別の文字として扱われますので注意してください。仕様上は、class属性の値には特別な文字を含む通常のテキストを入れられることになっていますが、ブラウザの中には問題が発生するものがあります。id属性の場合と同様にアルファベットと数字を組み合わせて指定しておけば問題ありません。

title="補足情報"

　title属性は、要素に対して補足的な情報を与えるための属性です。ここで与えられた情報は、その環境やブラウザなどによって様々な形で表現されますが、一般的なブラウザでは指定した要素の上にマウスカーソルを合わせるとポップアップして表示されます。

lang="言語コード"

　lang属性は、要素の内容やそれに関連する属性値などの言語の種類を示す属性です。たとえば、日本語の場合は「ja」、英語の場合は「en」のように指定します。この属性は、指定された言語の慣習に従って、内容をより正しく表現するために利用されます。

HTMLにはいくつかのバージョンがあり、同じバージョンでもいくつかの種類に分かれているものがあります。そして、そのバージョンや種類によって、使うことのできるタグなどの決まり(DTD：文書型定義)が異なります。上の書式は、そのHTML文書がどのバージョン（種類）の決まりに従って書かれているかを示すものです。バージョンや種類によって、それぞれ決まった書き方がありますので、そのままHTML文書の先頭に書き込んでください。

【サンプル】

▽HTML4.01 Strict（非推奨の書き方を含まない場合）

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

▽HTML4.01 Transitional（非推奨の書き方を含む場合）

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

▽HTML4.01 Frameset（フレームを使う場合）

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

見出しはh1からh6までの６種類のタグのいずれかで示します。hはheadingの略でそれが見出しであることを示し、そのあとの数字は見出しのレベル（1：大見出し〜6：小見出し）をあらわしています。この数字は、見出しの文字サイズの指定ではなく、あくまで見出しの階層的なレベルを示すという点に注意してください。したがって、たとえ見出しを画像にした場合でも、そのレベルにあった見出しのタグをつける必要があります（その場合は、alt属性で適切な代替テキストをつけることを忘れないでください）。このように構造的な意味にしたがって見出しとしてタグ付けしておくことによって、文字の大きさで見出しを表現できない環境（テキストブラウザや音声ブラウザなど）でも、それを見出しだと認識できるようになります。

▶ヒント

一般的なブラウザでは、見出しは太字で上のレベルのものほど大きなサイズで表示されますが、その大きさはブラウザの種類や設定などによって異なります。また、一般に見出しの前後には、１行程度の空き（マージン）ができます。これらを調整したい場合には、以下のようなスタイルシートが利用できます。

h1 {
  font-size: 文字サイズ;
  font-weight: 文字の太さ;
  margin-top: 上マージン;
  margin-bottom: 下マージン;
}

【サンプル】

<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>海の生き物を飼ってみよう</title>
</head>
<body>
<h1><img src="title.jpg" width="350" height="100" alt="海の生き物を飼ってみよう"></h1>
<h2>飼育に必要な器具</h2>
<p>ここでは、海の生き物を飼育する場合に必要となる器具とその役割について説明します。</p>
・・・
</body>
</html>