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

Web作成支援

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

プレーンテキスト版バックナンバー

今週<第41号>マガジンのおさらい

                   毎週金曜日配信 What's New 2003/2/28
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
 今週の課題 ■ XHTML講座 第6回 概念XHTML1.1モジュール定義

XHTML1.1モジュールとは

W3Cは、XHTMLのユニバーサル化を策定し、XHTML1.1の勧告するわずか1ヶ月前に、XHTMLMODを勧告し、XHTMLの全要素をモジュール化しました。このモジュールは DTDの書式で細かく定義されており、XHTML作成者は、必要なモジュールだけを抽出して独自タグセットを作ることが可能になりました。

各モジュールの定義と簡単なサンプルを用いて解説します。

中核モジュール

構造モジュール

要素意味 最小内容
body文書の本文に当たる部分Block,Heading,List,Table
head文書情報などを記述するtitle
htmlルート要素head, body
title文書の題名#PCDATA(text)
文書の構造を示すモジュールで、必須の項目です。html要素はルート要素と呼ばれ、すべての要素の頂点に位置し、この要素で囲まれたものを XHTML文書と呼びます。

テキストモジュール

要素意味 最小内容
abbr略語の説明#PCDATA(inline-level)
acronym発音できない略語の説明#PCDATA(inline-level)
address住所などの記述#PCDATA(block-level)
blockquote長文の引用#PCDATA(block-level)
br強制改行empty
cite引用文献の参照先#PCDATA(inline-level)
codeプログラムコードの記述#PCDATA(inline-level)
dfn定義済み用語の指定#PCDATA(inline-level)
div汎用ブロックレベル要素#PCDATA(block-level Flow)
em強調文字#PCDATA(inline-level)
h1〜h6見出し#PCDATA(block-level)Heading
kbdキーボード入力の文字#PCDATA(inline-level)
p段落#PCDATA(block-level)Paraglagh
pre整形済みテキストの表示#PCDATA(block-level)
q短文の引用#PCDATA(inline-level)
sampサンプルに用いる文字列#PCDATA(inline-level)
span汎用インラインレベル要素#PCDATA(inline-level)
strong強調文字#PCDATA(inline-level)
var変数などの表現#PCDATA(inline-level)
abbr、acronym要素などは、一般的にツールチップが表示される場合があります。code、kbd、pre、samp要素では、一般的に固定ピッチフォントで表示されます。div、span要素は、汎用的に用いられるもので、多くはスタイルシートで見栄えを設定する場合に用いられるケースが多いようです。

なお、p、pre、h1〜h6要素の中には、他のブロックレベル要素は配置することができません。

テキストのサンプル

ハイパーテキストモジュール

要素意味 最小内容
a他文書へのリンクを表す
例:<a href="index.html">Home</a>
#PCDATA(inline-level)
XMLにはない機能で、他の文書の参照に利用します。なお、a要素の name属性は廃止されておりますので、変わりに id属性を利用します。

リストモジュール

要素意味 最小内容
dl定義済みリストの設定dt, dl
dt定義済みリスト項目#PCDATA(inline-level)
dd定義済みリスト補足説明#PCDATA(inline-level)Flow
ol番号つきリストの設定li
ul番号なしリストの設定li
liリスト項目#PCDATA(inline-level)Flow
dd、li要素とも、ブロックレベル要素を配置して利用することが可能です。ol、ul要素ともに配置できるのは、li要素のみとなりますので、気をつけてください。 リストのサンプル

テキスト拡張モジュール

表示(プレゼンテーション)モジュール

要素意味/サンプル 最小内容
b強調文字 物理要素#PCDATA(inline-level)
big大きいフォントサイズ#PCDATA(inline-level)
hr罫線empty
i斜体文字 物理要素#PCDATA(inline-level)
small小さいフォントサイズ#PCDATA(inline-level)
sub上付き文字 例:2の2乗 22#PCDATA(inline-level)
sup下付文字 例:H2O#PCDATA(inline-level)
ttテレタイプ文字 物理要素#PCDATA(inline-level)
このモジュールは、単純なプレゼンテーション関係のマークアップのための要素、属性、最小内容モデルを定義しています。b、big、i、small、ttなどはユーザ環境に依存する物理タグと呼ばれるもので、できるだけ使用しないようにお勧めします。これらの要素が XHTMLにも継承されているとは、少々驚きです。物理タグのためサンプルはありません。

編集モジュール

要素意味/サンプル 最小内容
del抹消線付文字 例:抹消されました#PCDATA Flow
ins追加されたテキスト 例:追加しました#PCDATA Flow
この2つの要素は、インラインレベルとブロックレベルの性格を持ち、必要に応じて利用することができる一風変わったタグです。それぞれ、後で編集する場合に用いられるものです。

双方向テキストモジュール

要素意味/サンプル 最小内容
bdo左、右の文字方向 例:ヘブライ語#PCDATA(inline-level)
このモジュールは、要素の内容に双方向規則を宣言できる要素を定義します。つまり、文字の方向がが左から右へ、あるいは右から左へのどちらかを定義するもので、アラビア語やヘブライ語などに適した文字方向を指定できる要素が組み込まれています。

フォームモジュール

