マニュアル キャンセル

デザインビューでのコードの編集

  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 サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

このトピックでは、Adobe Dreamweaver のプロパティインスペクターを使用してデザインビューでコードを編集する方法について説明します。

Dreamweaver では、基になるソースコードを記述しなくても、Web ページを視覚的に作成して編集することができます。ただし、作成した Web ページの細かな調整やトラブルシューティングを行うために、コードを直接編集する必要が生じる場合もあります。Dreamweaver では、デザインビューで作業しながら一部のコードを編集することができます。

このセクションは、主にデザインビューで作業しながら、コードもすばやく確認したいというユーザーを対象にしています。

デザインビューでの子タグの選択

デザインビューで子タグを含むオブジェクト(例えば HTML テーブル)を選択した状態で編集/子タグを選択すると、そのオブジェクトの最初の子タグをすばやく選択できます。

注意:

このコマンドは、デザインビューのみで有効になります。

例えば、<table> タグには、通常 <tr> という子タグがあります。タグセレクターで <table> タグを選択する場合、編集/子タグを選択すると、テーブルの最初の行を選択できます。Dreamweaver により、タグセレクターの最初の <tr> タグが選択されます。<tr> タグには子タグ(<td> タグ)があるので、再度編集/子タグを選択すると、テーブルの最初の子セルが選択されます。

プロパティインスペクターでのコードの編集

プロパティインスペクターを使用して、ページ上のテキストやオブジェクトの属性を調べたり、編集することができます。一般に、プロパティインスペクターに表示されるプロパティはタグの属性と対応しています。プロパティインスペクターでプロパティを変更すると、通常、それに対応する属性をコードビューで変更した場合と同じ結果が得られます。

注意:

タグインスペクターおよびプロパティインスペクターのどちらでも、タグの属性を表示および編集できます。タグインスペクターでは、タグに関連付けられたすべての属性を表示および編集できます。プロパティインスペクターには一部の最も一般的な属性しか表示されませんが、属性値の変更機能がタグインスペクターよりも充実しており、特定のタグに対応していない特定のオブジェクト(テーブル列など)を編集することができます。

  1. ページ上でテキストをクリックするか、オブジェクトを選択します。

    ドキュメントウィンドウの下に、テキストまたはオブジェクトのプロパティインスペクターが表示されます。プロパティインスペクターが表示されない場合は、ウィンドウ/プロパティを選択します。

  2. プロパティインスペクターで、属性を変更します。

プロパティインスペクターでの CFML の編集

プロパティインスペクターを使用して、デザインビューで ColdFusion マークアップを調べたり、修正したりすることができます。

  1. プロパティインスペクターで「属性」ボタンをクリックして、タグの属性を編集するか、または新しい属性を追加します。
  2. 開始タグと終了タグの間にコンテンツが含まれている場合は、「コンテンツ」ボタンをクリックして、そのコンテンツを編集します。

    「コンテンツ」ボタンは、選択されたタグが空のタグでない場合(つまり、開始タグと終了タグが両方ともある場合)のみ表示されます。

  3. タグに条件式が含まれている場合は、「式」ボックスでその条件式を変更してください。

クイックタグ編集の概要

クイックタグ編集を使用すると、HTML タグの確認、挿入、編集をデザインビューを離れずに簡単に行うことができます。

クイックタグ編集で無効な HTML を入力すると、Dreamweaver によって閉じ引用符や山形閉じカッコが必要な箇所に挿入され、自動的に修正されます。

クイックタグ編集のオプションを設定するには、Ctrl + T(Windows)または Command + T(Mac OS)を押してクイックタグ編集を開きます。

クイックタグ編集には以下の 3 つのモードがあります。

  • HTML の挿入モードでは、新しい HTML コードを挿入できます。
  • タグの編集モードでは、既存のタグを編集できます。
  • HTML の挿入モードでは、新しい HTML コードを挿入できます。

  • タグの編集モードでは、既存のタグを編集できます。

  • 折り返しタグモードでは、現在の選択範囲を新しいタグで囲むことができます。

注意:

クイックタグ編集で使用されるモードは、デザインビューで現在選択している内容に応じて決まります。

いずれのモードでも、クイックタグ編集を使用する際の基本手順は同じです。つまり、エディターを開き、タグと属性を入力または編集して、エディターを閉じます。

