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

                 毎週金曜日配信 What's New 2004年7月9日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第97号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
 的な Webページ作成に役立つことを目的に配信されております。

  当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
 います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
 ようになります。

   今週のコンテンツ
    ■ 正しい文法のために  第2回 --- 終了タグと子要素の扱い
    ■ CSS講座 第17回 --- 定義済みリスト
     ■ 属性の解説(第18回) --- border属性

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆正しい文法のために --- 終了タグと子要素の扱い

 今回は終了タグの扱いと、非常に重要な親要素と雇用その関係について解説し
 ます。ちょっとしたケアレスミスにつながることの可能性を秘めた重要な課題
 になります。

 ■終了タグの扱い
 通常、HTMLのタグはあるコンテンツ要素を囲みますが、その際、開始タグと終
 了タグが対になった (コンテナタグと呼ばれる) ものが一般的です。
  HTMLの標準仕様 (Tips参照) では、一部のタグで終了タグを省略することが
 可能になっています。

  標準仕様では終了タグの省略を「Option:オプション」としており、すべて
 の Webブラウザはこれをサポートすることを明記しています。
  つまり終了タグの省略は、ブラウザ側でそれを補完しているわけです。

  終了タグの省略が許されているのは以下のとおりです。これ以外では終了タ
 グの省略は許されておりません。

   html    HTML文書の最上位要素 (開始タグの省略も可)
   head    ヘッダ情報を囲むタグ (開始タグの省略も可)
   body    コンテンツを囲むタグ (開始タグの省略も可)
   p      段落要素
   colgroup  テーブルセルの縦方向の列を構造的にグループ化する要素
      td     テーブルのデータセル要素
      th     テーブルのヘッダセル要素
      tr     テーブルの━列の行を定義する要素
      tbody    テーブルの本体を定義する要素
      thead    テーブルのヘッダを定義する要素
      tfoot    テーブルのフッタを定義する要素
      li     リスト項目要素
   dt     定義リストの定義用語要素
      dd     定義リストの定義した用語の詳細を囲む要素
   option   メニューリストの項目要素

  では、終了タグの省略は本当に正しいのでしょうか?
 実際に XML、あるいは XHTML的に解釈するならば、終了タグの省略は許されて
 いません。マークアップの本来の考え方を踏襲するならば、できるだけ終了タ
 グの省略は避けておきたいところです。

  現在のところ、HTMLはこれ以上アップグレードする予定がありません。むし
 ろ、XHTMLや、XMLへ移行しようとしています。そうした現実を考慮し将来に向
 けた学習をしていくためにも、終了タグを記述するクセをつけておくことは、
 大変意味のあることです。

  例えば段落をあらわす p要素の終了タグを省略した場合、厳密に考えると、
 その段落の終わりがないことになります。たとえブラウザ側で終了タグを補完
 するとはいえ、文法的に見たら「おかしい」ことに気づくでしょう。
  ブラウザ側で補完することになっていますが、すべてのソフトウェアがそう
 であるとは限りません。

  なお、終了タグを待たない (要素モデルがない) タグがありますが、これら
 を空タグ (Empty Element) と呼びます。空タグには以下のものが定義されてい
 ます。(非推奨要素を除く)

   area  領域指定 (イメージマップなど)
   br   強制改行
   col   データセルのグループ化
   hr   罫線の表示
   img   静止画像の表現
   input  入力フィールド
   link  外部文書との関係を示す
   meta  メタ情報を定義する
   param  パラメータの指定


 ■親要素と子要素の関係
 ある要素の中に別の要素が配置されていたとき、必然的に親子要素の関係が成
 り立ちます。
  例えば、

  <body>
  <p>Webの標準仕様を制定する <a href="http://www.w3.org/">W3C</a> は、
  マサチューセッツ工科大学、慶応大学、そして欧州情報処理数学研究コンソ
  ーシアムがホストとなって組織されています。</p>
  </body>

  ここでの最上位要素は、body要素となります。body要素の直接の子要素とな
 るのが p要素です。そして p要素の直接の子要素が a要素です。
  逆に見れば a要素の親要素が p要素となり、p要素の親要素は、body要素と
 なります。また、body要素の孫要素は a要素となります。

   body 最上位要素。p要素は子要素、a要素は孫要素となる。
   p   親要素は body、子要素は a要素となる。
   a   親要素は p要素、body要素は祖父要素となる。

  これらから判断すると、各要素が親子の階層関係にあることが理解できます。

 ■決められた親子関係
 要素の親子関係では、タグによっては子要素が限定されるものがあります。
  以下は、子要素が限定される親要素の一覧です。

  親要素    最低限配置されるべき子要素
  --------------------------------------------------------
  table    tr
  tr     td、th
  ul     li
  ol     li
  dl     dd、dt
  body    ブロックレベル要素
  form    ブロックレベル要素
  blockquote ブロックレベル要素
  noscript  ブロックレベル要素

  これらの要素関係は、親要素に子要素として必ず配置されなければならない
 制約があることを覚えてください。
  同時に、決められている子要素 (td、th、li、dd、dt) などは単独で利用す
 ることができません。必ず親要素と組にならなければなりません。

  body要素の子要素としてブロックレベル要素が配置されなければなりません
 が、言い換えればインラインレベル要素は単独で利用することができないとい
 うことになります。つまり、インラインレベル要素は、何らかのブロックレベ
 ル要素の中で配置されなければならないということです。

  例えば、
   <body>
    <a href="http://www.w3.org">W3C</a>
   </body>

  とした場合、厳密には文法違反となります。bosy要素直下にはインラインレ
 ベル要素である aタグは配置できないのです。正確には、

  <body>
   <p><a href="http://www.w3.org">W3C</a></p>
  </body>

  というように、ブロックレベル要素内で配置します。

   ※ 次回は文書型定義について解説します。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Tips HTMLの標準仕様

 HTMLの標準仕様を定めているのは、世界中のソフトやハードウェアのベンダー
 や団体、技術者、個人で組織されている W3C (World Wide Web Consortium) 
 という非営利組織によって討議され、様々の実験を経て決定されています。
  私が特に W3C信奉者というわけではありませんが、通常 Webブラウザや通信
 ソフトの仕様は、すべて W3C仕様に則って作られています。

  もし、こうした標準仕様がなかったとしたら、今日の Webの隆盛はありえな
 かったことと思います。すべてのブラウザの振る舞いは標準仕様に準拠してい
 ると断言できるでしょう。そう考えると W3Cの標準仕様を学ぶということは、
 制作者にとっては、大変意味のあることではないでしょうか。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

 私が最も好んで使っているリストの一種である「定義済みリスト」のスタイル
 付けについて解説します。

 ■定義済みリストとは
 定義する用語とその説明という形で成り立つリストですが、かた苦しく「定義
 する用語」というよりも、ある項目に対する「見出し」とその「説明」という
 スタイルで利用することが多いものです。
  定義リストは、dl要素でリストであることを定義し、定義用語 (私流に言え
 ば見出し) には dt要素、その説明に dd要素を使います。

  書式
   <dl>
    <dt>定義する用語 (見出し) </dt>
    <dd>用語の説明文</dd>
   </dl>

  一般的なブラウザでは、dd要素内容が幾分かインデント (字下げ) して表現
 されます。どれくらいインデントされるかはブラウザ銘柄によって異なります
 が、スタイルシートを利用することでインデントを任意にコントロールするこ
 とができます。 (なお、番号付きリストのようなマーカーは表示されません。)

  インデントといっても実際には単なる余白であり、margin属性を使えば、簡
 単にインデント (のように見える余白) をコントロールします。

  dt要素で囲む定義用語 (見出し) も同時にスタイル付けすることで、見出し
 部分とその解説 (段落のように見える) 部分とを明確に区別することで、視覚
 上の効果を高めることができるでしょう。
  当サイトで使用している定義リストのスタイルシートを使って文書を作成し
 てみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>定義リスト/CSS講座り</title>
