トップページ > サイト作成 > 作成ソフト > Dreamweaver で HTML 内のコメントなど不要なタグを一括削除する方法
Dreamweaver で HTML 内のコメントなど不要なタグを一括削除する方法
[初回公開] 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 で開いているファイルのみが削除の対象となるため、サイト全体で一括削除したい場合は正規表現を利用した置換を行うほうがよい。
関連記事
Visual Studio Code でファイルやフォルダを開いて編集する方法
ソフトウェア
Visual Studio Code はプログラムを行う際に利用するテキストエディタだが、複数のファイルで構成されるアプリケーションやウェブサイトではフォルダでまとめられることが多いため、VSCode でファイルやフォルダを開いて編集する方法について紹介する。
ソフトウェア
無料でプログラム開発ができる Visual Studio Code は一般的なテキストエディタと同じようにソースコードを記入する欄の他に、フォルダ階層やプログラムの実行結果を同時に表示することができるため、主となる 6 つの作業エリアと役割について紹介する。
Photoshop, ソフトウェア
Photoshop でキャンパスに配置した図形や読み込んだ画像内の特定の色を削除したり、透明化する場合の手順を紹介する。色を削除すると切り抜かれた状態となるためキャンバスの背景色の色が表示されるようになり、もし背景色を透明にしている場合は背面に画像等を配置することで合成することができる。
Photoshop でスライスツールを使って画像を均等に分割する方法
Photoshop, ソフトウェア
Photoshop で画像や写真を分割する場合はスライスツールを利用することが多く、自由に位置を決めて分割できる他、横幅または縦幅の長さで数量を指定して均等に分割する方法について解説する。
Photoshop, ソフトウェア
Photoshop で写真に写っている対象全体の明るさや暗さを調整したり、明暗の階調のバランスを調整したい場合に利用するレベル補正の機能の概要と使い方について紹介する。