クイックタグ編集をアクティブにして、Ctrl + T(Windows)または Command + T(Mac OS)を押すと、各モードに順番に切り替えることができます。 

クイックタグ編集でのコードの編集

クイックタグ編集(編集/クイックタグ編集)を使用して、HTML タグの挿入と編集をデザインビューを離れずに簡単に行うことができます。

HTML タグの挿入

  1. デザインビューで、コードを挿入するページ内の場所をクリックして、挿入ポイントを置きます。
  2. Ctrl + T(Windows)または Command + T(Mac OS)を押します。

    HTML の挿入モードで、クイックタグ編集が開きます。

    「HTML の挿入」モードでのクイックタグ編集
    「HTML の挿入」モードでのクイックタグ編集

  3. HTML タグを入力して Enter キーを押します。

    タグがコードに挿入され、対応する終了タグがある場合はそれも挿入されます。

  4. 変更しないで終了する場合は、Esc キーを押します。

HTML タグの編集

  1. デザインビューでオブジェクトを選択します。

    ドキュメントウィンドウの最下段にあるタグセレクターから、編集するタグを選択することもできます。詳しくは、タグセレクターでのコードの編集を参照してください。

  2. Ctrl + T(Windows)または Command + T(Mac OS)を押します。

    タグの編集モードで、クイックタグ編集が開きます。

  3. 新しい属性を入力するか、既存の属性を編集します。またはタグ名を変更します。
  4. 次の属性に進むには Tab キーを押します。前の属性に戻るには Shift + Tab を押します。
    注意:

    初期設定では、Tab キーまたは Shift + Tab を押すと、変更がドキュメントに適用されます。

  5. すべての変更を適用してクイックタグ編集を閉じるには、Enter キーを押します。
  6. これ以上変更しないで終了するには、Esc キーを押します。

選択範囲を HTML タグで囲む

  1. デザインビューで、書式設定されていないテキストまたはオブジェクトを選択します。
    注意:

    開始 HTML タグまたは終了 HTML タグを含むテキストやオブジェクトを選択した場合、クイックタグ編集は、折り返しタグモードではなくタグの編集モードで開きます。

  2. Ctrl + T(Windows)または Command + T(Mac OS)を押すか、またはプロパティインスペクターの「クイックタグ編集」ボタンをクリックします。

    折り返しタグモードで、クイックタグ編集が開きます。

  3. strong などの単一の開始タグを入力し、Enter キー(Windows)または Return キー(Mac OS)を押します。

    現在の選択部分の始めに開始タグが挿入され、終わりに終了タグが挿入されます。

  4. これ以上変更しないで終了するには、Esc キーを押します。

クイックタグ編集でのヒントメニューの使用

クイックタグ編集には、編集中または挿入中のタグに指定可能な属性を一覧表示する属性ヒントメニューがあります。

クイックタグ編集では、ヒントメニューを使用不可にしたり、メニューが表示されるまでの待ち時間を調節することもできます。

タグに指定できる属性をヒントメニューに一覧表示するには、クイックタグ編集で属性名の編集中に数秒間作業を停止します。ヒントメニューが表示され、編集中のタグで使用できるすべての属性が一覧表示されます。

同様に、有効なタグ名をヒントメニューで表示するには、クイックタグ編集でタグ名の入力中または編集中に数秒間作業を停止します。

注意:

クイックタグ編集のコードヒントの環境設定は、通常のコードヒントの環境設定によって制御されます。詳しくは、コードヒントの環境設定を参照してください。

  1. 次のいずれかの操作を実行します。
    • タグ名または属性名の入力を開始します。コードヒントメニューで選択すると、入力した文字で始まる最初の項目にジャンプします。

    • 上向き矢印キーや下向き矢印キーを使用して項目を選択してください。

    • 項目を探すには、スクロールバーを使用します。

  2. 選択した項目を挿入するには、Enter キーを押すか、項目をダブルクリックします。
  3. 項目を挿入しないでヒントメニューを閉じるには、Esc キーを押すか、入力を続けます。

ヒントメニューの無効化または表示待ち時間の調整

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択し、「コードヒント」を選択します。

    「コードヒント」環境設定ダイアログボックスが表示されます。

  2. ヒントメニューを使用不可にするには、「コードヒントを使用可能にする」オプションをオフにします。

タグセレクターでのコードの編集

タグセレクターを使用すると、デザインビューを離れずに、タグを選択、編集、または削除することができます。タグセレクターはドキュメントウィンドウの最下部のステータスバーに表示され、一連のタグで構成されています。

