マニュアル キャンセル

コーディングの環境設定

  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 でコーディングの環境設定、コードテーマ、フォーマット、コードの書き換えの環境設定を設定する方法について説明します。

特定のニーズに合わせて、コードフォーマットやコードカラーリングなど、コーディングに関する各種の環境設定を指定できます。

注意:
  • 高度な環境設定を行うには、タグライブラリエディターを使用します(詳しくは、タグライブラリの管理を参照してください)。
  • Dreamweaver では、CSS、JS および PHP ファイルタイプでのフォーマットの適用がサポートされています。PHP、CSS、JS コードフォーマットのカスタマイズ方法について詳しくは、コードのフォーマットを参照してください。

コードの表示方法の設定

ワードラップの設定、コードの行番号の表示、コードエレメントのシンタックスカラーリングの設定、インデントの設定、非表示の文字の表示は、表示/コードビューオプションメニューから行います。

  1. コードビューまたはコードインスペクターでドキュメントを表示します。
  2. 表示/コードビューオプションを選択します。

  3. 必要に応じて以下のオプションを選択または選択解除します。

    ワードラップ

    コードがウィンドウ幅に合わせて折り返され、水平方向にスクロールすることなく参照できるようになります。これはコードを見やすくするための機能で、実際に改行が挿入されるわけではありません。

    行番号

    コードの横に行番号を表示します。

    非表示の文字

    ホワイトスペースの代わりに特殊文字を表示します。例えば、スペースはドットに置き換わり、タブは二重山カッコに置き換わり、改行は段落マーカーに置き換わります。

    注意:

    ワードラップ用に Dreamweaver で表示されるソフト改行は、段落マーカーと一緒には表示されません。

    シンタックスカラーリング

    コードの色付けを有効または無効にします。カラーリングスキームの変更方法については、コードカラーリングの設定を参照してください。

    自動インデント

    コードの入力中に Enter キーが押されたときに、コードを自動的にインデント表示します。コードの新しい行は、前の行と同じレベルにインデントされます。インデント幅の変更方法については、コードフォーマットの変更の「タブサイズ」オプションを参照してください。

コードフォーマットの変更

コードの表示を変更するには、フォーマット環境設定でインデント、行の長さ、タグ名と属性名の大文字と小文字の区別などを指定します。

「常に無視する」を除くすべてのコードフォーマットオプションは、新規ドキュメントか、または既存のドキュメントに対する新規追加分にのみ自動適用されます。

既存の HTML ドキュメントのフォーマットを変更するには、そのドキュメントを開いて、編集/コード/ソースフォーマットの適用を選択します。

  1. 編集/環境設定を選択します。
  2. 左のカテゴリーリストから「コードフォーマット」を選択します。
  3. 次のいずれかのオプションを設定します。

    インデント

    Dreamweaver で生成されるコードを(コードフォーマット環境設定で指定したインデント規則に従って)インデントするかどうかを指定します。

    注意:

    このダイアログボックスのインデントオプションのほとんどは、Dreamweaver によって生成されるコードにのみ適用され、ユーザーが入力したコードには適用されません。ユーザーが入力した新しいコード行を前の行と同じレベルにインデントするには、表示/コードビューオプション/自動インデントを選択します。詳しくは、コードフォーマットの設定を参照してください。

    以下を使用

    (テキストボックスおよびポップアップメニュー)Dreamweaver で生成されるコードのインデントに使用するスペースまたはタブの数を指定します。例えば、テキストボックスに「3」と入力し、ポップアップメニューで「タブ」を選択すると、Dreamweaver によって生成されるコードは各インデントレベルで 3 つのタブ文字を使用してインデントされます。

    タブサイズ

    コードビューに表示する各タブの幅を文字数で指定します。例えば、「タブサイズ」を 4 に設定すると、コードビューに表示される各タブの幅は、4 つの空白文字分になります。このとき、「インデント」オプションで「タブ」および「3」に設定されていると、Dreanweaver によって生成されるコードは各インデントレベルで 3 つのタブ文字を使用してインデントされるので、コードビューでは 12 文字分の空白が表示されます。

    注意:

    Dreamweaver では、スペースまたはタブを使用してインデントが設定されます。コードの挿入時に一連のスペースがタブに変換されることはありません。

    Emmet

    コーディング時に Emmet 省略コードを使用する場合は、このオプションを選択します。このオプションを選択した場合、Tab キーを押すと、Emmet 省略コードが完全な HTML コードまたは CSS コードに変換されます。Emmet の使用法について詳しくは、Dreamweaver での Emmet ツールキットの使用を参照してください。

    改行タイプ

    リモートサイトのホストとして動作するリモートサーバーの種類(Windows、Mac OS、または UNIX)を指定します。正しい改行タイプを選択することにより、リモートサーバー上で HTML ソースコードが正しく表示されます。この改行設定は、特定の種類の改行文字しか認識しない外部テキストエディターで作業するときにも有用です。例えば、外部エディターとしてメモ帳(Windows)を使用する場合は CR LF を設定し、SimpleText(Mac OS)を使用する場合は CR を設定します。

    注意:

    FTP を使用して接続する各サーバーでは、このオプションはバイナリ転送モードにのみ適用されます。Dreamweaver の ASCII 転送モードでは、このオプションは無視されます。ASCII モードでファイルをダウンロードする場合、Dreamweaver では、使用しているコンピューターのオペレーティングシステムに基づいて改行が設定されます。一方、ASCII モードでファイルをアップロードする場合は、すべての改行が CR LF に設定されます。

    TD タグ:TD タグ内に改行を含めない

    <td> タグの直後または </td> タグの直前に空白文字または改行があるときに、一部の古いブラウザーで起こる表示上の問題に対処します。このオプションを選択すると、Dreamweaver では <td> タグの後または </td> タグの前に改行が必要なフォーマットがタグライブラリで設定されている場合でも、それらの位置に改行が挿入されなくなります。

    詳細フォーマット

    タグライブラリエディターで、個々のタグや属性の書式設定オプションを設定できます。

    空白文字

    (日本語版のみ)HTML コード用に &nbsp; または全角スペースのいずれかを選択できます。ここで選択した空白文字は、テーブルの作成時や、日本語エンコーディングのページで「連続するスペースを入力可能にする」オプションがオンになっている場合に、空のタグに使用されます。

    コード折りたたみ最小サイズ

    コードの折りたたみの既定サイズは 2 行です。この既定の設定では、コードが 2 行以上あるすべてのコード部分を折りたためます。2 行未満のコード部分は、コードを選択することによってのみ、折りたたむことができます。詳しくは、コードの折りたたみと展開を参照してください。

