大藤 幹
しおりをつける汎用属性
以下に示す属性は、ほとんどの要素に対して指定することができます。
id="ＩＤ名"
id属性は、要素に固有の名前をつけるための属性です。同じページの中では、複数の箇所で同じ名前を指定することはできませんので注意してください。この属性は、その要素をスタイルシートの適用対象として指定したい場合などに利用されます。id属性の値は、大文字と小文字は別の文字として扱われますので注意してください。また、id属性の値は必ず先頭をアルファベットで開始する必要があります。先頭以外にはアルファベットと数字を組み合わせて使うことができます（実際には「-」や「_」なども含むことができるのですが、古いブラウザの中には問題が発生するものもあります）。
class="クラス名"
class属性は、その要素の種類を示す属性です。id属性とは異なり、同じページの中で複数の要素が同じクラス名を持つことができます。この属性は、その要素をスタイルシートの適用対象として指定したい場合などに利用されます。class属性の値は、大文字と小文字は別の文字として扱われますので注意してください。仕様上は、class属性の値には特別な文字を含む通常のテキストを入れられることになっていますが、ブラウザの中には問題が発生するものがあります。id属性の場合と同様にアルファベットと数字を組み合わせて指定しておけば問題ありません。
title="補足情報"
title属性は、要素に対して補足的な情報を与えるための属性です。ここで与えられた情報は、その環境やブラウザなどによって様々な形で表現されますが、一般的なブラウザでは指定した要素の上にマウスカーソルを合わせるとポップアップして表示されます。
lang="言語コード"
lang属性は、要素の内容やそれに関連する属性値などの言語の種類を示す属性です。たとえば、日本語の場合は「ja」、英語の場合は「en」のように指定します。この属性は、指定された言語の慣習に従って、内容をより正しく表現するために利用されます。
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>