タグの編集または削除

  1. ドキュメント内をクリックします。

    挿入ポイントに適用できるタグが、タグセレクターに表示されます。

  2. タグセレクターのタグを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)します。
  3. タグを編集するには、メニューから「タグの編集」を選択します。クイックタグ編集で適宜変更を行います。詳しくは、クイックタグ編集でのコードの編集を参照してください。
  4. タグを削除するには、メニューから「タグを削除」を選択します。

タグに対応するオブジェクトの選択

  1. ドキュメント内をクリックします。

    挿入ポイントに適用できるタグが、タグセレクターに表示されます。

  2. タグセレクターのタグをクリックします。

    タグで表示されるオブジェクトが、ページ上で選択されます。

    注意:

    この方法を使用して、テーブルの行(tr タグ)またはセル(td タグ)をそれぞれ選択します。

デザインビューでのスクリプトの記述と編集

クライアントサイドの JavaScript と VBScript は、次の方法でコードビューでもデザインビューでも記述できます。

  • デザインビューを離れずに、作成しているページの JavaScript または VBScript を記述します。

  • デザインビューを離れずに、外部スクリプトファイルへのリンクをドキュメント内に作成します。

  • デザインビューを離れずに、スクリプトを編集します。

    作業を開始する前に、スクリプトマーカーがページに表示されるように、表示/ビジュアルエイド/不可視エレメントを選択しておいてください。

クライアントサイドスクリプトの記述

  1. スクリプトを挿入する場所に挿入ポイントを置きます。
  2. 挿入/HTML/スクリプトを選択します。

  3. ファイルの選択ウィンドウでスクリプトを選択します。

    注意:

    開始および終了の script タグを含める必要はありません。

選択したファイルのスクリプトタグがドキュメントに挿入されます。

スクリプトの編集

  1. スクリプトマーカーを選択します。
  2. プロパティインスペクターの、「編集」ボタンをクリックします。

    スクリプトプロパティダイアログボックスにスクリプトが表示されます。

    外部スクリプトファイルとリンクしている場合は、コードビューでファイルが開き、そこで編集することができます。

    注意:

    スクリプトタグの間にコードがある場合は、外部スクリプトファイルとリンクされていても、スクリプトプロパティダイアログボックスが開きます。

  3. 「言語」ボックスで、JavaScript または VBScript のいずれかをスクリプトの言語として指定します。
  4. タイプポップアップメニューで、スクリプトのタイプとしてクライアントサイドまたはサーバーサイドのいずれかを指定します。
  5. (オプション)「ソース」ボックスで、外部にリンクされたスクリプトファイルを指定します。

    フォルダーアイコンまたは「参照」ボタンをクリックして、ファイルを選択するか、またはパスを入力します。

  6. スクリプトを編集し、「OK」をクリックします。

デザインビューでの ASP サーバーサイドスクリプトの編集

ASP スクリプトのプロパティインスペクターを使用して、デザインビューで ASP サーバーサイドスクリプトを調べたり、修正したりすることができます。

  1. デザインビューで、サーバー言語タグのアイコンを選択します。
  2. ASP スクリプトのプロパティインスペクターで「編集」ボタンをクリックします。
  3. ASP サーバーサイドスクリプトを編集して「OK」をクリックします。

プロパティインスペクターによるページ上のスクリプトの編集

  1. プロパティインスペクターで、言語ポップアップメニューからスクリプト言語を選択するか、「言語」ボックスに言語名を入力します。
    注意:

    JavaScript を使用していてバージョンが不明な場合には、JavaScript1.1 や JavaScript1.2 ではなく JavaScript を選択してください。

  2. タイプポップアップメニューで、スクリプトのタイプとしてクライアントサイドまたはサーバーサイドのいずれかを指定します。
  3. (オプション)「ソース」ボックスで、外部にリンクされたスクリプトファイルを指定します。フォルダーアイコンをクリックしてファイルを選択するか、またはパスを入力します。

  4. 「編集」をクリックして、スクリプトを編集します。

JavaScript ビヘイビアーの使用

タグインスペクターの「ビヘイビアー」タブを使用して、JavaScript(クライアントサイド)ビヘイビアーをページエレメントに簡単に関連付けることができます。詳しくは、JavaScript に組み込まれているビヘイビアーの適用を参照してください。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン