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

                   毎週金曜日配信 What's New 2003/1/17
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第35号>

             banban@scollabo.com

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

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

 今週の課題 ■ HTML基本 その2 --- DTD
       ■ XHTML講座 第2回 --- XHTMLの作法について
       ■ XHTML文書 --- フォームを使ったサンプル
       ■ HTML タグの解説 --- head要素

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML基本 その2 DTD

■文書型宣言の記述 DTD(Document Type Definition)
HTMLの冒頭で、どのバージョンのタグセット(タグの集合体)を用いるのかを明
示的に宣言しなければなりません。厳密には必須の項目です。

 ブラウザは、この宣言に利用される URIを参照して、画面表示の整形を図りま
す。これは必須の項目なので、忘れないようにしましょう。
 なお、URIの記述は省略することが可能ですが、その場合は互換型となります。

 1.標準型 W3Cの標準仕様にしたがって正しく記述
 2.互換型 旧バージョンとの互換性を考慮して従来のブラウザと同様の表示

 ●Transitional
 HTML4.01で、過渡期の非推奨と呼ばれる要素および属性を使用する場合の文書
 型宣言です。現在の Web上にある圧倒的多数のページで用いられています。

 互換型の記述
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 標準型の記述
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

 ●Frameset
 Transitionalの仕様にフレームが加えられた文書型宣言です。

 互換型の記述
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

 標準型の記述
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/frameset.dtd">

  ●Strict
 厳格な文法が要求されるため、非推奨とされる要素および属性は使えない文書
 型宣言。

 互換型の記述
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

 標準型の記述
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/strict.dtd">

  ブラウザによっては、互換型と標準型で表現が若干異なる場合があります。
 基本的に、HTMLでは XHTML、XMLと違って、他の DTD が参照できません。その
  理由から URIを省略しても問題がないとされています。
  ちなみに、当サイト内のHTML4.01では、Strict互換型で統一しています。
 そのため、Macintosh版 MSIE 5.0以降ではやや影響があると思われます。
  (何故、URIを書かなかったのかと言えば、単に面倒くさかっただけ、ゴメン)

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XHTML講座 第2回 XHTMLの作法について

今回は、実際に文書を作る前の XHTMLの決まり事に関して解説します。決まり事
というと堅苦しくなりますが、ここでは「お約束事」とお考えください。
 XHTMLの基本となる重要な部分で、XHTML作成では必須となり、その規則はすべ
て XMLと同様です。必須とは、絶対そうしなくちゃいけないという意味です。

 XHTMLは HTMLではなく XML文書なので、XMLの作法を踏襲します。


■XHTMLのデータ文字形式
 XHTMLでの文字のほとんどが #PCDATA( Processed character data:解析対象
の文字データ)としてパース(SGML的に解釈)されています。
 つまり、XMLはSGMLのサブセットであるために、そのように定義されています。

  #PCDATAとは、解釈される文字の意味で、実体参照は実体参照文字でなければ
なりません。つまり、& は、&amp; と記述しなければなりません。
 SGML的解釈とは、データ記述が主体とされているためで、HTMLのような表現の
主体とは異なります。SGMLで記述されるデータはすべて #PCDATAとして扱われて
います。#PCDATAとは、意味を扱う文字データ形式です。

 HTMLでは、CDATA(キャラクタ文字データ:普通の文字) として解釈されてい
ますので、実体参照はそのまま使うことができます。ただし、URIに用いる記述は
#PCDATAとして扱われます。
  特にCGIを扱うプログラムを呼ぶ URIの記述には注意が必要です。


■XHTMLはすべて小文字で書く
HTMLでは要素および属性の記述に、大文字を使用することができますが、 XHTML
では、大文字と小文字が厳格に区別されます。

 そのために、 a と A は違うものとして扱われる関係で、すべて小文字を使用
することが規定されています。
 ちなみに、HTMLは CDATAとして扱われているので、大文字と小文字の区別をし
ません。


