タグ: ソフトウェア

トップページ > サイト作成 > 作成ソフト > Dreamweaver で HTML 内のコメントなど不要なタグを一括削除する方法

Dreamweaver で HTML 内のコメントなど不要なタグを一括削除する方法

[最新更新] 2021年11月28日
[初回公開] 2013年05月21日

ウェブサイトを HTML タグで組み上げる中で、サイト作成ソフトを利用すると HTML ソース内にコメントタグが残ることがあったり、複数人で作業する場合は情報共有のためコメントを残すことがあるが、これらブラウザで表示する上で不要なタグを Dreamweaver を使って一括で削除する方法を紹介する。

1. HTML のコメントタグとは

HTML のコメントタグとは下記のように <!-- と --> で囲われたもので、ブラウザには表示されないがソース上には存在するので Web サーバからブラウザにコンテンツを読み込んだ際には一緒に送信される。

<!-- コメント -->

HTML ソースを見るためにはブラウザにウェブサイトを表示させ、マウスを右クリックして「ページのソースを表示」等を選択するとページを構成している HTML タグの全てが表示される。

2. HTML ソース内のコメントの様子

実際に HTML ソース内のコメントは下図のように利用され、コメントタグの箇所はブラウザには表示されない 。

3. >HTML ソース内の不要なタグを削除する理由

HTML ソース内の不要なタグを削除する理由としては、上図のようにブラウザで HTML ソースを全て見ることができることから、作業途中の内々のメモであったり、利用しているウェブサイト作成ソフトのバージョンが自動的に入ったりしてコンテンツの制作環境が漏洩する恐れがある。

「ヘッダー」や「フッター」などパーツを示すコメントならよいが、うっかりサーバのアクセス情報などをコメントで残してしまうとハッキングや改ざんの被害につながるのでウェブサイトに公開する前にはコメントタグなど不要な文字列が無いか確認する必要がある。

4. 不要なタグを一括で削除する方法

HTML ソース内の不要なタグを一括で削除する方法として、Dreamweaver を利用する方法が挙げられる。
Dreamweaver で HTML ファイルを開き、上部メニューから「編集 -> 検索/置換」を選択して検索ウィンドウを表示する。
検索ウィンドウは Ctrl + F キーのショートカットでも表示することができる。

検索ウィンドウが開けば、検索対象の文字列に下記を記入する。

<!--\s(.+)\s-->

次にウィンドウ下部の「正規表現を使用」にチェックを入れ、右側にあるボタン「すべて置換」を押すとコメントタグが全て削除される。
置換後の文字は空欄にしているため、コメントタグがあった行は空行としてそのまま残る。

5. Dreamweaver の旧バージョンでの削除する方法

Dreamweaver の古いバージョンで HTML ソース内のコメントタグを一括削除する方法は、ウィンドウ「結果」の中にあるタブ「検索」を選択し、緑色の三角形のボタンをクリックすると、検索ウィンドウが表示される。

検索ウィンドウが開けば、検索対象を「現在のローカルサイト全体」、検索を「ソースコード」を選択し、検索欄に下記を記入する。

<!--\s(.+)\s-->

最後にウィンドウ下部の「正規表現を使用」にチェックを入れ、右側にあるボタン「すべて置換」を押すとコメントタグが全て削除される。
置換後の文字は空欄にしているため、コメントタグがあった行は空行としてそのまま残る。

その他、上部メニューより「コマンド -> HTML のクリーンアップ」を選択することでコメントタグを削除することができるが、Dreamweaver で開いているファイルのみが削除の対象となるため、サイト全体で一括削除したい場合は正規表現を利用した置換を行うほうがよい。

関連記事