マニュアルキャンセル

コードの最適化

検索

最終更新日 : 2023年3月10日

Dreamweaver

アプリを開く

Dreamweaver でのコードのクリーンアップ、ブラウザーの互換性のチェック、XML ドキュメントの検証、XHTML 準拠ページの作成をおこなう方法について説明します。

コードのクリーンアップ

空のタグの削除、ネストされた font タグの結合、煩雑で読みにくい HTML コードや XHTML コードの改良を自動的に実行できます。

Microsoft Word 文書から生成された HTML をクリーンアップする方法については、既存のドキュメントを開いて編集を参照してください。

開いている文書で、ツール／HTML のクリーンアップを選択します。
表示されたダイアログボックスで、任意のオプションを選択して「OK」をクリックします。

注意：

ドキュメントのサイズ、および選択したオプションの数により、クリーンアップが終了するまでに数秒かかる場合があります。

削除：空のタグ

間にコンテンツを挟んでいないタグをすべて削除します。例えば、 および は空のタグと見なされて削除されますが、some text の タグは削除されません。

削除：重複してネストされたタグ

無駄に重複しているタグをすべて削除します。例えば、This is what I really wanted to say というコードでは、really という語を囲む b タグは重複しているため削除されます。

削除：Dreamweaver 以外の HTML コメント

Dreamweaver によって挿入されたコメント以外のコメントをすべて削除します。例えば、<!‑‑begin body text--> は削除されますが、<!‑‑TemplateBeginEditable name="doctitle"‑‑> は、テンプレートの編集可能領域の先頭を示す Dreamweaver のコメントであるため削除されません。

削除：Dreamweaver の特殊マークアップ

テンプレートとライブラリ項目の更新時にドキュメントを自動更新するため、Dreamweaver によってコードに追加されたコメントを削除します。テンプレートベースのドキュメントでコードをクリーンアップする際にこのオプションをオンにすると、ドキュメントがテンプレートから切り離されます。詳しくは、テンプレートからのドキュメントの切り離しを参照してください。

削除：特定のタグ

このオプションの横にあるテキストボックスに指定したタグを削除します。外部のビジュアルエディターで挿入したカスタムタグや、Web サイト上に表示しない blink などのタグを削除する場合は、このオプションを使用します。複数のタグを入力するときは、font,blink のように、それぞれのタグをコンマ（,）で区切ってください。

可能な場合ネストされた タグを結合

同じ範囲のテキストが複数の font タグによって制御されている場合、これらのタグを結合します。例えば、big red は big red に変更されます。

完了時にログを表示

クリーンアップ終了後、ドキュメントの変更点の詳細を直ちにアラートボックスに表示します。

タグおよびカッコの対応の検証

ページ内のタグ、カッコ（( )）、波カッコ（{ }）、角カッコ（[ ]）が正しく対応しているかどうかを検証できます。つまり、すべての開始タグおよび開始カッコに対して、対応する終了タグや閉じカッコがあるかどうか、逆に、開始タグのない終了タグがないかを検証できます。

タグの対応の確認

コードビューでドキュメントを開きます。
チェック対象のネストされたコード内に挿入ポイントを置きます。
編集／親タグを選択を選択します。

コード内の対応するタグ（およびその内容）が選択されます。Dreamweaver では、タグが正しく対応している場合、編集／親タグを選択の選択を続けると、最終的に最も外側の html タグと /html タグが選択されます。

カッコ、波カッコ、または角カッコの対応の確認

コードビューでドキュメントを開きます。
チェック対象のコード内に挿入ポイントを置きます。
編集／コード／カッコ内を選択を選択します。

対応しているカッコ、波カッコ、または角カッコで囲まれるコードがすべて選択されます。編集／コード／カッコ内を選択をもう一度選択すると、新規選択範囲を囲むカッコ、波カッコ、または角カッコ内のコードがすべて選択されます。

ブラウザーの互換性のチェック

