大藤 幹
しおりをつけるHTMLのバージョンを示す
<!DOCTYPE HTML PUBLIC "バージョン" "URL">
バージョン → HTMLのバージョンや種類を示す情報
URL → HTMLを定義したファイル(DTD：文書型定義)のURL
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">
見出しを表す
・・・
<h6> 〜 </h6> ←小見出し
見出しは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>
行揃えを指定する
行揃えは、上の書式のように指定します。値として「left」を指定すると「左揃え」、「right」を指定すると「右揃え」、「center」を指定すると「中央揃え」になります。「text-align」は、ブロックレベル要素に対して指定して、その内容の行揃えを設定するものです。ブロックレベル要素自体をセンタリングしたい場合には、左右のマージンを「auto」に設定してください。
【サンプル】
▽CSS
h1 { text-align: left; }
h2, p { text-align: center; }
h3 { text-align: right; }
▽HTML
<!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>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<h1>
<img src="left.jpg" width="183" height="69" alt="左揃え">
</h1>
<h2>
<img src="center.jpg" width="188" height="66" alt="中央揃え">
</h2>
<p>
- 段落の中央揃え -
</p>
<h3>
<img src="right.jpg" width="183" height="69" alt="右揃え">
</h3>
</body>
</html>
