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

                毎週金曜日配信 What's New 2004年6月25日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

                banban@scollabo.com

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

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

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

   今週のコンテンツ
    ■ 正しい文法のために  第1回 --- 論理構造
    ■ CSS講座 第16回 --- リスト
     ■ 属性の解説(第18回) --- nowrap

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

◆正しい文法のために(第1回) 論理構造

 今回より今までの解説を踏まえて、HTMLを作成するための「正しい」文法につ
 いて順次解説します。
  今まで、作法やアクセシビリティに重きを置いて解説してきましたが、考え
 てみれば文法については、明確にしてきませんでした。どちらかといえば、か
 なり抽象的な持って回った説明に終始してきましたが、やはり文法は大切なフ
 ァクターであり、ページ作成において避けて通れないところでもあります。

 ■正しい文法とは何か?
 一言で言うなら「論理的な構造を持った文書」となりますが、これとて抽象的
 で読者の中には、一向に意味が通じないところでしょう。

 例えば、次の構文を見てください。
 <body>
     <font size="6">正しい文法</font><br>
      <font size="3">マークアップ言語の本来の振る舞いは、論理的な構造を
   正しく伝えることである。</font>
  </body>

  この構文を分析して解析してみましょう。
 最初の「正しい文法」という文字列 (テキスト) に対する文字サイズを大きく
 しています。それを改行して、次の文章の文字サイズを「普通の大きさ」に設
 定しています。
  ここでは、文字の大きさを変えているだけの文字列だけが記述されています。
 視覚系ブラウザで閲覧すると「見出し」と「段落」に見えますが、そのように
 見えるだけです。
  これを、非視覚系ブラウザでレンダリング (描写) するとどうでしょうか。

  つまり、この構文は文字列だけで構造的な意味がありません。「見出し」や
 「段落」のない新聞を読むようなものです。これでは情報が正しく伝わるかど
 うか疑問です。つまり、「絶対に悪い」というわけではなく文法上、問題とな
 ります。文字列だけのコンテンツは、何らかの構造の中に配置しなくてはなり
 ません。正しくは以下のとおりとなります。

 <body>
     <h1>正しい文法</h1>
      <p>マークアップ言語の本来の振る舞いは、論理的な構造を、正しく伝え
   ることである。</p>
  </body>

  サンプルの結果 (悪い例と正しい例)
  http://www.scollabo.com/banban/magazine/ms/sample_96-1.html

 ■論理的な文書構造とは何か?
 それぞれのコンテンツ構成の脈略が、ある「かたまり」として定義した構造の
 中で配置することを論理的な文書構造と呼びます。
  例えば、見出しとなる要素は「見出し」として定義し、当然ながらそれに伴
 う段落は「段落」として定義します。

  HTML4.01では、こうした構造を表わす要素型が幾つか用意されており、すべ
 てのコンテンツはその構造上に配置されることが要求されています。
  主だった構造を定義する基本的な要素型は以下のとおりです。

   address   アドレス要素
   h1〜h6     見出し要素 (第一から第六見出しまで)
   p          段落要素
   blockquote 引用文要素
   table    表組リスト (テーブル)
   pre     整形済みテキスト要素
   form    フォーム要素
   ol     番号つきリスト要素
   ul     番号なしリスト要素
   dl     定義済みリスト要素

 ■階層化された論理構造
 HTMLは基本的の階層構造を持った構文となり階層構造とは、いわばツリー構造
 を形成します。各構造では「親要素」と「子要素」「孫要素」といった親子関
 係が成り立っています。
  以下は簡単な階層を持ったHTML構文です。

<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
 <title>サンプル</title>
</head>

<body>
  <h1>HTMLの基本</li>
   <p>マークアップ言語の原点は以下の精神から出発しています。</p>
   <ul>
    <li>物理的なレイアウトではなく、文書の構造を反映したものとする。</li> 
    <li>コンピューターと人間の両方が理解可能な形式とする。</li>
   </ul>

  <p>こうした観点から、マークアップの標準仕様として HTML4.01が Webの標準
  仕様を制定する機関である <a href="http://www/w3.org/">W3C</a> より正
  式に勧告されています。</p>
