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

コードの一部を折りたたむか展開表示することで、スクロールバーを使用せずにドキュメントの異なる部分を表示できます。

例えば、ページの下部にある div タグに適用される head タグ内のすべての CSS ルールを表示する場合は、head タグと div タグに囲まれているすべてのコードを折りたたんで、両方のコード部分を一度に表示できます。

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

  • HTML ファイル:開始および終了 HTML タグに囲まれたコードが折りたたまれ、属性の初期値(ある場合)が折りたたまれたコードに表示されます。折りたたまれたコードブロックは、タグセレクター、検索/置換、行移動、エレメントクイックビュー、ライブビュー、取り消し/やり直しによってそのブロック内のコードがフォーカスされた場合に、自動的に展開されます。

これらの選択内容が変更されると、コードは自動的に再度折りたたまれます。

  • CSS、Less、Sass、SCSS、JS ファイル:波カッコ内のコードが折りたたまれ、プレビューが {...} として表示されます。
  • PHP ファイル:PHP コードブロックに加え、HTML エレメント、CSS および JS コードブロックが折りたたまれます。

注意:

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

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

コードの折りたたみの既定サイズは 2 行です。この既定の設定では、コードを折りたたむ際、コードが 2 行以上あるすべてのコード部分が折りたたまれます。2 行未満のコードは、展開された状態で表示されます。

コードの折りたたみ最小行数を変更するには:

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac)をクリックします。

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

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

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

ただし、複数の行を選択し、それらのコードを折りたためます。また、タグブロックや波カッコの構文に基づいて、コードを折りたためます。

注意:

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

タグブロックまたは波カッコに基づいたコードの折りたたみ

タグブロックまたは波カッコに基づいてコードを折りたたむには:

  1. コードビューで、折りたたむまたは展開するコードブロックに対応する行番号列をマウスでポイントします。小さな三角形が行番号の横に表示されます。

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

    注意:

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

    タグブロックを使用したコードの折りたたみ
    タグブロックを使用したコードの折りたたみ(スクリーンショットの更新が必要)

選択内容に基づいたコードの折りたたみ

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

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

    コードを選択すると、行番号列に折りたたみアイコンが表示されます。

  2. このアイコンをクリックして、選択範囲の折りたたみと展開を行います。

    コードを折りたたむと、折りたたみアイコンは展開アイコンに変わります。

    選択したコードの折りたたみ
    選択したコードの折りたたみ(スクリーンショットの更新が必要)

    コードの展開(スクリーンショットの更新が必要)
    コードの展開(スクリーンショットの更新が必要)

キーボードショートカットによるコードの折りたたみと展開

コマンド

Windows

Mac OS

選択範囲をたたむ

Ctrl+Shift+C

Command+Shift+C

選択範囲以外をたたむ

Ctrl+Alt+C

Command+Alt+C

選択範囲を展開

Ctrl+Shift+E

Command+Shift+E

フルタグをたたむ

Ctrl+Shift+J

Command+Shift+J

選択範囲以外のフルタグをたたむ

Ctrl+Alt+J

Command+Alt+J

すべて展開

Ctrl+Alt+E

Command+Alt+E

折りたたまれたコード部分のコピー&ペースト

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

  2. 編集/コピーを選択します。
  3. コードをペーストする位置にカーソルを置きます。

  4. 編集/ペーストを選択します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー