- 2008-08-14 (木) 15:02
- XHTML+CSS
XHTMLやCSSをマークアップする際、現在はDreamwaverを使っています。
しかしデザインビューは一切使わず、つかっているのはコードビューのみで手打ちを基本にやってます。
しかし、一からすべてを手打ちでマークアップを書いて行くのは結構面倒だったりします。しかも、大抵書く事は決まっています。さらに億劫に感じますよね。
なので、予めフォーマット文書を作っておきます。こうする事で、フォーマット化されているMeta要素などをいちいち一から全部手書きしなくてもよくなるのです。
基本文書は以下の通り。
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ※1
<meta http-equiv="content-style-type" content="text/css" /> ※2
<meta http-equiv="content-script-type" content="text/javascript" /> ※3
<meta http-equiv="Imagetoolbar" content="no" /> ※4
<meta name="robots" content="INDEX,FOLLOW" /> ※5
<meta name="copyright" content="this website copyrights name" /> ※6
<meta name="author" content="this website author name" /> ※7
<meta name="DC.creator" content="this document creator name" /> ※8
<meta name="DC.subject" content="this website title name" />※9
<meta name="description" content="this website dicription text" /> ※10
<meta name="keywords" content="this website keywords" />※11
<link rev="made" href="mailto:sample@example.com" />※12
<link rel="stylesheet" type="text/css" href="./css/import.css" media="print,screen,projection,tv" /> ※13
<title>this website title name</title>※14
</head>
<body>
<p>this website contents here.</p>
</body>
</html>
…なんか、つたない英語が交じっておりますが、その辺は無視してください。
XHTMLでは、W3Cの仕様書を見ると文書の先頭にXML宣言が記述される事が強く推奨されていますが、現実的な所からみると、たしかにXML宣言はつけないといけないのですが、これをつけるとIE6のレンダリングモードが過去互換モードとして認識されてしまい、レンダリングが崩れるというバグがあるため、書いていません。
しかし、デフォルトではXML宣言でエンコードの指定をしなければならないという文法もある訳です。
ですが、W3CのXHTMLの仕様書には「meta要素の中で文字コード指定をされていればXML宣言は書かなくても大丈夫だよ」みたいなことが書かれています。なのでmeta要素の一行目に<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />と記述することで、この問題は解消されます。
次にDOCTYPE宣言の部分です。
HTMLに慣れ親しんでいる方には、もしかしたら馴染みの薄い部分かもしれませんが、じつはHTML4.01でDOCTYPE宣言は書かれる事が推奨されています。
よく耳にするのが「DOCTYPE宣言を追加したら表示がおかしくなった」というのを聞きますが、むしろその「おかしくなった表示」がそもそもの「正しい表示」なのです。
という事は、それまでのマークアップが間違っているという事になりますので、この辺誤解のないように。
話が若干それましたが…戻ります。
XHTMLでもDOCTYPE宣言は必須項目です。ですから書かれていない文書はW3CのVaidation Serviceで文法をチェックすると必ずエラーになります。
XHTML1.0のDOCTYPEには全部で3種類、非推奨要素、または属性でマークアップされているものはTrasitional（トラジショナル）、推奨要素、または属性のみでマークアップする場合はStrict（ストリクト）、フレームセットを使用したページを作成する場合がFrameset（フレームセット）を指定します。
しかし、後続のXHTML1.1ではStrictに相当するDOCTYPEしか存在しないので、今のうちからStrictでマークアップした方が、将来的には良いと思います。
つぎはhtml要素ですね。
ここではxmlns属性でXMLの文字空間を指定しいます。そしてその後ろに続くlang属性とxml:lang属性で「この文書は日本語で構成されている」ということを定義しています。
ちなみにこれが「この文書は英語で構成されている」というときは以下のようになります。
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
どこが変わったか分かりますよね？「ja」って書いてあった所が「en」になっています。enはEnglishのenで、jaはJapaneasのjaです。簡単です。
ではでは、head要素内の解説について。。。
head要素内にはXHTMLの文書の情報となるmeta要素とstylesheetなどを定義する際に使うlink要素を入れて行きます。で、meta要素から行きたいと思うのですが、meta要素って実はかなり奥が深い…って思っているのは私だけでしょうか？？
上記にもある通りやたらいっぱい指定されていますが、海外のサイトをみていると、やはりこれくらいやっているサイトが殆どなのですね。metaは言い換えれば「情報の情報」になるので、定義しておいて損はないものです。SEO的にはあまり重要視されていないとかいう話もありますが、クローラーに情報を与える
上では、あった方が良い要素でもあります。なので、ここは面倒に思うかもしれませんが、きっちり指定してあげた方が、そのうちきっと良いことがあると信じて書いて行きましょう。
どこに何を指定しているかは次の通りです。
- ※1 — 文書フォーマットと文字コードを指定しています。XHTMLでは基本的にutf-8を指定するのがポピュラーです。しかしeucでもShift_JISでも大丈夫です（あまりお進めしないけど）。本当はtext/htmlではなく、application/xml+xhtmlが正しいという事も書かれているサイトもありますが、ブラウザによってはこれを正しく解釈してくれない事もありますので、現状はtext/htmlと書いた方が難だと思います。
- ※2 — スタイルタイプを指定しています。 ここではCSSを定義しています。
- ※3 — スクリプトタイプを指定しています。 ここではjavascriptが指定されています。
- ※4 — IE6のイメージツールバーが邪魔なので（爆）、出さないようにしています。
- ※5 — ここでは検索エンジンクローラーの制御を指定しています。INDEXは「インデックスすることを許可」でFOLLOWは「このページのリンクを辿る事を許可」とでも覚えておいてください。
- ※6 — 文書の著作権元の名前を指定します。
- ※7 — 文書の作成者の名前を定義してます。会社だったら会社名でもOK
- ※8 — 文書の作成者の名前を定義します。会社名でもOK
- ※9 — 文書の題名を定義します。ホームページの名前とか、サイト名とか。
- ※10 — 文書の概要文・説明文を記述します。長くてもダメだし、短過ぎてもダメ。Googleとかの検索結果のサイト説明分をみると参考になりますよ
- ※11 — 検索されたいキーワードを指定します。あまり内容と関係なさ過ぎるキーワードの埋め込みはスパム扱いになるので、内容とキーワードは一致させる事。
- ※12 — サイトの連絡先を定義しています。ページに表示はされないけど、OperaやFirefoxではツールバーに表示されることがあります。
- ※13 — 外部スタイルシートの読み込みを指定しています。
- ※14 — ページのタイトルを指定します。ブラウザのタイトルバーに表示されます。
ちなみにこのXHTMLをHTML LintでValidationすると89点で「良く出来ました」と表示されます。HTML Lintは国産のVaidation ServiceでW3CのVaidation Serviceより厳格かつ辛口評価で有名です。W3CでOKでもLintではNGということは良くあります。そしてエラー文章を読んで何となく凹むんです。べっこべこですよ。
上記のソースは著作権フリーなので、良かったら使ってくださって構いません。余分な所は削除して活用してくだされば幸いです。
なお、解説には一部独自の解釈が含まれている事があります。もし間違いなどあればご報告いただければ助かりますです(；´∀｀)
HTML文書のDownloadはこちら
sample-html.zip
- Newer: CSSの基本仕様
- Older: デベロッパ向けのブログ始めました。
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://wd.kkws.org/archives/7/trackback
- Listed below are links to weblogs that reference
- XHTMLの基本構造のサンプル from KANZAKI KAINE WEBSITE - WD