ブラウザー互換性チェック（BCC）機能は、ブラウザー表示上のバグを発生させる可能性がある HTML と CSS の組み合わせを見つける場合に役立ちます。この機能により、ターゲットブラウザーではサポートされていない CSS のプロパティや値がドキュメント内のコードにあるかどうかもテストできます。

XML ドキュメントの検証

バリデーターの環境設定や、検証対象とする特定の問題、およびバリデーターが報告するエラーのタイプを指定できます。

次のいずれかの操作を実行します。
- XML または XHTML ファイルの場合は、ファイル／バリデート／XML 形式を選択します。
- 結果パネルの「バリデーター」タブに、エラーや警告がないことを示すメッセージが表示されます。シンタックスエラーが見つかった場合は、それらのエラーが一覧表示されます。
エラーメッセージをダブルクリックすると、ドキュメントのエラーがハイライト表示されます。
レポートを XML ファイルとして保存するには、「レポートの保存」ボタンをクリックします。
プライマリブラウザー（レポートを印刷できる）にレポートを表示するには、「レポートの参照」ボタンをクリックします。

W3C バリデーターによるドキュメント検証

Dreamweaver には W3C バリデーターをサポートする機能が組み込まれており、標準仕様に準拠した Web ページの作成に役立ちます。W3C バリデーターでは、HTML および XML ドキュメントが HTML、XHTML または XML の標準仕様を満たしているかどうかを検証できます。検証対象としては、開いているドキュメントを指定することも、ライブサーバー上に置かれたファイルを指定することもできます。

検証を実行すると、ファイルのエラー修正作業に使用できるレポートが生成されます。

注意：

Dreamweaver の環境設定では、検証する必要があるドキュメントにパーサーを指定できます。この環境設定は、DOCTYPE を自動的に検出できない場合に代替設定として使用されます。

開いているドキュメントの検証

ウィンドウ／結果／検証を選択し、検証パネルを開きます。このパネルには、検証の結果が表示されます。
ファイル／バリデート／現在のドキュメント（W3C）を選択します。

ライブドキュメントの検証

Dreamweaver でライブドキュメントの検証を実行すると、ブラウザーによって受信されるコードが検証の対象となります。これは、ブラウザーを右クリックし、ページソースの表示オプションを選択した場合に表示されるコードです。ライブドキュメントの検証機能は、PHP や JSP などを使用する動的なページを検証するとき非常に便利です。

「ライブドキュメントをバリデート」オプションは、検証対象ページ URL の先頭が http の場合にのみ有効となります。

ウィンドウ／結果／検証を選択し、検証パネルを開きます。このパネルには、検証の結果が表示されます。
「ライブビュー」をクリックします。
ファイル／バリデート／ライブドキュメント（W3C）を選択します。

ライブドキュメントの場合、W3C 検証パネルに表示されたエラーをダブルクリックすると別のウィンドウが表示されます。このウィンドウでは、ブラウザーで生成されたコードが表示され、エラーに該当する行がハイライトされています。

検証設定のカスタマイズ

ウィンドウ／結果／検証を選択し、検証パネルを開きます。
W3C 検証パネルで、W3C 検証（再生）アイコンをクリックします。「設定」を選択します。
そのドキュメントに対して DOCTYPE が明示的に指定されていない場合は、検証する DOCTYPE を選択します。
エラーや警告を表示しないようにする場合は、該当するオプションを解除します。
W3C 検証パネルで非表示にした警告やエラーを削除する場合は、「管理」をクリックします。削除した警告やエラーは、W3C 検証パネルで「すべて表示」を選択した場合にも表示されません。
検証の開始時に W3C バリデーター通知ダイアログが表示されないようにするには、「W3C バリデーター通知ダイアログを表示しない」を選択します。

検証レポートを使用した作業

検証が終了すると、W3C 検証パネルに検証レポートが表示されます。

