ウェブの箱

楽の出来るホームページの書き方

テキスト編(骨組み)

このページは、XHTML の骨組みがどのようになっているかを説明したものです。このページで説明している要素を使ったサンプルを見ながら説を読むと分かりやすいと思います。まだ骨組みだけなので、実際には何も表示されないと思いますが、ソースを見ると骨組みとなる部分が書かれているのが分かります。


XHTML 文書だと宣言する

XHTML 文書を書くのだから、「この文書は XHTML の規格に従って書かれていますよ」という宣言をしなくてはいけません。これは文書型宣言ドキュメントタイプ宣言と呼ばれています。XHTML 1.0 で書く場合の宣言は、次のようになります。


<?xml version="1.0" encoding="iso-2022-jp"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                      "http://www.w3.org/TR/xhtml1/DTD/

                       xhtml1-strict.dtd">

これを一番先頭の行に書くことで、この文書が XHTML 1.0 に従って書いてあることを表します。意味がよく分からない場合には、気にせず先頭に書いておきましょう。もちろん、XHTML 1.0 に従っているという前提にですが。


XHTML の基本は要素

XHTML 文書は HTML 文書と同じく、要素と呼ばれるものが組み合わされて書かれています。見出しを表す要素や、段落を表す要素、表を表す要素など、色々な要素があります。

要素は、開始タグで始まり、終了タグで終わります。そして囲まれた中身の部分を 内容と呼ぶことにします。つまり、開始タグと終了タグで内容を囲んでやると、その全体が要素になるという訳です。

要素の構成を表す図

HTML の頃は終了タグを省略できる要素がありましたが、XHTML 1.0 からは省略できません。ほとんどの要素はこのような形になっていますが、中には内容と終了タグが無い要素もあります。そのような要素は 空要素と呼びます。空要素は終了タグがないため、タグの閉じ方が他と違います。例えば、あとで説明しますが、改行を示す要素の場合、<br /> のようになります。


基本になる骨組み

HTML 文書である宣言の後には、html 要素を書きます。html 要素はヘッダ、本文などが書かれていることを表す要素です。html 要素の内容には、大きく分けて head 要素、body 要素の2つの要素が含まれます。head 要素がタイトルなどの文書の情報を書いておくヘッダで、body 要素が本文になります。文章だけで説明しても分かりづらいので、次の例を見てください。




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

    <head>

    </head>

    <body>

    </body>

</html>

文書全体が html 要素になっていて、その中に head 要素と body 要素がありますよね。これが基本の骨組みになります。

head 要素や body 要素など、要素名は全て小文字で書いておきましょう。HTML では大文字、小文字、どちらを使ってもかまわないのですが、XHTML 1.0 では小文字のみになっています。その他の部分は今は気にしないで、こういうものだと思っておいて下さい。


要素の細かい設定をする

先ほどあげた骨組みの例の html 開始タグに lang="ja" と書かれているのに気が付きましたか? これは 属性と呼ばれていて、これを使って要素の細かい設定を指定することが出来ます。

属性は開始タグに、属性名="設定する内容" というように追加していきます。指定する内容はダブルコーテーション(")で囲みます。XHTML 1.0 では設定する内容は必ずダブルコーテーションで囲みます。

例で使われている lang 属性は、HTML 文書が何語で書かれているかを指定することができます。ja は日本語を表していて、英語の場合は en になります。上の例の場合は、html 要素に lang 属性を使って、「言語は日本語です」と指定している訳です。


Copyright 1995-2002 HAL. ALL Rights Reserved. ウェブの箱