■終了タグは省略できない
HTMLでは、終了タグを省略できる要素が多々存在しています。しかし XHTML文書
では、すべての省略が禁止されています。
 これは XHTMLが構造的文書であることを強く定義したものであり、始まりの要
素がどこで終わるのかを明示的に記述しなければならないのです。

 厳密には Webブラウザだけを利用するのであれば、ブラウザ側で終了を補完し
てくれるので問題がありません。しかし XML文書は他のメディアを利用すること
が一般的です。多く用いられるのは、 XMLパーサというソフトウェアで、企業の
基幹システムやデータベースとのやり取りのツールとして利用されています。
 その XMLパーサが理解できるようにするためも、終了タグは必須なのです。

 HTMLの例
 <p>ここは段落です。
 <p>ここも段落です。

 XHTMLの例
 <p>ここは段落です。</p>
 <p>ここも段落です。</p>

 ○Tips --- XMLパーサ
   XML文書を、アプリケーションソフトが利用しやすい形に変換するソフトウェ
  アの総称で、別名 XMLプロセッサとも呼ばれています。
 XHTML、XMLを表示し、様々なアプリケーションやデータのインターフェイスと
 して利用されるツールです。XMLパーサは数多く市販されています。
  面白いことに、Windows版 MSIE 6.0 では、 XML文書の表示の際、小さなミス
  も許してくれません。同時に、どこにミスがあったかをちゃんと教えてくれま
 す。まるで、XMLパーサのようだ!

  実は、Windows版 MSIE 6.0 には最初から MSXML 3.0 がインストールされて
 いるために XMLパーサとして利用できるようになっています。この点は他のブ
 ラウザに比べると、優れた機能を持っています。

  現在は、MSXML 4.0 SP1 が提供されています。インストールしておくことを
 お奨めします。(残念ながら Macintosh用は用意されていません。)

   Windows用 MSXML 4.0 SP1 無償ダウンロード
  http://www.microsoft.com/japan/msdn/xml/downloads/msxml4.asp

  Windows MSIE 5.0/5.5用 MSXML 3.0 無償ダウンロード
  http://msdn.microsoft.com/downloads/default.asp


■空要素(エンプティ要素)の扱い
空(から)要素とは、通常、終了タグを持たない要素を指します。
 例えば、img、br、col、meta、link、hr などが挙げられますが、XHTMLでは、
これらの空要素に終了の合図が必要になります。(XMLパーサに対応するため)

 <img src="hana.png" width="200" height="150" alt="花の絵" />

 必ず最後の部分で半角スペースを置いた後に、スラッシュ "/" を記述します。
半角スペースを置く理由として、古いブラウザでも対応できるためといわれてい
ます。つまり、半角後の妙な記述は、ブラウザ側が無視してくれるからとも言わ
れています。この記述は必須ですので必ず覚えてください。
 (半角空白+スラッシュはブラウザを騙すやり方だと論評する人もいます。)


■属性値はすべて引用符で囲む
HTMLでは、属性の値が数字だけ、あるいはアルファベットだけの場合、引用符を
省略することが可能でしたが、 XHTMLでは省略が許されていません。

 HTMLの場合
 <table class=samp cellspacing=0 cellpadding=0 width=500>

 XHTMLでは、#PCDATAとされている関係で、必ず引用符が必須となります。

 XHTMLの場合
 <table class="samp" cellspacing="0" cellpadding="0" width="500">


■属性値の最小化
HTMLでは、要素によって属性の値が無いものが幾つかあります。

 HTMLの例
  <select name="sample">
  <option selected>Microsoft Internet Explorer</option>
  <option>Netscape</option>
  </select>

 XHTMLの例
  <select name="sample">
  <option selected="selected">Microsoft Internet Explorer</option>
  <option>Netscape</option>
  </select>

 この中の、option要素に用いられる選択済みを定義する selected属性は、
 HTMLでは、値を持っておりません。
  しかし、XHTMLでは、値のない属性値でも必ず値を記述しなければならない
 ため、seleted="selected" と記述し、属性値の最小化をエスケープします。