コードの書き換えの環境設定

コードの書き換えの環境設定では、ドキュメントを開いたとき、フォームのエレメントをコピー&ペーストしたとき、プロパティインスペクターなどのツールを使用して属性値や URL を入力したときに、コードを自動的に修正するかどうかと、その方法を指定します。この環境設定の内容は、コードビューでの HTML やスクリプトの編集には影響しません。

コードの書き換えのオプションを無効にすると、ドキュメントウィンドウ上の HTML に、本来であれば書き換えられる無効なマークアップアイテムが表示されます。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。
  2. 左のカテゴリーリストから「コードの書き換え」を選択します。
  3. 次のいずれかのオプションを設定します。

    無効なネストや開始タグを修正する

    オーバーラップしているタグを書き換えます。例えば、<b><i>text</b></i> は、<b><i>text</i></b> に書き換えられます。このオプションを選択すると、閉じ引用符や閉じカッコが抜けている場合、適宜挿入されます。

    ペーストするときにフォームアイテムの名前を変更

    フォームオブジェクト名の重複を回避できます。このオプションは初期設定では有効になっています。

    注意:

    この環境設定ダイアログボックス内の他のオプションと異なり、このオプションは、ドキュメントを開いたときには適用されず、フォームエレメントをコピー&ペーストしたときにのみ適用されます。

    余分な終了タグを削除する

    対応する開始タグがない終了タグを削除します。

    タグの修正や削除の際に警告する

    技術的に誤りがあり、Dreamweaver によって修正された HTML についての要約を表示します。この要約には、問題のある場所の行番号と桁位置が示されるため、修正された部分を参照して、適切に処理されているかどうかを確認できます。

    コードの書き換え禁止:拡張子付きのファイル内

    指定した拡張子のファイルについて、コードを書き換えないように Dreamweaver を設定できます。これは、サードパーティのタグはファイルに含まれている場合に役立ちます。

    & を使用して属性値の <、>、&、" をエンコード

    プロパティインスペクターなどの Dreamweaver ツールを使用して入力または編集した属性値を、正当な文字だけで構成されるように自動修正します。このオプションは初期設定では有効になっています。

    注意:

    このオプションおよび後続のオプションは、コードビューで入力した URL には適用されません。また、ファイル内の既存のコードは変更されません。

    特殊文字をエンコードしない

    正当な文字だけが使用されるように、Dreamweaver による URL の自動修正機能を無効にします。このオプションは初期設定では有効になっています。

    &# を使用して URL の特殊文字をエンコード

    プロパティインスペクターなどの Dreamweaver ツールを使用して URL を入力または編集した場合、これらの URL が正当な文字だけで構成されるように自動修正します。

    % を使用して URL の特殊文字をエンコード

    1 つ前のオプションと同じ処理が行われますが、特殊文字のエンコード方法が異なります。このエンコード方法(パーセント記号を使用)の方が古いブラウザーとの互換性という点では優れていますが、一部の言語の文字を適切に処理できません。

コードヒントの環境設定

