xhtml css HTMLとXHTMLの違い

投稿日:2007.03.02

<?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” lang=”ja” xml:lang=”ja”>
<head>
<title>私のホームページ
</head>
<body>
<p>工事中

</body>
</html>

1行目のXML宣言 は,文字コード(正確にはエンコーディング)としてUTF-8またはUTF-16を使う場合に限り,省略できます。ただし,IE6はこれが理解できず,互換モードになってしまうというバグがあるので,当面は省略したほうがいいでしょう。




<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

は,XHTML 1.0 Strictというバージョンを使うことを表す決まり文句です。XHTML 1.0には他にTransitional,Framesetというバージョンがありますが,XHTML 1.1ではStrictに相当するものに一本化されますので,ここではStrictだけ扱うことにします。





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

は,XML名前空間(namespace)の宣言と,言語が日本語(ja)であることを表しています。今は過渡期なのでHTMLとしての言語とXMLとしての言語を両方指定しますが,XHTML 1.1では xml:lang だけでよくなります。

XHTMLでは <p> に対する

のような終了タグが省略できません。HTMLで
のような終了タグのないものは,XHTMLでは <hr /> のように書きます。

なお,ブラウザによっては <?xml version=”1.0″ encoding=”…”?> の指定をしてもエンコーディングの判定を間違うことがあるようです。そこで,HTMLのときと同様に,<head> のすぐ後に

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

のように書いておくのが当面は安全です。ここで <meta …> も終了タグがないのでXHTMLでは <meta … /> のように書きます。

XHTMLでは,デザイン的なものはすべてスタイルシートで表します。スタイルシート style.css を読み込む部分も含めて,XHTMLの雛形を示しておきます:

<!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″ />
<title>私のホームページ
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<p>工事中

</body>
</html>






<strong>番号付き箇条書き
番号付き箇条書きは <ol> … </ol> です。各箇条は <li> … </li> で挟みます。

<p>私の好きな雑誌:</p>

<ol>
<li>りぼん</li>
<li>なかよし</li>
</ol>

上のように書けば,

私の好きな雑誌:

1. りぼん
2. なかよし

のように表示されます。 ol は ordered list(番号付き箇条書き)の意味です。




用語と説明

次のように書きます。

<dl>
<dt>XHTML <dd>Webページをマーク付けするための言語 <dt>CSS <dd>Webページの見栄えを整えるための言語 </dl>

次のように表示されます。

XHTML
Webページをマーク付けするための言語
CSS
Webページの見栄えを整えるための言語

dl は definition list(定義リスト),dt は definition term(定義する用語),dd は definition description(定義の記述)の意味です。





media


CSSを使えば,メディア(媒体,出力装置)ごとに違う表現を指定できます。例えば,

<link rel=”stylesheet” type=”text/css” href=”common.css” />
<link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”handheld.css” media=”handheld” />

のようにしておけば,common.cssを適用した後で,パソコン用ブラウザならscreen.css,プリンタならprint.css,携帯端末ならhandheld.cssが適用されます。

携帯用フルブラウザはscreenなんでしょうか,handheldなんでしょうか。私の「京ポン」(AH-K3001V)のOperaでは,スモールスクリーンモードならhandheldになるようです。ちなみに,

<link rel=”stylesheet” type=”text/css” href=”” media=”handheld” />

と書いておけばフルスクリーンモードでも横幅が画面と一致し,通常は横スクロールバーが出ないという仕様のようです。

PAGE TOP