■スクリプトやスタイルシートの扱い
HTMLのように、文中にスクリプトを記述する場合、実体参照の文字をそのまま使
うことが XHTMLではできません。これは XHTMLで扱うデータはすべて #PCDATAと
して扱われているからです。
 スクリプトに用いられる演算子 < > && などは、実体参照文字なのでそのまま
記述することができないのです。

 CDATAセクション
 スクリプトのデータを CDATA(キャラクタ文字)として解釈させるために、CD
 セクションを設けた記述法があります。 CDATAでは、実体参照文字がそのまま
 使用することが可能なために設けられています。

 <script type="text/javascript">
  <!{CDATA{
          〜 実体参照を含んだスクリプトの記述 〜
 ]]>
  </script>

  ただし、CDATAセクションに対応したブラウザが少ないのが難点です。

スタイルシートをヘッダに埋め込むエンベッド式では、コメントタグを用います。
コメントタグを用いるのは、スタイルシートに対応していないブラウザへの配慮
としているためです。
 しかし、

 <style type="text/css">
  <!--
     スタイルシートの記述
 -->
  </style>

  このコメントタグもまた #PCDATAとして扱われるために、タグの始まり(開始
 区切子)として解釈されてしまいます。つまり、このタグで囲まれたすべての
 データがコメントとして扱われてしまうため、スタイルを実現できません。

  また、要素に直接記述するインライン方式は、XHTML1.1では禁止されていま
 すので使うことができせん。

 スタイルシートのインライン方式
 <p styel="color:#f00"> (注:HTML4.01、XHTML1.0では使用可能な記述。)

 スクリプトやスタイルシートは、外部に置く別の文書にした方法が安全ですし
 その方法を強く推奨されています。

 Webで扱う実態参照の詳しい解説
 http://www.scollabo.com/banban/apply/ap8.html

■XML宣言
基本的に XHTMLは XML文書なので、必須ではありませんが、文書の冒頭に XML宣
言の記述が強く求められています。

  <?xml version="1.0" encoding="Shift_Jis"?>

  これは、XML1.0で処理することを宣言した構文です。
 文書の文字コードが国際規格の UTF-16、あるいは UTF-8 以外を使用する場合
 には必須となります。
  記述はすべて小文字に限られますが、文字コードに関しては大文字と小文字
 を区別しません。

  なお、Windows版 MSIEでは、 XML宣言を記述した場合、互換型の表示になり
 ます。この XML宣言を省略すると標準型で表示します。定かではありませんが
  MSIEのバグと思われます。

  MSIEの互換型表示では、指定したフォントの大きさが一回り小さくなる現象
 が発生します。スタイルシートで、フォントのサイズを%単位で用いると解決
 されます。この点は早急に改良して欲しいところです。
 (Netscape、Opera、Mozillaなどには問題ありません。)

■XHTMLの文書型宣言 DTD(Document Type Definition)
HTMLで用いられる文書型宣言は、XHTML、XMLでも必須項目です。XHTMLでは、XML
宣言後に必ず記述します。

 デフォルト(初期値)の文書型宣言は次の通りです。
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

 この宣言は、W3Cが設定した XHTMLのDTD文書を参照する記述です。なお、大文
 字と小文字の区別があります。URIの省略は不可となっています。

 XHTMLでは、独自の DTD文書を作成することが可能です。
        ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
   DTDとは、タグセット(タグの集合体)を定義する文書で、固有のタグとは
 別の独自のタグとその意味を設定することが可能です。HTMLでは到底考えられ
 なかった、まさに拡張された機能の1つで、XMLでは当たり前になっています。
          ̄ ̄ ̄ ̄ ̄ ̄ ̄
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
       "http://www.scollabo.com/banban/xml/DTD/banban.dtd"> 

 これは、自分で独自に作ったタグセットを参照する URIの文書型宣言です。
  なお、講座では、いずれ独自タグを設定する DTD文書の作り方を解説する予
 定でいます。きっと面白くなると思います。

