2025.04.01 Tue 2025.04.02
ソースフォーマットの適用でbrタグ自動改行を回避する方法
Dreamweaverのソースフォーマットの適用でbrタグ自動改行をさせない方法
Dreamweaverでソースフォーマットの適用(コマンド > ソースフォーマットの適用)を実行すると、brタグが自動的に改行され、意図しない半角スペースが挿入される問題は、Dreamweaverのデフォルトのコードフォーマット設定やタグライブラリの挙動に起因している可能性があります。
この挙動を改善する方法をいくつか紹介します。
YouTubeでチェック!
コードフォーマットの設定を調整する
Dreamweaverでは、brタグの挿入時に改行やスペースがどのように扱われるかを設定で変更できます。
手順:
- 編集 > 環境設定(Windows)またはDreamweaver > 環境設定(Mac)を選択。
- 左側のメニューから「コードフォーマット」を選択。
- 「タグライブラリ」ボタンをクリックして、タグライブラリエディタを開く。
- HTMLタグの中から を見つけ、選択。
- 改行」の設定を「改行なし」に変更。
効果:
これにより、 タグ挿入時に自動改行が抑制され、余計なスペースが入りにくくなります。
HTMLのクリーンアップ時のオプションを確認する
HTMLのクリーンアップの適用時に特定の設定が有効になっていると、意図しないフォーマットが適用されることがあります。
手順:
- コマンド > HTMLのクリーンアップを実行。
- 表示されるダイアログで、「空のタグ」や「重複してネストしたタグ」などのオプションを確認し、必要に応じてオフにする。
- 「完了時にログを表示」にチェックを入れて、クリーンアップ後にどのような変更が加えられたか確認。
ポイント:
ログを確認することで、半角スペースがどこで挿入されているのか原因を特定しやすくなります。
手動でbrの挿入方法を工夫する
デザインビューで作業している場合、Shift + Enterでbrを挿入すると改行とスペースの挙動が変わることがあります。
代替案:
コードビューに切り替えて直接 を入力し、ソースフォーマットの適用を避ける。これにより、Dreamweaverの自動整形を最小限に抑えられます。
正規表現で後処理する
ソースフォーマットの適用後に半角スペースが残ってしまう場合、Dreamweaverの「検索と置換」機能を使って一括修正できます。
手順:
- Ctrl + F(Windows)またはCmd + F(Mac)で「検索と置換」を開く。
- 「正規表現」にチェックを入れる。
- 検索欄に(<br>\s)と入力(<br>の後に続く半角スペースを対象)。
- 置換欄に<br>と入力して、余計なスペースを削除。
- 「Replace All」を実行。
効果:
ソースフォーマットの適用で挿入された半角スペースを効率的に削除できます。
外部エディタを併用する検討
Dreamweaverのソースフォーマットの適用やHTMLのクリーンアップ機能自体がプロジェクトに合わない場合、VS CodeやSublime Textなどの軽量エディタでコードを整形してからDreamweaverに戻すのも一つの手です。これらのエディタでは、改行やスペースの挙動を細かく制御できるプラグインが豊富です。
補足:
この問題は、Dreamweaverのバージョンや設定環境によって挙動が異なる場合があります(2025年4月時点での最新バージョンに基づく想定)。
掲載情報につきましては当社が独自に調査、検証および収集した情報です。
情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。
掲載情報の修正・変更等をご希望の場合はお知らせください。