今回のねらい
 昔作ったWebページがHTMLで記述されていて、それをXHTMLでの記述に変換したい…というのはよくある話です。
また、XHTMLで作ったページに昔のページからソースコードをコピー＆ペーストした場合には、XHTMLとHTMLが混在してしまい、それをXHTMLに統一したいという場合もあるでしょう。ドキュメントタイプをTransitional（移行型）にしておけば、ソースコードにHTMLで記述した部分があっても良いのですが、できる限りXHTMLで記述しておきたいものです。
Dreamweaverでは、HTMLで記述したソースコードをXHTMLに変換する機能があります。また、それでも残ってしまう部分は詳細に条件が指定できる置換機能を使うとよいでしょう。
今回は、HTML文書をXHTML文書に変換する手順についてご紹介します。
Dreamweaverを使って変換する
Dreamweaverの変換機能を使って、HTML文書をXHTML文書に変換します。
- HTML文書を開きます。
- [ファイル]−[変換]メニューより、変換するドキュメントタイプを選択します。
※今回は、XHTML 1.0 Transitional に変換
- XHTML変換時の注意
- 変換時に「alt属性がないため<img>エレメントを修正できません」という注意が表示される場合があります。
これは、img要素（画像表示する要素）にalt属性（代替文字属性）が指定されていない場合に表示されます。 変換上は問題ありませんが、アクセシビリティの観点からも、img要素には、alt属性を指定することが望ましいでしょう。 デザインビューで画像を選択し、プロパティの[代替文字]で指定しておきましょう。
Dreamweaverで変換されたコードを確認する
メニューから簡単に変換されたのですが、どの部分が変更されたのかを確認しましょう。
- ドキュメントタイプと名前空間の指定
ドキュメントタイプ宣言が変換時に指定した物に変換されています。また、それにあわせた名前空間の指定も行われています。
- タグをアルファベット小文字で記述
タグで使用されているアルファベットが大文字から小文字に変換されています。
- 終了タグの指定
終了タグを付け忘れていたものについては、終了タグが追加されています。
- 空要素への変換
img要素やbr要素など、終了タグを持たない空要素は、XHTMLで定められた表記<img />や<br />へと変換されています。
- 属性の値へ引用符の追加
属性の値に引用符(")が追加されています。
タグを変換したり、削除したりする
DreamweaverのXHTML変換機能は、ソースコードをXHTML準拠に変換してくれますが、XHTMLでは非推奨要素となるfont要素（文字修飾のための要素）や、非推奨要素ではないものの意味的に望ましくないb要素(太字指定の要素)やi要素(斜体指定の要素)はそのまま残ってしまいます。
そういった、変換機能では補えない部分は「置換」機能を使用します。Dreamweaverの置換機能では、細かなオプション指定が可能です。
- HTML文書を開きます。
- [編集]−[検索および置換]メニューを実行し、[検索および置換]ダイアログに以下のように指定し、[すべて置換]をクリックします。
- font要素がすべて消去されています。
- [編集]−[検索および置換]メニューを実行し、[検索および置換]ダイアログに以下のように指定し、[すべて置換]をクリックします。
- [編集]−[検索および置換]メニューを実行し、[検索および置換]ダイアログに以下のように指定し、[すべて置換]をクリックします。
- b要素がstrong要素へ変換され、i要素がem要素へ変換されます。
- XHTMLで好ましいタグの使用について
- XHTMLでは、文字の修飾などの「概観」をCSS(スタイルシート)で記述するのを前提にしています。そのため、文字修飾を行うfont要素は非推奨要素とされています。 また、修飾の意味合いの強いb要素(太字)やi要素(斜体)は、strong要素(より強い強調)やem要素(強調)に置き換えるほうがベストです。
r360studioからのお知らせ
|
職種からお仕事を探す
Webディレクター│
Webデザイナー│
コーダー
│
ネットショップ運営│モバイルサイト│
事務
│
その他
今週の特集