■名前空間の指定
 前回(第34号)解説した通り、XMLは固有の名前空間を利用きます。
  使われる属性は、xmlns属性を用いてその URIを記述します。

 「名前空間」という言葉は、本来は XML独自の専門用語ではなく、プログラム
 言語(C、C++、Prilなど)で一般的に用いられています。ここで言う「空間」
 というのは「集合」などを指します。
  XMLでは、タグの定義が示してある文書の位置を示す場合に「名前空間」とい
 う言葉がしばしば用いられます。語源は「Name Space」そのままです。

  例えば、チック・コリアという私のお気に入りのジャズ・ピアニストがいま
 す。一方で、演歌の大御所、北島三郎がいます。両者は「音楽」という共通が
 ありますが、「ジャズ」と「演歌」という異なった「空間」にあります。
  どちらが優れているかは別として、演奏スタイルが違うそれぞれの「空間」
 あるということが理解できるはずです。「ジャズ」と「演歌」は異なるものと
 考えると、「名前空間」の意味がお分かりになります。

  指定された名前空間が他とは異なっているものであることは明白です。

 基本的な名前空間は以下の通りです。
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

 W3Cが設定した名前空間を参照するものです。デフォルトの名前空間です。
 独自に作った名前空間が無い場合には、基本的にこの名前空間を使います。
 「参照」とは、「このタグセットを使います」ということを宣言するような
 ものと理解してください。

  xml:lang="ja" 言語コードを示すもので、HTMLでは lang属性を用いています
 が、XHTMLはXML適合のため、この属性を使わなければなりません。

  xml: は、XMLという「接頭辞」を用いることを意味しています。この意味は
 XMLで使用する言語コードの指定である、と覚えてください。XMLの接頭辞につ
 いては、講座を進めていく中で詳しく解説する予定です。

(余談)
XHTMLでは、ブラウザ側の独自仕様は使えません。
 しかし、名前空間を利用することによってタグの意味付けがされれば、かなり
話が違ってきます。マイクロソフトや、ネットスケープなどのブラウザを出して
いるメーカー側で、独自の名前空間を利用できるようにすれば、将来的には実現
できるかもしれません。


■XHTML文書の拡張子
作り上げた XHTML文書を保存する際の拡張子は「html」を指定します。xhtml と
指定しても保存されますが、MSIEではソースが表示されるだけになってしまいま
す。ただし、Netscapeは、まともに表示します。
 互換性を確保する意味でも「html」を指定する方が安全です。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XHTMLで記述したサンプル
下記の文書は、XHTML1.1で書いたものです。
 HTMLとどこが違うのかを参考までにお読みください。意外と簡単なのがお分か
りいただけると思います。XHTMLの作法に従っただけの文書です。
 なお、文書型宣言と名前空間は、初期値である W3Cの文書を参照しています。
(メールマガジンの横幅の制限があるため、改行して表現しています。)

■XHTML文書

<?xml version="1.0" encoding="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" />
<meta name="author" content="banban" />
<link rel="stylesheet" href="sample.css" type="text/css" />
<link rev="made" href="mailto:banban@scollabo.com" />
<link rel="index" href="index.html" />
<link rel="prev" href="prev.html" />
<link rel="next" href="next.html" />
<title>初心者のためのホームページ作り</title>
</head>

<body>
<h1>■ 初めてのXHTML講座</h1>
<div id="body">
HTMLの基礎講座を修了された方限定の講座のご案内です。講座教室の修学生を
募集しております。下記フォームよりご記入の上、お申し込みください。

<h2>XHTML講座 基礎編:申し込みフォーム</h2>
<form action="#" method="post">
<p>
<label>お名前:
<input type="text" value="" size="30" tabindex="1" accesskey="a" />
</label>

<label>メールアドレス:
<input type="text" value="" size="30" tabindex="2" accesskey="b"& /gt;
</label>
</p>

