マニュアル キャンセル

コードの最適化

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト

 

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

コードのクリーンアップ

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

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

  1. 開いている文書で、ツール/HTML のクリーンアップを選択します。

  2. 表示されたダイアログボックスで、任意のオプションを選択して「OK」をクリックします。
    注意:

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

    削除:空のタグ

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

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

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

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

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

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

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

    削除:特定のタグ

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

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

    同じ範囲のテキストが複数の font タグによって制御されている場合、これらのタグを結合します。例えば、<font size="7"><font color="#FF0000">big red</font></font><font size="7" color="#FF0000">big red</font> に変更されます。

    完了時にログを表示

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

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

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

タグの対応の確認

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

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

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

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

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

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

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

XML ドキュメントの検証

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

  1. 次のいずれかの操作を実行します。
    • XML または XHTML ファイルの場合は、ファイル/バリデート/XML 形式を選択します。

    • 結果パネルの「バリデーター」タブに、エラーや警告がないことを示すメッセージが表示されます。シンタックスエラーが見つかった場合は、それらのエラーが一覧表示されます。

  2. エラーメッセージをダブルクリックすると、ドキュメントのエラーがハイライト表示されます。
  3. レポートを XML ファイルとして保存するには、「レポートの保存」ボタンをクリックします。
  4. プライマリブラウザー(レポートを印刷できる)にレポートを表示するには、「レポートの参照」ボタンをクリックします。

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

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

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

注意:

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

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

  1. ウィンドウ/結果/検証を選択し、検証パネルを開きます。このパネルには、検証の結果が表示されます。

  2. ファイル/バリデート/現在のドキュメント(W3C)を選択します。

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

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

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

  1. ウィンドウ/結果/検証を選択し、検証パネルを開きます。このパネルには、検証の結果が表示されます。

  2. 「ライブビュー」をクリックします。

  3. ファイル/バリデート/ライブドキュメント(W3C)を選択します。

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

検証設定のカスタマイズ

  1. ウィンドウ/結果/検証を選択し、検証パネルを開きます。

  2. W3C 検証パネルで、W3C 検証(再生)アイコンをクリックします。「設定」を選択します。

  3. そのドキュメントに対して DOCTYPE が明示的に指定されていない場合は、検証する DOCTYPE を選択します。

  4. エラーや警告を表示しないようにする場合は、該当するオプションを解除します。

  5. W3C 検証パネルで非表示にした警告やエラーを削除する場合は、「管理」をクリックします。削除した警告やエラーは、W3C 検証パネルで「すべて表示」を選択した場合にも表示されません。

  6. 検証の開始時に W3C バリデーター通知ダイアログが表示されないようにするには、「W3C バリデーター通知ダイアログを表示しない」を選択します。

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

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

  • エラーまたは警告の詳細情報を表示するには、W3C 検証パネルで目的のエラーや警告を選択し、「詳細情報」をクリックします。

  • レポートを XML ファイルとして保存するには、「レポートの保存」をクリックします。

  • レポート全体を HTML 形式で表示するには、「レポートの参照」をクリックします。HTML レポートには、すべてのエラーと警告が要約情報と共に記載されています。

  • エラーに該当するコード内の位置にジャンプするには、W3C 検証パネルで目的のエラーを選択し、「オプション」ボタンをクリックして、「行へ移動」を選択します。

  • エラーまたは警告を非表示にするには、そのエラーまたは警告を選択し、「オプション」ボタンをクリックして、「エラーを表示しない」を選択します。

  • エラーと警告を、非表示にしたものを含めすべて表示するには、「オプション」ボタンをクリックし、「すべて表示」を選択します。環境設定ダイアログボックスで削除したエラーや警告については表示されません。

  • W3C 検証パネルに表示された結果をすべてクリアするには、「オプション」ボタンをクリックし、「結果の消去」を選択します。

バリデーターの環境設定

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

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。
  2. 左の カテゴリーリストから「W3C バリデーター」を選択します。

  3. バリデートの基準とするタグライブラリを選択します。

    同じタグライブラリまたは言語の複数のバージョンを選択することはできません。例えば、HTML 4.01 を選択したら HTML 5 は選択できません。検証する一番古いバージョンを選択します。例えば、ドキュメントに有効な HTML 4.01 コードが含まれていれば、HTML 5 コードも有効ということになります。

  4. バリデーターが報告するエラーと警告のタイプについて「表示」オプションを選択します。
  5. 「適用」をクリックして変更を適用し、「閉じる」をクリックして環境設定ダイアログボックスを閉じます。

XHTML 準拠ページの作成

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

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

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

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

    注意:

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

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

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

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

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

  1. ドキュメントを開き、次のいずれかの操作をおこないます。

    • フレームのないドキュメントの場合は、ファイル/変換を選択し、いずれかの XHTML ドキュメントタイプ定義を選択します。

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

    • フレームのあるドキュメントの場合は、フレームを選択してからファイル/変換を選択し、いずれかの XHTML ドキュメントタイプ定義を選択します。

  2. ドキュメント全体を変換する場合は、この手順をすべてのフレームおよびフレームセットドキュメントに対しておこないます。

注意:

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

アドビのロゴ

アカウントにログイン