chopporunga digital train

XHTML初めの一歩

ナビゲーションへ

XHTMLとは…

現在、Webページ作成に広く使われているのは HTMLという言語です。 HTMLは記述を省略できたりとあいまいな部分が多く、複雑な処理には不向きです。 そこで、近年よく使われているXMLで、 HTMLを定義し直したのが、XHTMLです。 XMLは、データをわかりやすく記述でき、要素を拡張したりもできる大変便利な言語です。 その反面、文法が厳密であいまいな書き方は許されません。

最近は、XHTMLがWebページ作成言語の標準となりつつあります。 ここではXHTML Basic1.0によるWebページ作成方法を解説します。

XHTML Basic1.0

XHTMLの全ての機能を実装するのは難しい機器のために考えられた、 XHTMLのサブセット(機能を絞り込んだもの)。 携帯電話やPDAなどでの閲覧に向いています。 もちろん、PCでの閲覧もでき、複雑なコンテンツでない場合、XHTML Basicで十分だと思います。 当サイトも一部を除き、XHTML Basicです。

XHTMLを書いてみる

XHTMLは、テキストエディタと呼ばれるソフトで書くことができます。 具体的には、Windows付属のメモ帳などです。 管理人は、多機能なフリーソフトサクラエディタを使っています。 XHTMLを書く場合、色分けがされて大変見やすく、オススメです。 色分け表示だけなら、機能は少ないですが、軽量なGreenPadもオススメです。

XHTMLの例は、こんな感じです。


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
	<meta http-equiv="content-Style-Type" content="text/css" />
	<meta name="author" content="s-youhei" />
	<title>XHTMLの例</title>
	<link rel="start" href="index.htm" />
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="h">大見出し<h1>
<p>段落です。</p>
</body>
</html>

テキストエディタにこれを打ち込んで、保存して、 Internet ExplorerなどのWebブラウザで表示されてみましょう。 タブや半角スペース、改行は無視されるので、 上記のように、見やすく字下げ、改行をしましょう。

保存する際の拡張子は、現状では、html(またはhtm)にしておくのが無難です。 ファイル名は、半角の英数字で付けます。

拡張子に関して

保存する際、拡張子が自動的にtxtになってしまう場合があります。 拡張子というのは、何のファイルかわかるように、ファイル名の後ろに付けるものです。

Windowsの初期設定では拡張子を隠す設定になっているため、 任意の拡張子を付けることはできませんが、 ファイル名に.html.htmでも可)を付けて、 "filename.html"のようにダブルクォーテーションでくくって保存してみましょう。

要素と属性

<body>のように書かれたものをタグと呼び、 タグで示されたものを要素と呼びます。 タグが多くの場合、<body></body>のように、 開始タグ、終了タグで対になっています。 しかし、<link />のように、終了タグを持たないものを空要素と呼びます。 また、<h1 class="h">class="h"は、 h1要素のclass属性のように呼びます。

HTMLでは、タグを半角大文字で書くことも可能でしたが、 XHTMLでは全て半角小文字で書きます。

html要素の中に、head要素とbody要素があり、 文書の情報(タイトル、meta情報、他の文書との関係)をhead要素、 画面などに出力する内容をbody要素に書きます。

ブロックレベルとインライン

body要素の中に記述する要素には、 ブロックレベル要素インライン要素があります。

インライン要素

行の一部(インライン)となるものです。 行の一部なので、当然、前後に改行は入りません。

ブロックレベル要素

行より大きい単位である固まり(ブロック)です。

ブロックレベル要素の方がインライン要素より大きいので、 インライン要素の中にブロックレベル要素を入れることはできません。 ブロックレベル要素の中にブロックレベル要素を入れる、 インライン要素の中にインライン要素を入れる…といったことは可能です。 ただし、見出しを示すh1や段落を示すpなどのブロックレベル要素の中に、 他のブロックレベル要素を含むことはできません。

さらに、body要素の中に直接インライン要素を記述することはできません。 body要素の中には必ずブロックレベル要素が必要です。

要素の正しい親子関係

XHTMLは言葉の意味づけだけでなく、構造も示します。 そのため要素間の親子関係をはっきりさせなければいけません。

例えば、 <a><span></a></span>というのは間違いです。 これでは、a要素の中にspan要素があるのか、 それとも逆なのかわからず、親と子の関係がわかりません。 <div><span></span></div>のように、 親子がはっきりわかるようにタグを記述するのが正しい記述です。 このときのdivをspanの親要素、spanをdivの小要素と呼びます。

ラウンドナビゲーション

ページ情報

©2000- s-youhei

最終更新日2003年10月11日