<p>性別:
<input type="radio" name="sex" value="man" tabindex="3" accesskey="c" />
男性
<input type="radio" name="sex" value="woman" tabindex="4" accesskey="d" />
女性<br />

年代:<select name="age" tabindex="5" accesskey="e">
<option value="10ages">10代</option>
<option value="20ages">20代</option>
<option value="30ages">30代</option>
<option value="40ages">40代</option>
<option value="50ages">50代</option>
<option value="60ages">60代</option>
<option value="age" selected="selected">お選びください</option>
</select>
</p>

<p id="ct">
<input type="submit" value="送信" tabindex="10" accesskey="s" />
<input type="reset" value="取消" tabindex="11" accesskey="r" />
</p>
</form>
<p>お申し込み後、当方より、詳しいご案内のメールを差し上げます。</p>
</div>

</body>
</html>


■CSS

上記XHTML文書で使用する外部スタイルシート(sample.css)
 (読みやすいように改行を多用して記述しています。)

@charset "Shift_Jis";

h1 {
     display: block;
     margin: 0 50px 1em;
   padding: 3px 1em;
     background-color: #369;
     color: #fff;
     font-size: 1.1em;
     font-weight: 700
    }

h2 { 
     display: block;
     margin: 1em 10px 10px;
     font-size: 140%; 
     color: #369
    }

div#body {
     display: block;
     margin: 10px 50px;
     line-height: 130%
    }

form {
     margin: 2px 2em;
    background-color: #fc0;
    padding: 10px 1em;
    border: thin solid black
    }

p#ct {
     display: block;
     text-align: center
    }

  XHTML実行結果
 http://www.scollabo.com/banban/magazine/sample/mmsample_065.html

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆解説
■XHTML文書より
<?xml version="1.0" encoding="Shift_Jis"?>
 XML宣言、文字コードはシフトJISを採用しています。
  文字コードが、UTF-18、UTF-8 以外では、必ず使用するエンコードを設定し
  なければなりません。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
 名前空間を指定しています。なお、言語コードの使用を指定する場合には、
 HTMLでは lang属性を利用しましたが、XHTMLでは xml:lang属性となります。
 間違えやすいので注意しましょう。xml:lang属性は必須です、つまり必ず使わ
 なければなりません。
  (名前空間の説明に関しては、前週のメールマガジンをご覧ください。)

<head>
 HTML同様ヘッダを設定します。この要素には profile属性があります。

 profile属性は任意ありで、省略しても何も問題ありません。
  プロファイルとは、メタ情報のプロパティの意味とその値が定義されている
 辞書のようなものです。HTML 4の仕様書では、仕様書に記載されているリンク
 タイプ以外のものを使う場合は head要素の profile属性でその定義を参照する
 こと、と定めています。しかし、この規定はほとんど有名無実化しています。
  あまり意味がないので、私は使ったことがありません。

<meta name="author" content="banban" />
 作成者の情報です。これも任意に設定するもので、必須ではありません。
 meta要素は空要素(エンプティ要素)なので、行末にスラッシュを記述します。

<link rel="stylesheet" href="sample.css" type="text/css" />
 外部スタイルシートの読み込みを設定しています。XHTMLでは、文書内にCSSの
 記述ができないので、外部からスタイルシートを読み込む必要があります。
  link要素も空要素なので、行末にスラッシュを入れます。

<link rev="made" href="mailto:banban@scollabo.com" />
 文書の制作者のメールアドレスを設定しています。
  この情報は、視覚系ブラウザでは無視されますが、非視覚系ブラウザでは制
 作者の情報が表示(発声)されます。アクセシビリティの達成のための必須の
 構文ですので、忘れないようにしましょう。