</body>
</html>

  この構文をツリー構造で表わすと、

                  html
        ┏━━━━━━━━━┻━━━━━━━━━┓
        head                  body
     ┏━━┻━━┓           ┏━━━━╋━━━━┓
     meta    title          h1     p     ul
                            ┃    ┃
                             a        li

  この図のとおり HTML文書の最上位様子は html要素となります。html要素に
 は2つの子要素が配置されています。
  head要素には、meta要素と title要素が子要素として配置され、文書情報と
 して Webサーバに伝えます。この部分を「ヘッダ」と呼びます。

  コンテンツを配置する body要素には、幾つかの階層に分けられています。
 つまり、body要素とはコンテンツを配置するための最上位として位置付けられ
 ています。body要素の子要素として、h1、p、ul などの要素が配置され、また
 それらの子要素として a、li という要素が配置されています。

  文法上、a要素などのようなインラインレベル要素は独立して body要素直下
 には配置することができません。必ずブロック要素の中で配置されなければな
 りません。

 ■インラインクレベル要素
 インラインとは、普通の文字列 (テキスト文字の集合) と同じ役割を持ち、前
 後に改行や余白などは一切ありません。HTML文法では、インラインレベル要素
 と呼ばれるタグは、必ずブロックレベル要素内で配置しなければなりません。
  その理由とは?
   以下の構文を参照してください。

 <body>
    <a href="http://www.scollabo.com/banban/">Web for begginer</a>
  </body>

  a要素はナビゲーションリンクを示すアンカー要素と呼ばれるインラインレ
 ベル要素です。この構文では、当サイトのトップページのリンクを示したもの
 ですが、このままでは、その文字列が構造上、何を意味しているのか分かりま
 せん。
  そこは段落としてリンクを張っているのか、リストとしてなのか、それとも
 表組の中で示したものか明示的に確認されていません。HTTPという通信手順を
 解釈する「ユーザエージェント」と呼ばれるソフトウェア (ブラウザやプロキ
 シ、検索サーチロボットなど) では本来、文書の論理的な構造を解釈する振る
 舞いを持っています。
  インラインレベル要素は以下のとおり定義されています。

  a、abbr、acronym、applet、b、basefont、bdo、big、br、button、
  cite、code、dfn、em、font、i、iframe、img、input、kbd、label、
  map、object、q、s、samp、select、small、span、s、strike、strong、
  sub、sup、textarea、tt、u、var

  なお、applet、basefont、font、iframe、s、strike要素は HTML4.01の厳格
 仕様から非推奨 (Deprecated) として再定義されています。

 ■ブロッレベル要素
 文書構造を提供するタグのほとんどがブロックレベル要素で占められています
 が、必ずしもすべてのブロックレベル要素がそうであるとは限りません。
  ここではごく一般的なブロックレベル要素について解説します。ブロックレ
 ベル要素には、他のブロックレベル要素を配置できないタイプもあります。

 以下のブロックレベル要素は、インラインレベル要素のみ配置可能です。

   address   アドレス要素
   h1〜h6     見出し要素 (第一から第六見出しまで)
   p          段落要素
   pre     整形済みテキスト要素 (img要素は配置できない)

 次のブロックレベル要素の直接の子要素は必然的に決められています。必ず
 以下のとおりでなければなりません。

   ol   li要素のみ配置可能 (li要素内ではすべての要素型が利用可能)
   ul   li要素のみ配置可能 (li要素内ではすべての要素型が利用可能)
   dl   dt あるいは dd要素のみ配置可能
   table 直接の子要素として tr、tbody、thead、tfoot要素のみ配置可能

 次のブロックレベル要素は、子要素として必ず他のブロックレベル要素を配置
 しなければなりません。

   blockquote コンテンツを囲む要素としてブロックレベルを子要素とする
   form    入力フィールドを配置するためにブロックレベルで囲む

 汎用的に利用できるブロックレベル div要素は、そのタグ自体に意味を持って
 おりません。その意味では論理的な構造を意味するものではないということに
 なります。なお div要素には、ほとんどのタグを配置することが可能です。

   ※ 次回は、終了タグの扱い、及び子要素の扱いについて解説します。

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

