マークアップ言語としての XHTML 文書の作成

ショートカットキーの (Z) を押すとここに簡単に戻ることができます.

はじめに

XHTML (eXtensible HyperText Markup Language) とは,HTML (HyperText Markup Language) に XML がもつ柔軟性・拡張性を取り入れたものであり,文書管理・データベース化を簡単に行うことができます.

XHTML 文書は,テキストエディタで作成し,ブラウザ(しばしば UA と呼ばれる)で表示・印刷することができます.XHTML 文書は,ワープロソフトのように見た目通り(WYSWYG: What You See Is What You Get)に作成することができるソフトもありますが,論理構造を正しく反映しないこともあり,データベース化の障害となるおそれがあります.それゆえ,XHTML 文書をテキストエディタで作成することで,論理構造がしっかりとし,文書のデータベース化や後々の編集に役に立ちます.XHTML 文書を作成するにあたり,「ez-html」や「秀丸」のような入力支援機能が備わったテキストエディタを利用することで,効率よく XHTML 文書を作成することができます.

マークアップ (markup) とは,「文字列」が見出しなのか段落なのかなどを指し示すものです.読み手は,前後の文や文字の大きさなどから,文字列が見出しや段落であることを判断することができますが,ブラウザはそのような判断をおこなうことができません.文字列にマークアップを施すことで,ブラウザは「文字列」が見出しなのか段落なのかを判断することができます.マークアップによって,文書の整形や文書管理やデータベース化がかなり効率的に行うことができます.その上,書き手がマークアップに注意しながら文書を作成すると,見出しや段落といった文書構造に注意するので,文章の論理構造も自然としっかりとしたものになります.

XHTML 文書では,文字の装飾などの視覚的効果は CSS に委ねることで,論理構造と視覚的効果を明示的に分離します.

動的なウェブデザインと XHTML 文書

XHTML をはじめとした HTML の規格は,文書管理・データベース化に重点を置いています.それゆえ,XHTML文書は,Flash や Javascript などを駆使した動的に生成されるページには向いていません.そのようなページを作るならば, HTML 4.01 Transitional の規格に合わせて作成しましょう.

XHTML 文書の構造

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>
(ヘッド部分)
</head>
<body>
(本文)
</body>
</html>

XHTML 文書はすべて小文字で書かなければなりません.1行目は XML のバージョン (1.0) と文字のエンコード(Shift_JIS) を指定します.2,3行目は,XHTML のバージョン(XHTML 1.1)を指定します.4行目では HTML の開始を宣言します.ヘッド部分では,著者名やタイトルなどを指定します.

XHTML 文書のファイル名は半角英数字をつけて保存します.拡張子は本来何でも構いませんが,htmlxhtml を用いることが通例となっています.ただし,xhtmlIE6 では正しく認識されないので,html を用いるのが無難のようです.

ヘッド部分では文書情報を記述します.

meta 情報

ページ・タイトルや著者名などの情報は meta 情報に記入します.

<meta name="属性" content="値" />

主な meta 情報は次の通りです.

meta 情報
属性
author著者名
titleページタイトル
copyright著作権情報
descriptionページの説明
keywords検索エンジン用のキーワード.各単語を「,」(カンマ)で囲みます.

ページ関係

link 情報は,複数のページ関係を表します.

<link rel="関係" href="URI" />

主なものは次の通りです.

ページ関係
関係URI
next次のページ
prev前のページ
startホームページ
contents目次となるページ
index索引ページ
glossary用語集のページ
appendix付録ページ
helpヘルプページ
copyright著作権情報に関するページ

本文

XHTML 文書の本文は,文字列を見出しや段落といったマークアップを施すことで文書の論理構造を作ります.

見出し

見出しは <hn>〜</hn> で囲みます.nには,1 から 6 までの数字が入ります.たとえば,h1を「章」,h2を「節」というように割り当てるとよいでしょう.

入力例
<h1>第 1 章 地球温暖化問題とは</h1>
     <h2>第 1 節 世界各地の異常気象</h2>

