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

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

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

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

<第97号> 今週のおさらい
              毎週金曜日配信 What's New 2004年7月9日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ 正しい文法のために  第2回 --- 終了タグと要素の親子関係
   CSS講座 第17回 --- 定義リスト
正しい文法のために --- 終了タグ
HTMLでは、オプションとして終了タグを省略できるものがあります。終了タグを省略できる要素は以下のとおりです。
終了タグを省略できる要素一覧
要素名 意味 親要素
html 最上位要素 (開始タグも省略可) なし
head ヘッダ情報 (開始タグも省略可) html
body コンテンツ情報 (開始タグも省略可) html
dd 定義リストの用語解説 dl
dt 定義リストの定義用語 dl
li リストアイテム要素 olul
tbody テーブル本体のグループ化 table
tfoot テーブルフッタ部のグループ化 table
thead テーブルヘッダ部のグループ化 table
td テーブルのデータセル tr
th テーブルのヘッダセル tr
option メニュー項目 select
tr テーブルセルを定義する table
p 段落 指定なし
これらは、あくまで終了タグを省略できる「オプション」であることにご注意してください。文法的な解釈によれば、厳密にはどのようなタグであれ、終了タグを省略せずに記述することが望まれます。ちなみに、XHTMLXML では終了タグの省略は許されておりません。将来的な発展のためにも、終了タグを省略しないクセをつけておきましょう。
なお、基本的にインラインレベル要素では終了タグの省略は許されていませんので、その点に注意してください。
注意 tbody要素については、条件付で開始タグの省略が可能です。
空タグ
HTMLでは、内容モデルを含まず終了タグが必要としない、いわゆる空タグと呼ばれる要素型があらかじめ定義されています。
以下はその要素型の一覧です。 (非推奨要素を除く)
終了タグを持たない要素一覧
要素名 意味 親要素
area 領域指定 amap
br 強制改行 指定なし
col 下方向のテーブルセルのグループ化 table
img 静止画像の表示 指定なし
input 入力フィールド 指定なし
link 他の文書の関係を示す head
hr 水平方向の罫線 指定なし
meta 文書のメタ情報を示す head
param パラメータを示す object
正しい文法のために --- 要素の親子関係
前回説明したとおり、HTMLの文書は論理的な構造によって作成します。その構造は基本的に階層 (ツリー構造) によって構成されます。
HTML文書の最上位要素は html要素で、その直下に head、および body の2つの要素が配置されます。つまり head要素body要素の親要素が html要素であるということが理解できるでしょう。
以下の構文を見てみましょう。
<html>
<head>
   <title>ツリーとなる論理構造</title>
</head>

<body>
  <h1>段落構造</h1>
  <ul>
    <li>ツリー構造</li>
    <li>文書構造</li>
  </ul>
  <h2>ツリー構造</h2>
  <p>ツリー構造(document tree)とは
  <strong>1本の木から伸びる根</strong>
  のような構造のことです</p>
</body>
</html>
この構文では、body要素直下に見出し要素となる h1要素、リストを示す ul要素、第二見出しとなる h2要素、段落を示す p要素が置かれています。
リストの ul要素には、リスト項目となる li要素が配置され、段落の p要素には文字を強調する strong要素が配置されています。
これらの階層構造は以下の図のとおりです。

ツリー構造

この図のとおり、下層に配置された要素が子要素となり、上層の要素が親要素となります。つまり、body要素から見た listrong の要素は孫要素となります。それぞれの要素の配置には、こうした親子関係があるということを覚えてください。
指定される子要素
要素の親子関係の中で、親子が限定されるタイプがあります。例えばリストを示す olul の要素では、直接の子要素は li要素とならなければなりません。
以下は子要素が決められている親要素の一覧です。
子要素が決められている親要素一覧
要素名 意味 子要素
html HTML文書の最上位要素 headbody
dl 定義リスト dddt
ol、ul 番号付き、番号なしリスト li
select メニュー選択フィールド option
table テーブルを定義する tbodytr
tr 横方向のテーブルセルを定義する tdth
これらの要素は必ず指定された子要素を配置しなければなりません。また、通常の文字列と同等の表現をするインラインレベル要素は、必ずブロックレベル要素内で配置されることが望まれています。
なお、ddlitdth の各要素内には、ほとんどの要素を配置することが可能です。
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% }
スタイルシートを実装した構文のサンプル


This page is Valid HTML 4.01! 初版公開日 2004年7月19日
Copyright(C) 2002-2004 banban@scollabo.com