正しい文法のために/メールマガジン第97号今週のおさらい

初心者のためのホームページ作り

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方までメールにてご質問ください。

＜第97号＞ 今週のおさらい
　　　　　　　　　　　　　 毎週金曜日配信　What's New 2004年7月9日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ 正しい文法のために  第２回 --- 終了タグと要素の親子関係
　　■ CSS講座　第17回 --- 定義リスト

◆ 正しい文法のために --- 終了タグ

HTMLでは、オプションとして終了タグを省略できるものがあります。終了タグを省略できる要素は以下のとおりです。

**終了タグを省略できる要素一覧**
要素名	意味	親要素
html	最上位要素 (開始タグも省略可)	なし
head	ヘッダ情報 (開始タグも省略可)	html
body	コンテンツ情報 (開始タグも省略可)	html
dd	定義リストの用語解説	dl
dt	定義リストの定義用語	dl
li	リストアイテム要素	ol、ul
tbody	テーブル本体のグループ化	table
tfoot	テーブルフッタ部のグループ化	table
thead	テーブルヘッダ部のグループ化	table
td	テーブルのデータセル	tr
th	テーブルのヘッダセル	tr
option	メニュー項目	select
tr	テーブルセルを定義する	table
p	段落	指定なし

これらは、あくまで終了タグを省略できる「オプション」であることにご注意してください。文法的な解釈によれば、厳密にはどのようなタグであれ、終了タグを省略せずに記述することが望まれます。ちなみに、XHTML、XML では終了タグの省略は許されておりません。将来的な発展のためにも、終了タグを省略しないクセをつけておきましょう。

なお、基本的にインラインレベル要素では終了タグの省略は許されていませんので、その点に注意してください。

注意　tbody要素については、条件付で開始タグの省略が可能です。

■ 空タグ

HTMLでは、内容モデルを含まず終了タグが必要としない、いわゆる空タグと呼ばれる要素型があらかじめ定義されています。

以下はその要素型の一覧です。 (非推奨要素を除く)

**終了タグを持たない要素一覧**
要素名	意味	親要素
area	領域指定	a、map
br	強制改行	指定なし
col	下方向のテーブルセルのグループ化	table
img	静止画像の表示	指定なし
input	入力フィールド	指定なし
link	他の文書の関係を示す	head
hr	水平方向の罫線	指定なし
meta	文書のメタ情報を示す	head
param	パラメータを示す	object

◆ 正しい文法のために --- 要素の親子関係

前回説明したとおり、HTMLの文書は論理的な構造によって作成します。その構造は基本的に階層 (ツリー構造) によって構成されます。

HTML文書の最上位要素は html要素で、その直下に head、および body の２つの要素が配置されます。つまり head要素と body要素の親要素が html要素であるということが理解できるでしょう。

以下の構文を見てみましょう。

<html>
<head>
   <title>ツリーとなる論理構造</title>
</head>

<body>
  <h1>段落構造</h1>
  <ul>
    <li>ツリー構造</li>
    <li>文書構造</li>
  </ul>
  <h2>ツリー構造</h2>
  <p>ツリー構造（document tree）とは
  <strong>１本の木から伸びる根</strong>
  のような構造のことです</p>
</body>
</html>

この構文では、body要素直下に見出し要素となる h1要素、リストを示す ul要素、第二見出しとなる h2要素、段落を示す p要素が置かれています。

リストの ul要素には、リスト項目となる li要素が配置され、段落の p要素には文字を強調する strong要素が配置されています。

これらの階層構造は以下の図のとおりです。

ツリー構造

この図のとおり、下層に配置された要素が子要素となり、上層の要素が親要素となります。つまり、body要素から見た li、strong の要素は孫要素となります。それぞれの要素の配置には、こうした親子関係があるということを覚えてください。

■ 指定される子要素

要素の親子関係の中で、親子が限定されるタイプがあります。例えばリストを示す ol、ul の要素では、直接の子要素は li要素とならなければなりません。

以下は子要素が決められている親要素の一覧です。

**子要素が決められている親要素一覧**
要素名	意味	子要素
html	`HTML`文書の最上位要素	head、body
dl	定義リスト	dd、dt
ol、ul	番号付き、番号なしリスト	li
select	メニュー選択フィールド	option
table	テーブルを定義する	tbody、tr
tr	横方向のテーブルセルを定義する	td、th

これらの要素は必ず指定された子要素を配置しなければなりません。また、通常の文字列と同等の表現をするインラインレベル要素は、必ずブロックレベル要素内で配置されることが望まれています。

なお、dd、li、td、th の各要素内には、ほとんどの要素を配置することが可能です。

◆ CSS講座 --- 定義リスト

定義リストは、リストを定義する dl要素を用い、定義する用語を dt要素で、その用語の解説に dd要素を配置して作成します。

具体的な構文は以下のとおりとなります。

<h1>用語集</h1>
<dl>
 <dt>HTML</dt>
  <dd>HTMLは、Hyper Text Markup Language の頭文字を取った略
      語で、そのルーツはSGMLにあります。基本的に決められた
      手順である文書の要素内容に応じて、論理的な構造化するよ
      うにマークアップします。</dd>
  <dd>マークアップされた文書は、Webを通じて世界中に配信する
      ことが可能になることで、誰でも簡単に情報交換することが
      できるようになりました。</dd>

 <dt>W3C</dt>
  <dd>W3Cとは、World Wide Web Consortium の略語で、Webに関す
      る標準仕様を定める民間の非営利組織である。世界中のベン
      ダーや技術者、研究所や個人などが集まり、現在は、マサチ
　　　ューセッツ工科大学、欧州情報処理数学研究コンソーシアム、
　　　慶応大学の三者がホストを勤めている。</dd>
</dl>

サンプル構文実行結果

サンプルを見て見るとお分かりのとおり、dd要素が幾分かインデント (字下げ) されています。どの程度のインデントなのかはブラウザ銘柄により一定ではありませんが、スタイルシートを利用することで自由にコントロールすることができます。

このインデントは、実際には「margin」という「余白」なので、余白をコントロールすればいいわけです。

dt要素は、定義する用語を示しますが、要するに見出しの役割と同じで、dd要素はその解説となる「段落」の役割を持ちます。それぞれを以下のようなスタイルシートを講じることで、まったく印象が異なる表現となります。

body { margin-left: 6%;
       margin-right: 6%;
       background: #ffffde;
       color: #000 }

h1   {
      margin: 0;
      padding: 2px;
      background: #069;
      color: #fff;
      font-size: 1.2em;
      text-indent: 1em }

dl   {
      margin: 0 }

dt   {
      margin-top: 1em;
      padding: 0.1em;
      background: #ffc;
      color: #000;
      border-top: 2px solid #069;
      border-bottom: 2px solid #069;
      font-weight: bold;
      text-indent: 1em }

dd   {
      margin: 0;
      letter-spacing: 1px;
      line-height: 130% }

スタイルシートを実装した構文のサンプル

初版公開日 2004年7月19日

初心者のためのホームページ作り 第97号

初心者のためのホームページ作り　第97号