XHTMLへの移行ポイント｜上級CSSレイアウト講座

Loading

スポンサードリンク

XHTMLと聞くとなんだか難しそうな感じがしますよね。しかし、実際はそんなに難しくはありません。当サイト内の初級ホームページ作成講座レベルで掲載している内容も、XHTMLへの移行を考慮して、一部XHTML仕様になっています。

「難しそう」はあくまでも自分の思い込みに過ぎないので、諦めずに頑張りましょう。

DOCTYPE宣言

HTML文章を記述する際にDOCTYPE宣言の記述とブラウザのレタリングモードについて触れました。参考:レイアウトが崩れる原因

XHTMLでは下記のように記述します。

HTML 4.01 Transitional(初級)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

XHTML 1.0 Strict

<?xml version="1.0" encoding="Shift_JIS"?>
<!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">

XHTML 1.0 Transitional

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">

上記はW3Cの形式に沿った正式な記述なのですが、問題がひとつだけあります。

<?xml version="1.0" encoding="Shift_JIS"?>部分はXML宣言と言いますが、 WIN版IE6 ではこのXML宣言を記述するとブラウザのレタリングモード(表示)が強制的に 互換モード になってしまいます。

解決策としては、XML宣言は記述しないのが現在の方法です。

では、XHTML 1.0 StrictとXHTML 1.0 Transitionalのどちらを使用すべきか。これは、XHTMLへの移行段階から考慮しても「XHTML 1.0 TransitionalのXML宣言なし」を使うべきです。HTML同様Transitionalはある程度許容範囲があるので。

--採用文書型定義--

<!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" xml:lang="ja" lang="ja">

小文字で記述

XHTMLでは要素名及び属性名は「すべて小文字」で入力しなければなりません。当サイト内では、この点を考慮してすべて小文字で説明してきたので、それほど苦にならないのではないでしょうか。

タグはすべて閉じる

XHTMLでは、タグはすべて閉じなければいけません。開始タグで始まり終了タグで閉じるのが基本です。下記にサンプルを載せますが、これに関しても当サイト内では、ほぼ閉じた型を取ったので苦にならないと思われます。

--HTML 省略可--
<ul>
<li>メニュー
<li>メニュー
<li>メニュー
</ul>

--XHTML--
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>

空要素

今まで何も考える事無く使用していた<br> <hr> <img> <col> <input> <meta>などですが、この空要素も閉じなくてはいけません。下記参照。

<br> --- <br />

<hr> --- <hr />

<img> --- <img />

<meta> --- <meta />

属性値

HTMLでは省略が可能な属性値もXHTMLでは省略する事は出来ません。「属性値="属性値"」形式で記述しなければいけません。

<input type="radio" checked="checked">

style要素

HTMLの<head>内に指定するCSSはブラウザが文字として読み込まないようにコメントアウトしていましたが、XHTMLでは今度は本当に「コメント」として扱われます。即ちスタイルが適用されないと言う事です。

しかし、CSSのメリットを享受するなら外部からCSSファイルを読み込むのが一番です。よってあまり詳しくは触れませんが「どうしても、このページには別のスタイルを指定したい」と言う時は下記を参考にして下さい。

<style type="text/css">
<!--
p{color : red;}
-->
</style>
</head>

--XHTML--
<style type="text/css">
  @import"ファイル名.css";
</style>
</head>

これも外部からCSSファイルを読み込んでいますがこちらが優先されます。

スポンサードリンク