エラーまたは警告の詳細情報を表示するには、W3C 検証パネルで目的のエラーや警告を選択し、「詳細情報」をクリックします。
レポートを XML ファイルとして保存するには、「レポートの保存」をクリックします。
レポート全体を HTML 形式で表示するには、「レポートの参照」をクリックします。HTML レポートには、すべてのエラーと警告が要約情報と共に記載されています。
エラーに該当するコード内の位置にジャンプするには、W3C 検証パネルで目的のエラーを選択し、「オプション」ボタンをクリックして、「行へ移動」を選択します。
エラーまたは警告を非表示にするには、そのエラーまたは警告を選択し、「オプション」ボタンをクリックして、「エラーを表示しない」を選択します。
エラーと警告を、非表示にしたものを含めすべて表示するには、「オプション」ボタンをクリックし、「すべて表示」を選択します。環境設定ダイアログボックスで削除したエラーや警告については表示されません。
W3C 検証パネルに表示された結果をすべてクリアするには、「オプション」ボタンをクリックし、「結果の消去」を選択します。

バリデーターの環境設定

標準の W3C バリデーターに加え、Dreamweaver では拡張機能としてインストールされる外部コードバリデーターがサポートされます。外部バリデーター拡張機能をインストールすると、環境設定ダイアログボックスの「W3C バリデーター」カテゴリーに環境設定が一覧表示されます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリーリストから「W3C バリデーター」を選択します。
バリデートの基準とするタグライブラリを選択します。

同じタグライブラリまたは言語の複数のバージョンを選択することはできません。例えば、HTML 4.01 を選択したら HTML 5 は選択できません。検証する一番古いバージョンを選択します。例えば、ドキュメントに有効な HTML 4.01 コードが含まれていれば、HTML 5 コードも有効ということになります。
バリデーターが報告するエラーと警告のタイプについて「表示」オプションを選択します。
「適用」をクリックして変更を適用し、「閉じる」をクリックして環境設定ダイアログボックスを閉じます。

XHTML 準拠ページの作成

新しいページを作成する際に、そのページを XHTML 準拠にすることができます。また、既存の HTML ドキュメントを XHTML 準拠にすることもできます。

XHTML 準拠のドキュメントの作成

ファイル／新規を選択します。
作成するページのカテゴリーとタイプを選択します。
ダイアログボックスの右端にあるドキュメントタイプポップアップメニューから、いずれかの XHTML ドキュメントタイプ定義（DTD）を選択して「作成」をクリックします。

例えば、ポップアップメニューから「XHTML 1.0 Transitional」または「XHTML 1.0 Strict」を選択すると、HTML ドキュメントを XHTML 準拠にできます。

注意：

すべてのタイプのドキュメントを XHTML 準拠にできるわけではありません。

初期設定による XHTML 準拠ドキュメントの作成

編集／環境設定または Dreamweaver／環境設定（Mac OS X）を選択し、「新規ドキュメント」カテゴリを選択します。
初期設定ドキュメントを選択し、初期設定ドキュメントタイプ（DTD）ポップアップメニューからいずれかの XHTML ドキュメントタイプ定義を選択して「OK」をクリックします。

例えば、ポップアップメニューから「XHTML 1.0 Transitional」または「XHTML 1.0 Strict」を選択すると、HTML ドキュメントを XHTML 準拠にできます。

既存の HTML ドキュメントの XHTML 対応化

ドキュメントを開き、次のいずれかの操作をおこないます。
- フレームのないドキュメントの場合は、ファイル／変換を選択し、いずれかの XHTML ドキュメントタイプ定義を選択します。
  例えば、ポップアップメニューから「XHTML 1.0 Transitional」または「XHTML 1.0 Strict」を選択すると、HTML ドキュメントを XHTML 準拠にできます。
- フレームのあるドキュメントの場合は、フレームを選択してからファイル／変換を選択し、いずれかの XHTML ドキュメントタイプ定義を選択します。
ドキュメント全体を変換する場合は、この手順をすべてのフレームおよびフレームセットドキュメントに対して行います。

注意：

テンプレートから作成したドキュメントは、そのテンプレートと同じ言語で維持する必要があるため変換できません。例えば、XHTML テンプレートに基づくドキュメントは XHTML のまま維持する必要があります。同様に、XHTML に準拠しない HTML テンプレートに基づくドキュメントは HTML で維持する必要があり、XHTML などの他の言語に変換することはできません。