hnは,見出しをマークアップするものであり,文字を大きくする命令ではありません.また,章の直下に小節がないのと同じように,h1 の直下に h3 を用いることは推奨されません.

段落

段落は,<p>〜</p>で囲みます.一般の文書では,段落のはじめには1文字分の空白をあけることが求められていますが,このような空白は CSS で指定することができるので,段落のはじめに1文字分の空白をあける必要はありません.

日本語の中に英数が混在する場合は,英数の両脇に自動で空白が挿入する CSS はありますが,未サポートなので,各自で英数文字の両脇に半角空白を入力する必要があります.

テキストエディタ上で改行コードを入力してもそれらは無視され,表示上は改行されせん.改行されるのは段落が終了したときのみです.

入力例
<p>文章を普通に入力します.
ここで改行しましたが,ブラウザの表示では改行されていません.</p>
<p>ここで段落が改まりました.</p>
出力例

文章を普通に入力します. ここで改行しましたが,ブラウザの表示では改行されていません.

ここで段落が改まりました.

段落中の空白

段落内に半角空白を2個以上連続で入力してもそれは1個の半角空白とみなします.ただし,全角空白は「文字」とみなされ3個連続入力すると,全角空白が3個挿入されます.しばしば全角空白を使ったレイアウトの調整が見受けられますが,それらは,マークアップ言語である XHTML (または HTML) 文書からしてみれば,全く無駄なことです.環境によってはレイアウトが崩れるもととなりますので,レイアウトは CSS に委ねましょう.

箇条書き

番号つきの箇条書き

番号つきの箇条書きは,ol を使用します.

入力例
<ol>
      <li>二酸化炭素が増える</li>
      <li>熱が大気中に滞留する</li>
      <li>気温が上昇する</li>
</ol>
出力例
  1. 二酸化炭素が増える
  2. 熱が大気中に滞留する
  3. 気温が上昇する

番号なしの箇条書き

番号なしの箇条書きは,ul を使用します.

入力例
<ul>
     <li>発電所・工場からの排出</li>
     <li>自動車の排気ガス</li>
</ul>
出力例

語句の説明

語句の説明のための箇条書きは,dl を使用します.語句は dt で囲み,説明は,dd で囲みます.

入力例
<dl>
<dt>温室ガス</dt>
     <dd>大気中の熱を保温する性質をもつガスのこと</dd>
     <dd>主な温室ガスとしては,二酸化炭素,メタン,
     亜酸化窒素,フロンがある.</dd>          
</dl>
出力例
温室ガス
大気中の熱を保温する性質をもつガスのこと
主な温室ガスとしては,二酸化炭素,メタン,亜酸化窒素,フロンがある.

箇条書きの入れ子

箇条書きの中に箇条書きを書きたい場合は,次のように入力します.

入力例
<ul>
     <li>リンゴ
          <ul>
               <li>赤リンゴ</li>
               <li>青リンゴ</li>
          </ul></li>
     <li>ブドウ
          <ul>
               <li>赤ブドウ</li>
               <li>白ブドウ</li>
          </ul></li>
</ul>
出力例

引用

短い文の引用

短い引用は,q を用います.

入力例
<p>地球白書02-03によると,
<q>鳥類種の約12%が今後100年で絶滅するであろう</q>
と予測している.</p>
出力例

地球白書02-03によると, 鳥類種の約12%が今後100年で絶滅するであろう と予測している.

長い文の引用

長い文の引用は blockquote を用います.

入力例
<p>刈屋武昭著『金融工学とは何か』では,
金融商品とは次のように説明している.</p>
     <blockquote>
          <p>金融商品とは,価値貯蔵機能をもつ金融資産を
          はじめとして,リスクを制御する保険,
          デリバティブ(派生商品)など,金融の機能を
          促進する金融手段をいう.</p>
     </blockquote>
出力例

刈屋武昭著『金融工学とは何か』では,金融商品とは次のように説明している.

金融商品とは,価値貯蔵機能をもつ金融資産をはじめとして,リスクを制御する保険,デリバティブ(派生商品)など,金融の機能を促進する金融手段をいう.