コードヒントの環境設定では、コードヒントの動作方法を設定できます。 

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

    コードヒントの環境設定

  2. 左のカテゴリーから「コードヒント」を選択します。

  3. 次のいずれかのオプションを設定します。

    終了タグ

    Dreamweaver でのタグの閉じ方を指定します。

    • "</" の入力後 - 
    • 開始タグ ">" の入力後 - 開始タグを閉じた後に終了タグが自動的に追加されるようにしたい場合は、このオプションを選択します。
    • Never(閉じない)- 終了タグが自動的に追加されないようにするには、このオプションを設定します。

    コードヒントを使用可能にする

    Dreamweaver でのコードヒントとコード補完機能を有効または無効にするには、このオプションを選択します。Dreamweaver のコードヒントとコード補完機能について詳しくは、コードヒントとコード補完機能を参照してください。

    ツールヒントを有効にする

    コードヒントに説明が表示されるようにするには、このオプションを選択します。これらの説明では、記述しているコードについての追加情報が示されます。

    括弧を自動挿入  オンにすると、ユーザーが開始括弧を入力するたびに、閉じ括弧が自動的に挿入されます。オフにすると、ユーザーが開始括弧を入力しても閉じ括弧は挿入されません。すべてのファイルタイプ(html、php、css、js)で、すべての種類の括弧に適用されます。

    引用符を自動挿入  オンにすると、ユーザーが開始引用符を入力するたびに、閉じ引用符が自動的に挿入されます。オフにすると、ユーザーが開始引用符を入力しても閉じ引用符は挿入されません。すべてのファイルタイプ(html、php、css、js)で、一重引用符と二重引用符の両方に適用されます。

コードの自動補完の環境設定を指定する

カッコや引用符の自動挿入を有効または無効にするには、次の手順を実行します。

  1. 次の場所から brackets.json ファイルを開きます。

    • Windows の場合: %appdata%¥Adobe¥Dreamweaver CC 2018¥en_US¥Configuration¥Brackets¥
    • Mac の場合:~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
       
  2. 角括弧、丸括弧の閉じ括弧の自動挿入を無効にするには、autoCloseBraces を False に設定します。

  3. 対応する引用符の自動挿入を無効にするには、autoCloseQuotes を False に設定します。

    閉じ括弧、閉じ引用符の自動挿入を有効にするは、上記の値を true に設定します。

    Dreamweaver でコードの自動補完の環境設定を指定する
    Dreamweaver でコードの自動補完の環境設定を指定する

  4. .json ファイルを保存し、Dreamweaver を再起動します。

PHP 環境設定の指定

目的の PHP コーディング開発環境を設定できます。作業対象の個々のサイトごとに、または Dreamweaver サイト外に保存されたすべての PHP ファイル全体に対して設定できます。

Dreamweaver により、選択した PHP 各国語バージョンのコードヒントと構文チェックが設定されます。

非サイト固有のファイルの PHP コードバージョンの環境設定を指定するには、次の手順を実行します。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

  2. 左のカテゴリーリストから「PHP」を選択します。

  3. PHP バージョンドロップダウンリストから PHP バージョンを選択し、「適用」をクリックします。

特定サイトの PHP バージョンを設定するには、次の手順を実行します。

  1. サイト設定ダイアログボックスの「詳細設定」で「PHP」を選択します。

  2. PHP バージョンドロップダウンリストから PHP バージョンを選択し、「保存」をクリックします。

    サイト固有の PHP 環境設定の指定
    サイト固有の PHP 環境設定の指定

カラーテーマとコードテーマの設定

Dreamweaver の起動時に、環境設定に応じたカラーテーマを選択できます。この環境設定はいつでも変更できます。

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

  3. カラーテーマリストからテーマを選択します。

  4. インターフェイステーマを設定したら、コードテーマを設定します。

    暗めのテーマと明るめのテーマから選択できます。

  5. 「適用」をクリックして変更を保存します。

    必要に応じて、さらにコードカラーリングをカスタマイズできます。詳しくは、コードカラーリングのカスタマイズを参照してください。

外部エディターの使用

特定の拡張子のファイルを編集するときに使用する外部エディターを指定できます。例えば、Dreamweaver から BBEdit、メモ帳、TextEdit などのテキストエディターを起動して、JavaScript(JS)ファイルを編集できます。

様々なファイル拡張子に異なる外部エディターを割り当てることができます。

ファイルタイプに対する外部エディターの設定

  1. 編集/環境設定を選択します。
  2. 左側のカテゴリーリストから「ファイルタイプ/エディター」を選択し、オプションを設定して「OK」をクリックします。

    コードビューで開く

    Dreamweaver のコードビューで自動的に開くファイルの拡張子を指定します。

    変更をリロード

    Dreamweaver で開かれているドキュメントが外部エディターで変更された場合に、Dreamweaver によって検出される動作を指定します。

    実行時に保存

    Dreamweaver で編集中のドキュメントを、外部エディターを起動する前に必ず保存するか、ドキュメントを保存しないか、または外部エディターを起動するたびに保存の確認を行うかを指定します。

    Fireworks

    アプリケーションへのパスをここで指定することによって、Dreamweaver に Fireworks を接続することができます。

アドビのロゴ

アカウントにログイン