知的共同体WiSS

XHTML+CSS

2,1の解説篇

ここではXHTMLの基本中の基本を解説していきたいと思います。前の演習篇を参考にして、このページを読んでみてください。
構成としては

XHTMLの文章構成
ネスト型構成
補足

となっています。もう知ってるよ！という方はスルーでお願いします。

XHTMLの基本

XHTMLの文章構成

まず始めに、XHTMLの文章構成に関して解説していきます。XHTMLの文章構成は決まっています。それが以下のようなソースになります。

<?xml version="1.0" encoding="UTF-8"?>･･･①
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">…②
<head>…③
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />…④
<meta http-equiv="Content-Language" content="ja" />…⑤
<meta http-equiv="Content-Style-Type" content="text/css" />…⑥
<meta http-equiv="Content-Script-Type" content="text/javascript" />…⑦
<title>Hiroshiのページ</title>…⑧
</head>
<body>
</body>
</html>

①・・・XML宣言文、文字コード規定宣言文→このサイトがXMLに基づいて構築されているんですよ～と宣言する文章。そのあとのencodingというのが文字コード規定宣言文。これを一番最初に書きます。ここでは共通文字コードであるUTF-8を使用しています。
②・・・DOCTYPE宣言文。この文章がW3Cが規定したXHTML1.0 Script構文に基づいて構築されていますよという宣言文。ここだけ唯一大文字を使う箇所。
③・・・head構文。<head></head>間にこのサイトの基本情報を記述します。ここでは④～⑧がこのページの基本情報となります。
④・・・HTML形式規定文、文字コード規定文。このページがXHTMLによって記述されており、文字コードにUTF-8を使用していることを宣言している文章です。
⑤・・・使用言語規定文。jaとはJapaneseのことで日本語を指します。基本jaでいいです。
⑥・・・デザイン規定文。ここではデザインにCSSを用いますと宣言しています。CSSに関してはこのサイト内のコンテンツCSSを参考にしてみてください。XHTMLのデザインは基本的にCSSを用いて行います。
⑦・・・スクリプト規定文。ここではJavaScriptがこのサイト内のスクリプトとして用いられますよと規定しています。しかし、管理人はJavaScriptは詳しくない･･･。
⑧・・・title構文。このページのタイトルを規定します。ちなみにこのサイトのタイトルは「知的共同体WiSS」となっていますね。ブラウザはこのタイトルを読み込みます。

では、一つ一つ細かく解説していきますね。

①XML規定文

これは必ず書いてください!!!!
ドリームウェーバーやKonpoZerなどのサイト構築ソフトを使うとよくこの宣言文が抜けています。しかし、これはこのページがXMLに基づいて構築されていますよという文章なのでとても重要です。さらに、ここでサイト全体の文字コードも規定しています。さきほども記したように、ここでは"UTF-8"という世界共有文字コードを用います。代表的な日本語の文字コードには"Shift-JIS"や"EUC-JP"などがありますが、ここでは"UTF-8"、ユニコードを使っていきましょう。ユニコードを使うと国際標準規格のため、世界のどこからアクセスしても日本語で表記される、GoogleマップなどのAjaxを使用する際、ユニコードで文字を規定していないと使えないなどのメリットがあります。Shift-JISなどのメリットは・・・、おそらくもうほとんどありません。

②XHTML文章型定義

これも忘れてはいけません!!
XHTMLは記述を始めるためにそれがどういった構文なのか定義する必要があります。それがこれ。ここでは1.0 Scriptの紹介をしていますが、他にも代表的なもので1.1、1.0 Transitional、1.0 Framesetがあります。以下で紹介します。

XHTML1.1

<!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">

XHTML1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

これらの違いは

XHTML 1.0 Script・・・
厳格なXHTML。2008年現在は1.0 scriptをもとにXHTML開発が行われている。基準のような役割を持っているのでこれを覚えておくと後々XHTMLのバージョンが新しくなっても1.0 Scriptを覚えておくと対応しやすい。

XHTML1.0 Transitional・・・
HTMLとの互換性が強い言語。XHTML記述上の多少のミスは無視される。ただし、サイトの閲覧環境によってはページの文字構造やデザイン構造が崩れたりする可能性がある。

XHTML1.0 Frameset・・・
フレームをセットできるXHTML。ただし、frame要素は今後廃止される方向で開発が進んでいる。

XHTML1.1・・・
2008年現在、最も新しいXHTMLのバージョン。XHTML1.0 Scriptの再定義したもの。1.0では使えていたが、1.1では使えなくなった要素などもいくつかある。(例えば、Frame要素は完全に撤廃された)1.1に関しては後ほど補足をつけたい。

だいたいこんな感じですが、基本的に

1.0 Scriptと1.1以外はほとんど必要なし！基本はその二つを使っていきましょう

前述しましたが、ここではより完成度の高い1.0 Scriptを使って話を進めています。最新バージョンである1.1を使いたいという方はこのサイトでも他のサイトでも参考にしてみてください。そんなに大きな違いはないはずです。

③head要素

<head></head>間にサイトの基本情報を載せていきます。それが④～⑧です。

④～⑦サイト基本情報

サイト内の基本情報をここでしていしていきます。それでは一つ一つ解説していきます。

④・・・文字コードの指定

ここでもXHTMLの文字コードを指定します。何回もあって面倒ですね・・・。しかし忘れずにつけましょう。

⑤・・・使用言語指定

ここでは使用言語を指定しています。ここでいう"ja"というのが日本語のことですね。

⑥・・・デザイン言語指定

ここではデザイン言語を指定しています。これはサイトのデザインにCSSを使用していますよ～という意味です。詳しくはコンテンツ「CSS」を参照にしていただきたいのですが、サイトのデザインは基本的にCSSを使用していきます。

⑦スクリプト言語指定

ここではスクリプト言語を指定しています。これはJavaScriptですね。しかし管理人はJavaScriptに関しては無知です・・・。とりあえず入れておいたほうがいいんじゃ・・・Flashとか入れるときに・・・。まぁ適当です。
ちなみに、 XHTML1.1では、このサイト情報を省略することが出来ます。

ネスト型構造

XHTMLは基本的にネスト型構造をとっています。例えばですね

<strong;>こんなかんじですかね。</strong>

とstorong要素で文字を囲ってあげると

こんな感じですかね

と、文字が太文字にされるわけです。このような要素を使う場合は必ず開始タグと終了タグをつけてネスト型構造にする必要があります。すでにタイトル要素でも見たと思うのですが、あんな感じです。最後に必ず/をつけなければいけません。例えば改行のタグはbrなんですが、それにも

<br />

と最後に/をつけるのを忘れないようにしましょう。これは決められたルールで/がないと要素が反映されない場合があります。

補足

行く行くはこのようなサイト情報は省略されていくそうです。しかし、乱雑なサイトが次々にアップされていっている昨今、そういった任意の要素を省略できるようになるまでにはすさまじい時間を要するでしょう。これからサイトを作る方はこういった要素の記述を遵守されることをオススメします。その方が検索エンジンにひかかりやすかったり、誰が見てもサイトが崩れなかったりと、色々とメリットは多いです。それでは、次の製作へを参りましょう。

１の製作篇へ