マークアップ本位なテンプレ改造(4)
- 2004-04-27 23:22
- Webページデザイン
- comments (2)
- trackbacks (1)
- E
今日からテンプレート解説の CSS 編です。でも今回はまだ本筋じゃありませんが。本当は CSS の説明はかなーり面倒なんです。今までの説明であえてシカトこいてた部分の説明をしなければ先に進まないですから。でもふうこ頑張る。最後まで。
なお、前回までのリンクを以下に上げておきます。
テンプレート解説：CSS編(準備)
前回ちらっと触れたんですが、HTML 文書に CSS を適用する場合、その HTML 文書の記述が正当（valid ）
であることを求められます。正当
というのは、WWW 関連の標準仕様を策定している W3C という機関が提示する HTML 仕様に沿った記述がなされている、ということです。JUGEM のテンプレートも CSS でデザインされる以上、その方針には従う必要があるかと思います。
ということで、今まではこういった技術的な部分の話をばっさり割愛していたのですが、CSS の説明をする上では避けては通れませんので、この項ではその辺に関する予備説明に紙面を割きたいと思います。それなりにご存じの方はどうぞ適当にスルーして下さい。
さて、ひとくちにHTML
といってもそれなりに歴史があって、何度かバージョンアップをしています。数えてはいませんが、今現在おそらく十数種類のバージョンが存在するはずです。バージョンアップの度に増えた要素、なくなった要素、扱いの変わった要素などがありますから、正当
を目指すには、まず自分がどのバージョンの HTML を使用するのか決めなければなりません。どのようにして決めるかというと、 DOCTYPE 宣言というものを使います。ちなみに JUGEM で配布されているテンプレートは全て XHTML 1.0 Transitional が使用されています。XHTML の DOCTYPE 宣言は以下の通りです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE 宣言は HTML 文書の最初に出てきます。JUGEM で配布されているテンプレートの HTML ヘッダはこんなふうになっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
</head>そして、今回（一応）説明の対象になっているカスタムテンプレート harvest では、XHTML 1.0 Strict という DOCTYPE を使用しています。XHTML 1.0 Strict の DOCTYPE 宣言は以下の通りです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">そして、harvest
における HTML ヘッダは以下のようになります。
<?xml version="1.0" encoding="{site_encoding}"?>
<!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={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="{site_css}" type="text/css" title="harvest" />
<title>{site_title}</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
</head>…JUGEM で配布しているものとは内容が大分違います。が、それは Transitional と Strict の違いではなくて、単純に JUGEM のテンプレートが間違いなだけです。
まず、一番上の <?xml version="1.0" encoding="{site_encoding}"?> は、XML 宣言といって XHTML では必須のものです。また、html タグにくっついている xml:lang="ja" lang="ja" というのは、この文書が日本語で書かれていることを表します。これは著者が日本語圏の方でない場合には違う書き方になりますので、自分で追加するのがよさそうです。そして、<meta http-equiv="Content-Style-Type" content="text/css" /> ではこの文書で CSS を使用すること、<meta http-equiv="Content-Script-Type" content="text/javascript" /> で JavaScript を使用することを表しています。JUGEM では CSS を使いますから、CSS の meta 要素は必ず記述しなければなりません。harvest
では、ついでに title 属性でこのテンプレートの名前を名乗ってみました。一応、デザインとマークアップは分離しています
という意思表示のつもりです。
以上の点を気をつければ普通に記事を書いている分には XHTML 1.0 Strict に適合する正当な HTML
が記述できるはずです。が、蛇足ついでに JUGEM のエントリを XHTML 1.0 で書く時にマークアップの上で割と見落とされがちなことを書いておきます。
- blockquote 要素の中にテキストをべた書きしてはいけない。（p タグなどで囲む必要あり）
- XHTML 1.0 では、font 要素等のフォントサイズ変更・スタイル変更のみを行う要素（所謂物理タグ）は推奨されない。強調には em 要素（JUGEM 管理ページでは
斜体
ボタン）や strong 要素（同じく太字
ボタン）を使う。span 要素に style 属性をつけるのも間違いではないが、CSS で決まった class 属性を定義した方がスマート。ちなみにその場合も class 名red
なんつーのはナシの方向で。 - 箇条書きの場合には "・" を打つのではなく ul 要素を使おう。
- 数字つきの箇条書きの場合は自分で数字を書かずに ol 要素を使おう。
なお、XHTML について勉強されたい方のために、WEB ARCHIVES さんを紹介しておきます。こちらは Mozilla Firefox の拡張である RSS Reader Panel の作者さんでもあります。Web スペースはロリポップ！をお使いのようですね :-)
WEB ARCHIVES の管理者 flyson さんは色々と身辺整理をされてサイトもたたまれたようです。が、公開されていたソフトウェアのいくつかは有志によって引き継がれ、現在も継続発展中です。偉大な功績に敬礼。
それでは、また次回。
Received Comments（投稿順）
どうもはじめまして。
この記事は JUGEM にいた頃のものなので結構古いですが、お役に立てたら嬉しいです。
ブログパーツについては、JavaScript なら language="javascript" みたいな古い記述を今風のものに直せばいけるんじゃないかと思いますよ。
HTML validator の穴を突いた場当たり的な対処ですけど……。