今回のねらい
 そろそろ、Webサイトをスタイルシートレイアウトにしたいなぁというあなた。スタイルシートレイアウトで使われるソースコードは、XHTMLとCSSだということをご存知ですか？Web制作の現場では、HTMLからXHTMLへと移行してきているのです。
HTMLの上位バージョンとしてW3Cにより勧告されたXHTML。そのため、XHTMLの基本的な部分はHTMLとさほど違いはありません。ですが、細かなルールが変更されているため実際の制作を行う場合には変更点を留意する必要があります。
Dreamweaver8では、はじめからXHTML文書としてページを作成すれば、記述ルールの違いを気にすることなくHTMLの時と同じようにコーディングすることができます。
今回は、XHTML文書でページを新規作成する場合に必要なことをご紹介します。
ページの新規作成
XHTML文書としてページを作成するには、文書のドキュメントタイプをXHTMLに指定します。
- [ファイル]−[新規]を実行します。
- [新規ドキュメント]ダイアログボックスで、カテゴリから[基本ページ]、基本ページから[HTML]を選択します。
- [新規ドキュメント]ダイアログボックスで、ドキュメントタイプ(DTD)を選択します。現在使用されているドキュメントタイプ（DTD）で最も一般的な「XHTML 1.0 Transitional」を選択します。
- [作成]をクリックします。
- ドキュメントタイプとは？
- ドキュメントタイプとは、その文書が使用するマークアップ言語の種類とバージョンを宣言するもので、文字型定義とも呼ばれます。<!DOCTYPE〜から始まり、言語を使用する前に記述されます。XHTML1.0のドキュメント宣言には、Strict(厳密型)・Transitional（移行型）・Frameset（フレーム設定型）の3種類があります。現時点では、非推奨とされているタグの使用が認められているTransitional（移行型）を使用するWebサイトが一般的です。
ソースコードの確認と追加
作成された文書のソースコードを確認しましょう。また、追加した方がよいコードを記述しましょう。
- タイトルバーに(XHTML)と表示されていることを確認します。（この文書がXHTML文書になっているかどうかをタイトルバーで確認することができます。）
- ドキュメントツールバーで[コード]をクリックします。
- ドキュメントツールバーの表示オプションから、[ワードラップ]と[行番号]にチェックをいれます。
- 1行目は、ドキュメントタイプ宣言です。XHTML バージョン1.0 Transitional（移行型）が宣言されています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2行目はhtml要素です。xmlns属性で名前空間が指定されています。
<html xmlns="http://www.w3.org/1999/xhtml">
- 2行目に言語指定を追加します。XHTML 文書としては、xml:lang属性で指定すればよいのですが、HTML文書との互換のためにlang属性も指定します。値に指定したjaとは日本語という意味です。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
- XML宣言について
- 本来、XHTML文書では、先頭に<?xml〜から始まるXML宣言が必要ですが、XML宣言を行うとInternet Explorer6.0が互換モードで表示されるようになるために記述を省きます。互換モードでは、CSSが文法通りに正しく解釈されずにブラウザでの表示がくずれてしまうというトラブルを起こすためです。現時点では、通常のWebサイトのページでXML宣言がないことでのトラブルは起きないと考えられるので、省いても問題はありません。
環境設定
[環境設定]でドキュメントタイプの初期設定をすることができます。初期設定をしたドキュメントタイプが、新規ページを作成する時に使用されますので、毎回ドキュメントタイプを選ぶ必要がなくなります。
- [編集]−[環境設定]メニューを実行します。
- [新規ドキュメント]カテゴリを選択します。
- [初期設定ドキュメントタイプ]を選択します。
現在使用されているドキュメントタイプ（DTD）で最も一般的な「XHTML 1.0 Transitional」を選択します。
- ファイルの拡張子
- Dreamweaver8では、[環境設定]-[初期設定ドキュメントタイプ]カテゴリの「デフォルトの拡張子」で、作成するファイルの拡張子をあらかじめ設定しておくことができるようになりました。
r360studioからのお知らせ
|
職種からお仕事情報を探す
Webディレクター│
Webデザイナー│
コーダー│
ネットショップ運営│モバイルサイト│その他
今週の特集