◆CSS講座(第16回) リスト

 箇条書きコンテンツを作成するときに用いられるリスト要素のマーカー (行頭
 で示されるマーク) や、余白をコントロールするときに使うスタイルシートに
 ついて解説します。

 ■番号なしリスト
 マーカーが番号ではないリストを作成するために、ul要素を使います。行頭の
 マーカーは閲覧者の利用するソフトウェアによって異なりますが、一般的な視
 覚系ブラウザでは、黒丸が標準的に表示されています。
  スタイルシートでは、マーカーの形状を任意に変更して表示させることがで
 きます。スタイルシートは、list-style-type属性を使います。

  list-style-type属性の値と機能
   disc   黒丸
   circle  白丸
   square  四角
   decimal  数字
   none   マーカーの表示なし

  list-style-type属性の書式
   ul { list-style-type: circle }

   タグに直接記述する場合は、
   <ul style="list-style-type:circle">

  マーカーに任意の画像を指定することもできます。
 画像を指定するスタイルシートは、list-style-image属性を使います。

  list-style-image属性の書式
   ul { list-style-image: 画像の URI }

  番号なしリストのスタイルシートサンプル
   http://www.scollabo.com/banban/magazine/ms/sample_96-2.html

 ■番号つきリスト
 行頭に番号が付与される番号つきリスト (ol要素) の番号マーカーを他の形式
 の数字や記号に変更することができます。
  記号の変更は、上記で説明したとおり list-style-type属性を使います。

  数字や記号を表示する値は以下のとおりです。
   decimal-leading-zero 頭にゼロのついた数字
   lower-roman     小文字ローマ数字
   upper-roman     大文字ローマ数字
   lower-alpha     小文字アルファベット
   upper-alpha     大文字アルファベット
   lower-latin     小文字ラテン文字
   upper-latin     大文字ラテン文字
   lower-greek     小文字ギリシャ文字
   hebrew        ヘブライ数字
   armenian       アルメニア数字
   georgian       グルシア数字
   cjk-ideographic   漢数字
   hiragana       あいうえお順のひらがな
   katakana       アイウエオ順のカタカナ
   hiragana-iroha    いろは順のひらがな
   katakana-iroha    イロハ順のカタカ
   none         マーカーの表示なし

  ここに掲げた属性値は CSS Level 2 で定義されているものが多く、実装し
 ている Webブラウザが少ないのが現状です。Mozilla、Netscape では、アルメ
 ニアとグルジア以外を実装しています。MSIEでは上記のうえから4つくらいま
 でを実装しています。

  番号つきリストのサンプル
   http://www.scollabo.com/banban/magazine/ms/sample_96-3.html

 ■リストの余白
 番号なしリスト (ul要素) でも、番号つきリスト (pl要素) でも、リストの内
 容はどちらもリストアイテムの li要素を使うことになります。
  通常、li要素はインデント (字下げ) して出力します。

  実際にはインデントではなく、一種の余白と考えられます。スタイルシート
 では、margin属性によって余白を自由にコントロールすることができます。

  余白をコントロールする書式
   ul { margin-left: 0 }  インデントのように見える余白を解消する
   ul { margin-left: 2em }  2文字分のインデントのように見せる

   ※ 次回は定義リストについて解説します。

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

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

 テーブル内のセルで配置されるコンテンツ (主に文字列) の自動改行を禁止す
 る属性です。HTML4.01Strict (厳格仕様) では非推奨として定義されているた
 め、使うことができません。

 ■nowrap属性 セル内の自動改行を禁止する
 DTD:     過渡仕様 (Transitional)、及びフレーム仕様 (Frameset)
 属性値:   なし
 記述法:   <td nowrap>セル内のデータの改行を禁止します</td>
 関連要素:  td、th

 XHTMLの制限:XHTML1.0 Transitionalで利用可。ただし、属性の値として以下
        のように記述する必要があります。
        <td nowrap="nowrap">
        XHTML1.1では、この属性は破棄されていますので使えません。

  通常、視覚系ブラウザではテーブルのレンダリングは、ブラウザ固有の仕様
 に委ねられます。1行のセルデータが横に長くなった場合、ブラウザ側で自動
 的に調整して改行するのが一般的です。
  作者のデザインを維持するときに利用することがある属性ですが、現在は非
 推奨扱いとなっており、スタイルシートで利用するように求められています。

  スタイルシートでは以下のように設定することで、セル内のデータを強制的
 に改行を禁止することができます。

    td { white-space: nowrap }

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

今回はここまで。

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

  今週のおさらい
  http://www.scollabo.com/banban/magazine/rebiew_096.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年6月8日
Copyright(C) 2002-2004 banban@scollabo.com