Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。

というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。

今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!!

…というのが一発で解消する方法を知ったので、設定を含めてメモ。

まずは上部メニューの「Dreamweaver」→「環境設定」を開く


その中にある「コードフォーマット」で、上記設定をしておく。
・インデント:☑を使用「2」「スペース」
・タブサイズ:「2」☑スペースとして挿入
・TDタグ:□TDタグ内に改行を含めない

コード画面左側にある「ソースコードのフォーマット」をクリック



その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。
タグごとに細かな設定ができるので、自分が一番見やすいように修正する。
自分の場合は「a」「div」「head」「button」を修正。

aタグの設定


改行:タグの前後
コンテンツ:フォーマットおよびびインデントあり

divの設定


改行:前、中間、後
コンテンツ:フォーマットおよびびインデントあり

buttonの設定


改行:前、中間、後
コンテンツ:フォーマットおよびインデントあり

headの設定

改行:前、中間、後
コンテンツ:フォーマット及びインデントあり

最後に、「ソースフォーマットの適用」



ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。
ざっと見直して問題なければこれで完了!

コメント

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

wordpressのtwentyseventeenのヘッダー画像サイズを統一する