<link rel="index" href="index.html" />
<link rel="prev" href="prev.html" />
<link rel="next" href="next.html" />
 文書の索引(index)や前後関係を指定したもので、非視覚系ブラウザの配慮
 となり、必須の構文です。
  なお、サイト内のトップページでは、前(prev)のページが無いため、記述
 する必要はありませんが、次(next)のページの指定は必須です。同様に索引
 が無い場合にも indexは必要ありませんが、通常はサイトマップが記述してあ
 るページを指定します。

<div id="header">■ 初めてのXHTML講座</div>
 スタイルシートの div#header を呼び出しています。id属性を使用。

<form action="sample.cgi" method="post">
 フォームの設定。action属性は、文書を送信する先の URIを指定します。ここ
 では、データを CGIプログラムに送信して CGIが処理するようにしています。
 method属性は、文書の送信方法を指定します。ここでは、フォームのデータの
 みを送信するように指定しています。デフォルトは「get」で、URIやフォーム
 なども一緒に送信されます。
   (注:ここで指定した CGIプログラムはサンプルなので存在しません。)

<label>お名前:
 フォームのコントロール(入力や選択が可能な構成部品)にラベルをつけます。
 ラベルはコントロール1つに対して、1つしか設定できません。

<input type="text" value="" name="NAME" size="30" tabindex="1" 
accesskey="a" />
 ユーザに入力してもらうコントロールを設定しています。
 type="text" 1行の入力領域の設定

 value=""   コントロールの値。ラベルが既にあるので、省略しています。
        もし、ここで"NAME"とすると、コントロールの表示されます。

 name="NAME" この値はデータと共に送信されます。データがどの項目に当た
        るのかを判断するために必要な属性です。

 size="30"    1行の文字数を設定しています。ただし、入力文字数の制限は
         ありません。

 tabindex="1" タブキーの順序を設定します。非視覚系ブラウザではマウスが
        使えない環境の場合が多々あり、各コントロールの移動を容易
        にさせるための配慮として記述します。

 accesskey="a" この場合、Windowsであれば altキーと共に、Macintoshであれ
        ば、controlきーと共に用います。これも各コントロールの移動
        を容易にさせるための設定です。基本的に任意の1文字を設定。

<select name="age" tabindex="5" accesskey="e">
 メニュー・コントロールを設定しています。name属性の値はデータと共に送信
 されます。

<option value="age" selected="selected">お選びください</option>
 メニュー項目が選択された状態を示しています。
 HTMLでは、属性の最小化が許されているので、selected属性に値は必要ありま
 せんが、XHTMLでは必須です。

 ※フォームに関する具体的な作成は、メールマガジン第19号をお読みください。

■CSS文書より
このスタイルシートは別途外部に置くものです。XHTML1.1では、要素に直接スタ
イルを書くことができません。また、スタイルシートも #PCDATAとされています
ので、<!--  〜  --> と書くことができないために、外部に置く必要があるます。

@charset "Shift_Jis";
 スタイルシートがシフト_JISで記述されたことをブラウザに知らせるものです。
必須ではありませんが、安全策として記述しています。
 ただし、chraset属性を指定してあれば、この記述は不要です。

  charset属性を利用したスタイルシートの読み込み
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis" 
    charset="Shift_Jis" />

 当講座の WebサイトでのHTML、XHTMLの記述はすべて JIS(ISO-2022-JP)を使
 用しています。しかし、スタイルシートは Shift_Jisを用いている関係で、こ
 のように、chraset属性を使っています。
  実は、HTML、XHTML作成のテキストエディタと、CSS作成のエディタが異なり
 文書作成の文字コードが違ってしまうための苦肉の策です。


h1 { display: block; margin: 0 50px 1em; padding: 3px 1em;
     background-color: #369; color: #fff; font-size: 1.1em;
     font-weight: 700 }
  第一見出し要素の設定です。 id属性を使用。

 display: block 
  ブロックレベル要素としての設定ですが、元々h1要素はブロックレベル要素
  なので記述の必要はありませんが、もし、独自タグを設定する場合には必要
  になります。

 margin: 0 50px 1em;
 上側の余白は無し、左右の余白を50ピクセル、下側を1文字分の余白に設定。

 padding: 3px 1em;
 コンテンツの内側の余白の設定、上下に3ピクセル、左右に1文字分を設定。

 background-color: #369; color: #fff;
 この要素内の背景色を紺色に、文字色を白にしました。

 font-size: 1.1em; font-weight: 700
 文字の大きさを標準の1.1倍、フォントを強調させています。