blockquote は,文字通り「引用」であり,これを他の用途に(たとえば,単なるインデントとして)用いることはできません.

表は,table を使用します.tr は「行」,th は「項目」,td はセルを表します.summary は,表の要約を示します.また,表には,caption が用意されています.

入力例
<table summary="あんパン:80円,メロンパン:120円,
カレーパン:140円">
<caption>表1: パンの価格</caption>
<tr><th>品名</th><th>あんぱん</th>
<th>メロンパン</th><th>カレーパン</th></tr>
<tr><th>価格</th><td>80</td>
<td>120</td><td>140</td></tr>
</table>
出力例
表1: パンの価格
品名あんぱんメロンパンカレーパン
価格80120140

セルの連結

td, th において,セルの連結に関するオプションが用意されています.

<td colspan="連結する横に並ぶセルの個数">
<td colspan="連結する縦に並ぶセルの個数">
入力例
<table summary="あんパン:80円,メロンパン:120円,
カレーパン:140円">
<caption>表1: パンの価格</caption>
<tr><th>種類</th><th colspan="2">菓子パン</th>
<th>総菜パン</th></tr>
<tr><th>品名</th><th>あんぱん</th>
<th>メロンパン</th><th>カレーパン</th></tr>
<tr><th>価格</th><td>80</td>
<td>120</td><td>140</td></tr>
</table>
出力例
表1: パンの価格
種類菓子パン総菜パン
品名あんぱんメロンパンカレーパン
価格80120140

図の挿入はimgを使用します.

<img src="画像のファイル名" 
width="画像の幅" height="画像の高さ"
 alt="画像の説明文" />

幅の指定は通常 px (ピクセル) で指定し,px を省略します.

通常,図は段落などの中に書きます.図を別行立てて表示したい場合は,div を使用します.class は,クラスを表します.詳細は,次節の CSS を利用した HTML 文書の整形 を参照してください.

<div class="img">
<img src="画像のファイル名"
 width="画像の幅" height="画像の高さ"</div>
 alt="画像の説明文" />
</div>

図にキャプションをつけたい方法は,CSS とブロック要素の配置を参照してください.

ハイパーリンクを指定すると,他の XHTML 文書や,ウェブサイトへ移動することができます.

<a href="URI">ページ名</a>

たとえば,検索サイト Google (グーグル: http://www.google.com) へ移動したい場合は,次のようにハイパーリンクを指定します.

入力例
<a href="http://www.google.com">Google</a>

絶対パスと相対パス

行きたいページをhttp://から指定する方法を絶対パスといいます.これに対して,同一サイト内を移動する場合は,相対パスで指定すると便利です.

http://www.xxx.com/index.html から http://www.xxx.com/main.html へ移動したい場合,次のように指定します.

入力例
<a href="./main.html">メインページ</a>

./は現在のディレクトリ(階層)を表します.これは省略することができます.

http://www.xxx.com/index.html から,http://www.xxx.com/foo/hoge.html へ移動したい場合は次のように指定します.

入力例
<a href="./foo/hoge.html">ほげほげのページ</a>

逆に,hoge.html から,一つ上の階層のファイルである index.html へ移動する場合は,次のように指定します.

入力例
<a href="../index.html">インデックス</a>

../ は1つ上のディレクトリを表します.2つ上のディレクトリへ移動したい場合は,../../ というように,../ を2つ書きます.

テキストの強調など

文字を強調するには,文字を em で囲みます.より強い強調にするには,strong で囲みます.

文字にルビを振ることもできます

<ruby>
     <rb>漢字</rb>
     <rp>(</rp><rt>よみ</rt><rp>)</rp>
</ruby>
出力例
薔薇 (ばら)

定義やキーボード操作のために次のような要素も用意されています.

ex (example) といった省略形や XHTML (eXtensible HyperText Markup Language) といった頭文字の単語を説明するための要素が用意されています.

<abbr title="正確な単語">省略形</abbr>
<acronym title="正確な単語">頭文字</acronym>