<style type="text/css">
<!--
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% }
-->
</style>
</head>

<body>
<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>

</body>
</html>

 サンプルの実行結果
 http://www.scollabo.com/banban/magazine/ms/sample_97-1.html


◆スタイルシートの解説

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

 コンテンツを配置するためのbody要素をスタイル付けしています。
  左右の余白はブラウザ画面比率の6%とし、文字色を黒色、背景色を白色に
 しています。

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

 見出し要素の背景色をくすんだ青色に、文字色は白色にしました。また上下の
 余白をなくし、要素内の余白 (背景色が適用される) には上下左右とも2ピク
 セル分とし、文字サイズを標準よりも2割大きくしました。また1文字分のイ
 ンデントも設定しています。

 ■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 }

  定義用語 (見出しとなる部分) を囲む dl要素を細かく設定しています。
 上側の余白を1文字分、要素の内側の余白は1文字の10分の1に設定、背景色
 はクリーム色、文字色は黒色、上下に2おい九セルの太さを持った青い罫線、
 文字は強調し、1文字分インデントしています。

◆まとめ

  ここに掲げたスタイルシートを自分流にアレンジしてください。色や大きさ
 などを変えるだけでもずいぶん印象が違ってくるでしょう。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML、XHTML属性の解説 --- border属性

 ある要素の四方に罫線を表示させるための属性です。

 ■border属性 要素の四方に罫線を表示する
 DTD:     すべての文書型定義で利用可
 属性値:   長さ (ピクセル単位)
 記述法:   <table border="1">
 関連要素:  img (非推奨)、object (非推奨)、table

 XHTMLの制限:特にありませんが、XHTML1.1では table要素のみ使用可能

 border属性は、img や object要素で用いる場合、文書型定義に過渡期仕様の
 みに限ります。厳格仕様 (Strict) では使えません。

  imgや object要素に用いる場合は、画像をリンクブタンなどで利用したとき
 に有効になります。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

 今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
 Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明し
 ています。あわせて過去の記事のおさらいも掲載しています。

  今週のおさらい
  http://www.scollabo.com/banban/magazine/rebiew_097.html

 次回は、7月11日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
 ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
 と思います。
  ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
 てくれると思います。

 発行者 ばんばん
 協力  スズキ・コラボレーション http://www.scollabo.com/
 配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

  誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

 ■バックナンバー こちらで公開しています。
 プレーンテキスト  http://www.scollabo.com/banban/magazine.html
 各号のおさらい  http://www.scollabo.com/banban/magazine/
 アーカイブ    http://www.scollabo.com/banban/daf/archive.html
 まぐまぐ     http://backno.mag2.com/reader/Back?id=0000090196

 ■配信の変更・中止はこちらです。
 個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
 かります。
  当サイトにて http://www.scollabo.com/banban/magazine/top.html
  まぐまぐにて http://www.mag2.com/m/0000090196.htm

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

 当地では毎日猛暑が続いています。梅雨入りしてからはあまり雨も降らず、う
 だるような暑さで少々夏バテ気味です。 (おいおい、少し早いじゃないか)

  今度の日曜日は参議院選挙です。有権者の方は必ず投票しましょう。政治に
 不満があるのならばなおさらのことです。せっかくの参政権ですから棄権など
 せず、清き一票を投じてください。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆著作権について
 個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応
 じておりません。記事中の内容について、無断で使用することを固く禁じます。
  なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
 自由に使っていただいても差し支えありません。

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2004年8月4日
Copyright(C) 2002-2004 banban@scollabo.com