宣言文を付けてみよう！
今回はXHTMLに宣言文を付けて見たいと思います。
実はこれまで書いてきたソースコードは、
宣言文や属性などが無かったので、厳密にいうとXHTMLにはなっていませんでした。
ですが、宣言文や属性を書く事で、
「これから書くソースコードはXHTMLです」と、パソコンに正式に伝える事が出来ます。
最初に宣言文の説明をすれば良かったのですが、
この宣言文というのが曲者で、
書いてもほとんど変化が感じられない上に、
見た目が複雑なので、一見して拒絶感を覚えること大です。
例えるなら、
想い焦がれたXHTMLという『千年の恋』も、
一瞬で醒めてしまう代物とでもいいましょうか・・・
XHTMLの性質上、
避けては通れない事柄だったのですが、
上に書いたような理由で先延ばしにしていました。
全く「初心者キラー」の感がある宣言文ですが、
実はそれほど怖がる必要はありません。
基本的には、XHTMLで宣言する書式は数種類しかなく、
だれでも同じ宣言文を書くことになります。
ということは、使い方の要点さえ分かれば、
後は宣言文のコピーアンドペーストでＯＫという事になります。
XML宣言を書いてみよう。
XHTMLでは、
ソースコードの先頭に宣言文を２つ書くことになっています。
まず初めに書く宣言文は、
次のような「XML宣言」と呼ばれるものです。
<?xml version="1.0" encoding="UTF-8"?>
XHTMLは、
XMLというマークアップ言語を元にして生まれた言語なので、
このXML宣言を書く決まりになっています。
それでは、
前回制作したやまなしのソースコードに、XML宣言を書いてみましょう。
入力する場所は、ソースコードの一番初めの行です。
はい。これでやまなしのソースコードにXML宣言がされました。
文書型宣言を書いてみよう。
二つ目の宣言は、「文書型宣言」と呼ばれるものです。
XHTMLの文書型宣言には、
Strict（厳密型）、 Transitional（移行型）、Frameset(フレーム利用型）の3種類あって、
使えるタグの種類に幾つか違いがあります。
少しややこしくなってしまうのですが、
XHTML本来の文書型宣言はStrict（厳密型）。
そして、
これまでホームページ制作に使われてきた、
HTMLというマークアップ言語との互換性を維持するために、
XHTMLで廃止されるタグを使えるようにしたのが、
Transitional（移行型）と、Frameset(フレーム利用型）になります。
実際にホームページ制作で使われているのは、
色々な事情でXHTMLのTransitional（移行型）が多いのですが、
この講座では、Strict（厳密型）を使っていきます。
なんだか、
専門用語だらけになってしまいましたが、
ここでは、文書型宣言は3種類あって、
この講座では、Strict（厳密型）を使っていく、ということを知って頂ければ大丈夫です。
それでは、
文書型宣言Strict（厳密型）を見てみましょう。
これまでにない威圧感なので、ちょっとした心構えが必要かもしれません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Strict（厳密型）
いかがでしょうか？
この文書型宣言をXHTMLのソースコードに書くとStrict（厳密型）になります。
これまでたくさん「複雑だよ」という心理的予防線を張っていたので、
「なんだ、いうほど大した事ないね」と思ってもらえるとありがたいです。
ちなみにTransitional（移行型）と、Frameset(フレーム利用型）は次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Transitional（移行型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Frameset(フレーム利用型）
では実際に、文書型宣言のStrict（厳密型）を書いてみましょう。
場所はXML宣言のすぐ下に書きます。
はい。こんな感じになりました。
これでXML宣言に続き、文書型宣言もされました。
HTMLタグの中に属性を指定してみよう
XHTMLではhtmlタグの中に、
三つほど属性と呼ばれるものを指定することになっています。
一つ目は、次のようなxmlns属性と呼ばれるものです。
xmlns="http://www.w3.org/1999/xhtml"
xmlns属性をhtmlタグ内に指定する事で、正式に
「XHTMLで書かれています」とパソコンに伝える事が出来ます。
実際に<html>の中にxmlns属性を指定すると次のようになります。
<html xmlns="http://www.w3.org/1999/xhtml">
二つ目と三つ目は、
次のようなxml:lang属性とlang属性と呼ばれるものです。
xml:lang="ja" lang="ja"
xml:lang属性とlang属性も、htmlタグ内で指定する事で、
ホームページがどの言語で書かれているのかをパソコンに伝える事が出来ます。
たとえば日本語ではjaですが、英語はen、ドイツ語はdeといった具合です。
実際のxmlns属性とxml:lang属性、lang属性を合わせたhtmlタグの記述はこんな感じになります。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
これもまた複雑そうですが、
XHTMLでマークアップした日本語のホームページなら、
上の記述をコピーアンドペーストで張りつければいいので何の心配もいりません。
それではやまなしのhtmlタグの中に、
xmlns属性とxml:lang属性、lang属性を指定してみましょう。
4行目のhtmlタグの中に、xmlns属性とxml:lang属性、lang属性が書かれています。
これで必要な属性が指定されました。
少し順番が入れ替わった感はありますが、
これで正真正銘、やまなしのソースコードがXHTMLで書かれたものになりました。
（Crescent Eveを使われている方は、これまで出ていた文法のエラーが消えたと思います）
少しずつホームページが作れるようになっていますね。素晴らしいです！
文字コードセットについて
インターネットをしていると、
まれに文字化けしているホームページを見た事があると思うのですが、
多くは「文字コードセット」がうまく設定されていないために起こります。
これから先、せっかく作ったホームページが文字化けを起こして慌てないために、
ちょっとだけ文字コードセットに付いて、お話してみたいと思います。
文字コードセットはいくつか種類があるのですが、
一般的に使われている文字コードセットは、
- UTF-8
- Shift_JIS
- EUC-JP
の３つです。
どれを使っても間違いはないのですが、
この講座では、XHTMLの標準文字コードセットのUTF-8を使っていきます。
文字コードセットの設定の仕方ですが、
次のようにXML宣言内の、encoding="○○"部分に文字コードセットを入力します。
UTF-8を使う場合は、
<?xml version="1.0" encoding="UTF-8"?>
Shift_JISを使う場合は、
<?xml version="1.0" encoding="Shift_JIS"?>
という具合になります。
続いて、文字コードセットを設定した際の、ソースコードの保存の仕方ですが、
次のように行ってください。
テキストエディタ左上の、ファイル＞名前を付けて保存を選択して・・・
文字コードの選択欄から、文字コードセットを選択し保存します。
注意点として、
ソースコードで設定したのと、同じ文字コードセットで保存して下さい。
文字化けの原因になります。
難しいなと感じてしまったら
今回は宣言文や属性のお話だったので理屈っぽくて、
見るからに複雑そうな記述が続いたので、難しく感じてしまったかもしれません。
分からなくなってしまったら、
苦手意識を作らないために、ここで一度、気持ちを切り替えましょう。
この講座では次の宣言文しか使わないので、
以下のテキストをコピーアンドペーストで張りつけてください。
（何を隠そう、私も最初は宣言文の意味が良く分からずに、コピーアンドペーストしていました）
<?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> </head> <body> </body> </html>
ついでにマークアップする上で必ず必要になる、
headタグやbodyタグも一緒に張りつけてしまえば、手間がかからず便利ですね。