要素属性 最小内容
formフォームの設定#PCDATA(block-level)
input入力コントロールの設定empty
label入力コントロールのラベル#PCDATA(inline-level)
selectメニューの設定option
optionメニュー項目#PCDATA
textareaテキスト入力領域の設定#PCDATA
buttonボタンの設定#PCDATA(inline-level)
fieldsetコントロールのグループ化#PCDATA(inline-level)
legendグループ化したラベル#PCDATA(inline-level)
optgroupメニュー項目のグループ化option
フォームと各コントロールの設定をまとめたモジュールで、XHTML Basicでは、グループ化などの要素が使えません。また、フォームには最低限1つ以上のコントロールを含まなくてはいけません。

基本的にフォームはブロックレベル要素ですが、form要素直下には、段落要素などのブロックレベル要素を配置しなくてはいけません。 フォームのサンプル

表(テーブル)モジュール

要素意味 最小内容
captionテーブルのキャプション#PCDATA(inline-level)
tableテーブルの設定caption,tr,tbody,thead,colgroup,etc
tdデータセル#PCDATA Flow
thヘッダセル#PCDATA Flow
tr横列のセルの並びtd, th
col縦列のセルの設定empty
colgroup楯列のセルのグループ化col
tbodyテーブル本体のグループ化tr
theadテーブルヘッダのグループ化tr
tfootテーブルフッタのグループ化tr
表を構成するモジュールです。XHTML Basicでは、テーブルを入れ子にすることができません。tbodyは、設定がない場合にはブラウザ側で自動的に補完されることがあります。なお、このページの表では、table、tr、td、colgroup、col、thead、tbody などの要素を使用しています。

テーブルをレイアウトに使うなと、W3Cは言っていますが、私の場合は無視しています。W3Cでも、トップページにテーブルでレイアウトを構成しています。ずいぶんだよなぁ・・  テーブルのサンプル

画像モジュール

要素意味 最小内容
img静止画像の貼り込み 例:サンプルの絵empty(inline-level)
一般的に GIF、JPEG、PNG形式などの静止画像を表示するために用いられるモジュールで、クライアント・サーバ・サイドもサポートしています。今後は、object要素に集約される可能性があります。

クライアント・サイド・イメージマップモジュール

要素意味 最小内容
aマップの個々の領域の設定-
areaマップ領域empty
imgマップ画像empty(inline-level)
inputマップの呼び出しempty(inline-level)
mapマップの設定(block-level)
objectマップ画像objectのみ適用
XHTML1.1では、img要素の usemap属性にハッシュマーク ( # ) が使えないため、基本的にイメージマップを実現することは不可能です。XHTML1.1における usemap属性の値は IDREF のために、英文字しか使うことができません。この点の改良を望みたいものです。

サーバ・サイド・イメージマップモジュール

要素意味 最小内容
imgイメージマップに利用する画像の指定empty(inline-level)
inputマップの呼び出しempty(inline-level)
クライアント・サイド。イメージマップは、ブラウザ側で実行するイメージマップですが、サーバ・サイドは Webサーバ上で実行させるために、主に CGIを利用することが一般的です。これも XHTML1.1では実現不可能となっています。

オブジェクトモジュール

要素意味 最小内容
objectオブジェクトの指定#PCDATA Flow
param利用するオブジェクトのパラメータ設定empty(inline-level)
動画、アニメーション、ビデオ映像などを扱うモジュールです。将来的には静止画もこのモジュールに取り込まれていくといわれています。ただし、残念ながらブラウザ側でのサポートが遅れており、実現までにはまだ時間がかかりそうです。

メタ情報モジュール

要素意味 最小内容
metaサーバやブラウザに文書情報を伝えるempty
このモジュールは、HTTPサーバ、ユーザエージェントなどに文書が持つ各種情報を伝え、文書が正確に表示できるようにするための手続きを行います。多くは MIMEタイプが用いられ、ブラウザに情報を提供するといわれています。また、検索サーチに対応するための記述がありますが、最近ではあまり検索されることがなくなりました。

組込みイベントモジュール

属性名意味利用される要素
onmouseoverマウスが触れたら発生するa
onmouseoutマウスが離れたら発生するa
onclickマウスがクリックされたら発生するa
onkeyplessキーが押されたら発生するa
onblurフォーカスを失ったら発生するarea,form
onfocusフォーカスを得たときに発生するarea,form
onloadページが読み込まれたら発生するbody
onunload他のページに移動したら発生するbody
onrest取り消しボタンを押されたら発生するform
onsubmit送信ボタンが押されたら発生するform
スクリプトがなくても単独で動作するイベントハンドラを集めたモジュールです。もちろん、スクリプトと連動させることも可能です。

スクリプトモジュール

要素属性 最小内容
scriptスクリプトの設定#PCDATA
noscriptスクリプト未対応ブラウザへの記述#PCDATA
スタイルシート同様、内容が #PCDATAのため、直接文書に埋め込むことができません。CDセクションを設けるか、外部スクリプトを用意しなくてはなりません。CDセクションに対応したブラウザが少ないので、外部スクリプトが最も推奨される方法です。

リンクモジュール

要素属性 最小内容
link外部文書の参照empty
このモジュールは、外部文書へのリンクを定義するために用いる要素を定義します。これらのリソースは、ブラウザが、XHTML文書を処理する能力を向上させるために、度々用いられています。

レガシー、ターゲット、アプレット、フレームなどのモジュールは、XHTML1.1では利用することができないため、掲載を割愛しました。あしからず。

なお、各要素タイプの詳細は、XHTML1.1リファレンス を参照してください。



Valid XHTML 1.1! Copyright(C) 2002-2003 ばんばん banban@scollabo.com