HP作成支援の　Challenge HP

どうせXHTMLで作るならXHTML1.0より新しいXHTML1.1で作ってみようと思います。スタイルシートさえ分かれば難しいものではないと思います。また使えないタグや属性がありますが、基本的に見栄えをスタイルシートで行っていれば問題は無いです。つまりスタイルシートを使う事で使えないタグや属性を覚える必要が無い訳です。ただしXHTML1.1のルールだけは覚えておきましょう。

■ XHTML1.1のお約束記述

+ XMLの宣言
<?xml version="1.0" encording="Shift_Jis"?>

+ DOCTYPEの宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

+ HTML＋名前空間
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

+ <meta>タグ

・XHTML Media Types
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />

・文字コード
<meta http-equiv="content-style-type" content="text/css; charset=Shift_JIS" />

・検索ロボット用説明文書
<meta name="description" content="* 文書内容の簡略説明 *" />

・検索ロボット用キーワード
<meta name="keywords" content="* キーワード *," />

・外部スタイルシート
<link rel="stylesheet" type="text/css" href="***.css" />

・外部スクリプト
<link rel="script" type="text/javascript" href="***.js" />

■ XHTML1.1の基本的な記述

<?xml version="1.0" encording="Shift_Jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css; charset=Shift_JIS" />
<meta name="description" content="ホームページ作成" />
<meta name="keywords" content="HP,CSS," />
<link rel="stylesheet" type="text/css" href="***.css" charset="Shift_JIS" />
</head>

<body>
<div>
ホームページの内容
基本的に body 内の内容は body に直接書きません。
基本的に div や table の中に書きましょう。
</div>
</body>
</html>

XHTML用基本ひな型自動作成ツールと言うものもあるので利用すると楽です。
またXHTMLの拡張子もHTMLと同様で html または htm になります。

■ IEとNNの認識の違い

IE6とNN7では padding の認識が違う部分があります。
IEで width:100px;padding:5px; とした場合、100pxの幅であり中身に 5px の余白が出来ますが、 NNでは padding の 5px 分幅などが大きくなります。つまり幅が 110px になってしまうんです。で、この辺の改善をして欲しいと思いました。

もう1つ注意する事で、色を指定する16進カラーコードは # を付けないとNN7では色が付きませんでした。背景色・ボーダー色・文字色など全てです。
color:ff8833 ← ×　color:#ff8833 ← ○

up ▲

　you style