h2 { display: block; margin: 1em 10px 10px; font-size: 140%; 
     color: #369 }
 第2見出し要素へのスタイル付けです。内容は以下の通りです。

 margin: 1em 10px 10px
  見出し要素の上側に1文字分、左右と下側に10ピクセル分の余白を設定。

 font-size: 140%; color: #369
  文字の大きさを標準から 140%の大きさに設定しています。色は水色です。


div#body { display: block; margin: 10px 50px; line-height: 130% }
  汎用ブロックレベル要素に関するスタイルを設定しています。id属性を使用。

 margin: 10px 50px;
 上下の余白を10ピクセル、左右の余白を50ピクセルずつ設定。

 line-height: 130%
 この要素内のテキストの行間を文字の大きさの 130%としました。


form { margin: 2px 2em; background-color: #fc0; padding: 10px 1em;
    border: thin solid black }
 フォーム全体のスタイルシートの設定です。

 margin: 2px 2em;
 上下の余白は2ピクセル分、左右の余白は2文字分に設定。

  background-color: #fc0;
 フォーム全体の背景色をオレンジ色に設定しました。

 padding: 10px 1em;
 コンテンツの内側(枠線の内側)に余白を設定しました。
 上下に10ピクセル、左右に1文字分の余白を設定。

 border: thin solid black
 コンテンツに枠線を表示させる設定です。黒色の細い枠線を指定しています。


p#ct { display: block; text-align: center }
 この段落内のテキストをセンタリングさせる設定です。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XHTML対応ブラウザ
XMLに完全に対応したブラウザは非常に少ないのが実情です。しかし、XHTMLでは
比較的多くのブラウザで対応済みとなっています。

 Windows版、Macintosh版ともに MSIE 5.0 以降のブラウザはすべて対応済み
 となっています。MSIE 4.5 の初期仕様では、1部のソースが表示されてしま
 う不具合が報告されていますが、後期のバージョンでは対応されています。

 Netscapeでは、バージョンが 6.0 以降のものが対応済みです。
 なお、Netscape Navigator 4.x や Netscape Communicator 4.x は最悪です。
 このバージョンのブラウザは、HTML 4.0 に対応済みといわれていますが、ス
 タイルシート実装は実に情けなく、バグも相当多く報告されています。不可。

 最速といわれている Operaでは、バージョン 5.08 以降のものは対応済みです。
 それ以前のブラウザはまだ検証していないので分かりません。あしからず。

 Lynxや WWWC などのテキストブラウザは、テキストのみの表示ですので、問題
 ありません。 XHTMLは文書の構造化を記述するマークアップ言語ですから、テ
 キストブラウザで XHTMLの弊害は報告されていません。

 音声ブラウザでは、ブラウザのエンジンが MSIEや Netscapeを併用しますので
 最新のブラウザがインストールされていれば問題ありません。

 最近発表されたばかりのアップル社の「Safari:サファリ」という非常に早い
 と評判のブラウザは、XHTMLに対応済みと発表されています。
  ただし、このブラウザは、Mac OX 1.2(Jaguar)のみ動作するブラウザ。私
 の マックは少し古いためインストールできず、そのため検証していません。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XMLを理解する
XHTMLは、XML文書です。そのためには XMLを知る必要があります。
 講座では、いずれ早い段階で XMLについて深く解説する予定で、現在資料を揃
えて準備しています。おそらく、第38号ではタグの作り方を利用した XML文書の
作成を交えながら説明できると思います。ご期待ください。

 ※なお、当講座で XMLサンプルを予定していますが、ブラウザの対応状況に対
  して非常な不安を持っています。その時には改めてご案内いたします。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML タグの解説 --- head要素
HTMLでは、大きくヘッダと本体の2つの文書構造に分かれています。本体に記述
する要素は、body要素で、この中にさらに幾つかの構造的な記述がされます。

 ヘッダでは、HTML文書自身の情報や文書のタイトルなどが収められます。HTML
の情報は、HTTPサーバやブラウザに、他の文書から見た URIや前後の位置関係や
文書内容の文字コード、文書の形式などを示すMIMEタイプなどを送信します。

 また、ヘッダ内でブラウザに表示される唯一の要素は、title要素内で記述し
ます。

 子要素として持てる要素: meta、link、titile、style、script要素など
 属性:特になし
  終了タグ:必須ではありませんが、記述するように心がけましょう。

 ヘッダは、HTML文の最初に記述されます。

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

 ※ここの「タグの解説」とは、あくまでHTMLにおける仕様を説明しています。
  決して XHTMLではありませんのでご注意ください。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

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

 次回は、XHTML講座をちょっとお休みして、JavaScript講座 第5回を予定して
います。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
 ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。

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

誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。

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

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

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

<えでぃた〜ず・るーむ>
ご存知のように8年前の今日、阪神大地震がありました。
 当時、震災直後に神戸に行く用事があって出かけたのですが、本当に言葉を失
う悲惨な状態で、今なおはっきりとその光景が脳裏に焼き付いています。

 被災された方が切望していたのは、食料や水や毛布ではなく、家族の安否情報
でした。どうしたら家族の無事が分かるのか、何処へ行けば情報が得られるのか
自分の無事をどうやって家族に知らせたらいいのか、本当に深刻でした。

 その当時、早くもインターネットで震災の安否情報を流していました。ボラン
ティアの手によって、ノートパソコンを片手に被災者に片っ端から情報を聞き出
し、その場でHTMLを作って、携帯電話を使ってサーバにファイル転送していたの
です。

 無論、被災者の方たちにはインターネットにアクセスすることはできなかった
でしょうが、ネットを見た人たちが口コミになって被災者たちのへ伝えられまし
た。当時の環境を考えれば、安否情報を絶え間なく送り出した方には本当に頭が
下がります。

 一方で、2001年9月11日のアメリカで起きた同時多発テロでは、貿易センター
ビルに集中していた圧倒的多数の Webサーバがビルと共に破壊され、数日間アク
セス不能に陥り、情報が得られなくなりました。神戸とはえらい違いです。

 天災などの災害時には、確かな情報こそがその後を大きく分ける分水嶺となる
可能性を秘めています。ネットも携帯電話も使えなくなったら、最後に残るのは
小型の電池で動くラジオかも知れません。
 でも、ラジオ局がやられたらどうなるかって?

 ラジオは強いのです。AM(増幅変調)ですから、それほど大きな設備は要らな
いし、補助電源を使って地面に電波さえ送り込めば何とか聞こえるものです。
 それこそ大昔の5球スーパー(真空管式)のラジオなんて、初めからアンテナ
は無かったのです。そういえば親父がラジオから電線みたいなものを引っ張り出
して窓の外の地面に垂らしたら、すごくよく聞こえたのを覚えています。

 神戸でも地元ラジオ局が大活躍で、インターネットからの安否情報をそのまま
読んで終日伝えていました。被災者にとっては一縷の望みを伝えていたわけです。
 ローテクと言われるラジオですが、最後に頼れる情報収集の手段です。1つく
らいは手に入れておきたいものです。そのうちネット連動ラジオが売られるよう
になるかもしれません。(もう売られているのかな?)

 (我が家には手巻きで電気を作るラジオがありますが、問題なのは去年の引越
しで、どこにしまってあるのかが分かりません。)

 手巻きラジオ
 http://www.anabas.co.jp/best/best.html

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

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

            Copyright(C) 2002-2003  www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓



Copyright(C) 2002-3003 banban@scollabo.com