コードの折りたたみと展開

最終更新日 : 2021年4月27日

Dreamweaver でコードの折りたたみと展開を行って、スクロールせずにドキュメントのセクションを表示する方法について説明します。

コードフラグメントを折りたたんだり（フォールドとも呼ばれます）展開したりして、スクロールせずにドキュメントの異なるセクションを表示できます。

例えば、ページの下の方にあるdivタグに適用されるheadタグ内のすべてのCSSルールを確認するには、headタグとdivタグの間のコードを折りたたんで、両方のコードセクションを一度に表示します。

コードの一部を選択して、折りたたむことができます。コードの折りたたみは、タグブロックベースで HTML、PHP、XML、SVG ファイルでも実行できます。 CSS、Less、Sass、SCSS、JSファイルでは、中括弧に基づいてコードを折りたたむことができます。

HTML ファイル：開始および終了 HTML タグに囲まれたコードが折りたたまれ、属性の初期値（ある場合）が折りたたまれたコードに表示されます。 Dreamweaverは、ブロック内のコードがタグセレクター、検索と置換、行に移動、エレメントクイックビュー、ライブビュー、または元に戻す/やり直しを通じて焦点を受けると自動的に展開されます。

選択が変更されると、コードは自動的に再び折りたたまれます。

メモ

Dreamweaver のテンプレートから作成したファイルの場合、そのテンプレートファイル（.dwt）内でコードが折りたたまれていても、すべてのコードが完全に展開された状態で表示されます。

コードの折りたたみサイズの設定

コードの折りたたみの既定サイズは 2 行です。この既定の設定では、コードが 2 行以上あるすべてのコード部分を折りたためます。 2行未満のコードフラグメントは、コードを選択することで折りたたむことができます。

コードフォールディングの最小行数を変更するには：

編集 > 環境設定（Windows）またはDreamweaver > 環境設定（Mac）をクリックします。

カテゴリリストで「コードフォーマット」をクリックし、最小コード折りたたみサイズを指定します。

既定では、コードビューではすべてのコードが展開されています。

ただし、複数の行を選択し、それらのコードを折りたためます。構文（タグブロックまたは中括弧）に基づいてコードを折りたたむこともできます。

メモ

コードブロックの折りたたまれた、または展開された状態は、Dreamweaver のセッション全体で保持されます。

タグブロックまたは中括弧に基づいてコードを折りたたむには：

コードビューでは、コードフォールディングサイズの環境設定で指定されたコードフォールディング行数より大きいコードブロックに対応する行番号の横に小さな三角形が表示されます。

三角形をクリックすると、コードが折りたたまれるか、展開されます。

メモ

ドキュメント内の折りたたまれたすべてのコードを展開するには、キーボードショートカット Ctrl+Alt+E（Windows）、Command+Alt+E（Mac）を使用します。

選択に基づいてコードを折りたたむには：

コードビューで、折りたたむコード部分を選択します。

三角形アイコンをクリックして、選択を折りたたんだり展開したりします。

折りたたまれたコード部分をクリックして選択します。

編集／コピーを選択します。

コードをペーストする位置にカーソルを置きます。

編集／ペーストを選択します。

Dreamweaver で美しい web サイトを構築
強力なオールインワンツールで動的な web サイトをデザイン、コーディング、管理できます。

コードヒントとコード補完機能

スニペットでコードを再利用する

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。