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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第64号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/8/29
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第11回 --- フレーズ要素
   ■ XML講座 第3章 --- XML文書の作成
HTML講座 --- フレーズ要素
情報を提示する手段として、テキストは非常に優れた伝達力を持ち、作者にとっても訪問者にとっても有効に作用します。
テキストを利用する際、場合によってはある部分の文字を強調したり、斜体(イタリック体)にしたり、あるいは下線や抹消線などを表示させる必要に迫られます。
HTML4.01では、そうした「意味のある」テキストに利用する整形処理用のタグが提供されています。しかし、あくまで「意味のある」場合に利用するもので、「意味なく」連発するのは、むしろ見苦しくなります。その点に十分留意して利用するようにしましょう。
文字の強調
文字を強調するという意味は、その部分が他の文章よりも特に強調したい場合に設定します。
文字を強調したい場合には、その要素内容に em、さらに強く強調したい場合には strong などのタグを使います。
この部分は <em>強調</em> されます
この部分は特に強く <strong>強調</strong> されます

この部分は 強調 されます

この部分は特に強く 強調 されます

em要素は、単に強調する場合に利用し、一般的な視覚系ブラウザでは「斜体:イタリック体」で表示されます。
一方 strong要素は、さらに強く強調したい場合に用いられ、一般的な視覚系ブラウザでは「太字」で表示されます。
文字の抹消
以前書いた文章の一部に変更や削除部分が発生した場合、その部分を残して表示するときに del要素を利用します。
ばんばん氏は <del>心臓病で</del> 緊急入院しました

ばんばん氏は 心臓病で 緊急入院しました

一般的な視覚系ブラウザではその範囲に抹消線がつけられて表示します。抹消した場合に datetime属性を、あるいはその情報の詳細が提供されている文書の所在を示す cite属性を利用して、その時の日時、詳細などを設定することをお勧めします。
なお、del要素は、インラインレベル、あるいはブロックレベル要素としても利用できます。
文字の追加
文章のある部分に追加情報が発生した場合、ins要素を利用して文章を追加・挿入します。
ばんばん氏は <ins>重篤な脳障害によって</ins> 緊急入院しました

ばんばん氏は 重篤な脳障害によって 緊急入院しました

一般的な視覚系ブラウザではその範囲に下線がつけられて表示します。追加した場合に datetime属性を利用して、その時の日時を設定します。
なお ins要素は、del要素同様にインラインレベル、あるいはブロックレベル要素としても利用できます。
サンプルの例示
コンピュータのプログラム・ソースをサンプルとして表示させたい場合、sampcode要素を利用します。なお HTML2.0で定義されていた xmp要素は既に廃棄されており、現在は使われていません。
Perl言語では、<samp>if($day = $MONTH[$mon])</samp> のように記述します
JavaScriptでは、<code>if(myDay = myMonth(1))</code> のように記述します

Perl言語では、if($day = $MONTH[$mon]) のように記述します

JavaScriptでは、if(myDay = myMonth(1)) のように記述します

一般的な視覚系ブラウザではこれらのタグの範囲を、等幅フォントで表示されます。
数式、化学式を表現する
数式や化学式では、上付きや下付き文字が登場します。厳密な数式表現はできませんが、簡単な表示には以下のように subsup要素を利用します。
水の化学式は H<sub>2</sub>O です
1立米とは、1m<sup>3</sup> です

水の化学式は H2O です

1立米とは、1m3 です

一般的な視覚系ブラウザでは上記のように、上付き、下付きで表示しますが、非視覚系ブラウザでは無視されます。
まとめ
ここに掲げたタグは、視覚系ブラウザではそれぞれブラウザの仕様によって表示されます。非視覚系ブラウザでは、その意味だけを伝えます。
つまり、仕様書では表示方法については決められていないのです。あくまでも「意味」を持つ要素内容をマークアップするために利用され、表示方法はブラウザに依存します。
これらのタグを使って太字に見せる、イタリック体にする、あるいは下線や抹消線をつけるだけの目的で利用されることは、厳密に言えば文法違反となります。
また、太字に見せる b要素、下線を表現する sや、strike要素、イタリック体を表示する i要素などは、「意味のある」テキストとしては適応されません。これらのタグは「物理タグ」と呼ばれ、ユーザ環境に依存する性格を持っていますので、あまりお勧めできません。
HTML4.01では、fontタグ同様、非推奨 とされています。フォントや文字データに関する設定は、スタイルシートを利用しましょう。
XML初級講座 --- XML文書の作成

前回お伝えしたとおり、XML文書は、以下の3つの記述規則があります。

こうした規則に従って作成された XML文書を「整形式XML文書」と呼びます。正しい整形式XML文書は、XMLを解釈(パース)できるソフトウェア(XMLパーサ)によってメモリの読み込みが許可されます。
つまり、XML文書はシンプルでありながら、曖昧さがない極めて厳格な書式によって記述されなければならないということを覚えてください。
XML文書の作成
XML文書を構成するのは、XML宣言、DTD(文書型宣言)、XMLデータの3つから成り立っています。DTDについての詳しい解説は次回に譲りますが、今回は XMLデータを作成します。
以下の XMLを参照してください。
 <?xml version="1.0" encoding="UTF-8"?>
    <magazineinfo>
      <book>初心者のためのホームページ作り</book>
      <author>ばんばん</author>
      <content>XML初級講座</content>
    </magazineinfo>
この XMLデータ中は、すべて magazineinfo要素内に配置されています。つまり、この要素を最上位に位置したツリー構造であることが理解できるでしょう。
この XML文書は、このままではパーサに読み込むことができません。無論 Webブラウザでも表示することができません。
先ほども説明したとおり、DTDがすっぽりと抜け落ちたぐの構造・意味が何も定義されていないのです。整形式 XML文書を「検証済み XML文書」に変換するためには、必ず DTDが必須となります。
XMLデータの文法を定義する DTD
DTDは、XMLデータの記述方法や構造といった文法を定義します。DTDがなければ、XMLデータはコンピュータ間のデータの流通をスムースに受け渡すことができません。
XMLデータは自由な構造で作成することができますが、そのためにある規定を設けて、その規定に従って構造化します。その XMLデータの構造こそ、DTDと呼ばれる文書の型を定義した情報で規定することができます。

DTDを利用した規定は、次の4つの宣言を使って定義します。

この4つの宣言をまとめて、マークアップ宣言Markup Declaration)と呼びます。

次回は、今回作成した XMLデータに基づいて、DTDについて詳しく解説します。


Valid XHTML 1.1! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp