HTMLのコメントアウトの書き方・ショートカットと注意点を解説！
Web業界のエンジニアにとって必須といえる、「HTML」の知識。
インターネット上で目にするほとんどのWebコンテンツは、HTMLでできています。Webサイトはもちろん、Webアプリケーションやブラウザゲームを作るには、HTMLのスキルは必要不可欠です。
この記事では、HTML入門のひとつとして、HTMLでのコメントアウトの書き方やショートカットの方法、注意点などを解説します。
Contents
HTMLのコメントアウトとは
プログラミングにおける「コメント」とは、プログラムのソースコード上で「実行させない部分」のことを指します。プログラムの一部分をコメントタグで囲んで無効化することを「コメントアウトする」というように、動詞として使われることが一般的です。
基本的にHTMLはWebブラウザに表示するためのプログラミング言語なので、コーディングをする際はブラウザに表示させたくない部分をコメントアウトします。
ソースコードを書くのに「実行させない部分を書くのは無駄なのでは？」と疑問を感じるかもしれません。しかし、コメントアウトには次に挙げるような重要な役割があります。
- ソースコードの管理や更新が容易になり保守性が向上する
- 可読性が向上し、プログラミングのミスを抑制できる
コメントアウトの役割
コメントアウトの役割は主に「保守性の向上」と「可読性の向上」の2点です。
Webコンテンツのプログラムは、基本的に完成してから長期にわたって使用され、必要に応じて更新されていきます。
また、システム運用をチームで行っている場合、作成者以外の人がソースコードを読み書きする機会も多々あります。たとえ作成者本人が管理する場合でも、ソースコードが長くなったり時間が経ったりすると、そのソースコードを覚えておくことは困難です。
そこで、コメントとしてプログラムの役割や更新日時などを記載しておけば、ソースコードの管理や更新がしやすくなり、保守性の向上に役立ちます。
また、複雑なネスト構造（※）のソースコードや関数等で実行部分が広範囲に点在するプログラムの場合、コメントでメモを残しながら記述した方が可読性は高まり、プログラミングのミスを減らせます。
（※）ネスト構造：マトリョーシカのように、同じ形のものが何層にも中に入っている構造のこと。HTMLのソースコードでは、あるタグで囲ったものの外側を、さらにタグで囲うというような時に使用される。
コメントアウトのメリット
HTMLを学習中の初心者はタグを覚えることに精一杯になりがちです。結果、コメントアウトなどの補助スキルの習得がおろそかになってしまうこともあるでしょう。
コード上にコメントを残すことは、エンジニアとして必須の基礎スキルです。コメントアウトを活用することのメリットを、具体的に確認していきましょう。
複数人でのサイト制作・運用に便利
Webサイトの制作・運用では、複数のメンバーで取り組むケースが多いです。この場合、メンバー間でさまざまな情報を共有する必要があり、HTMLのコードも複数人で更新することになります。
特に書き変える機会が多い箇所については、コメントを残しておくと便利です。
- 更新日時
- 担当者名
- 更新した内容
こうした情報をチーム内で書式を決めて残しておくと、テキストファイルの検索ツールを使用するだけで簡単に探せるようになります。
たとえば、何度も表示したり消したりする部分を削除せずにコメントアウトで残してしておけば、次に使う時にはコメントアウトを外すだけで再利用できます。
タグや構成がわかりやすくなりメンテナンスに役立つ
Webサイトやシステムが大きくなるほど、ソースコードも膨大な量になります。
また、HTMLは開始タグと終了タグで処理を囲む構造のため、終了タグがひとつ抜けるだけで表示が大幅に崩れてしまうことがあります。タグがネスト構造になっている場合は、開始タグと終了タグの位置に内容のわかるコメントを入れておくと、構造が理解しやすくなりエラーを防ぐことにも役立ちます。
JavaScriptやPHPなどほかの言語を併用している場合、構造はさらに複雑になりがちです。特にjQueryなどのJavaScriptは、プログラムの記述位置がずれただけで正常に動作しなくなることもあります。
どんな目的のプログラムなのか記述位置についての注意点などをコメントに残すことで、仕様の変更やエラーが起きた時にも対処しやすくなります。
更新作業がスムーズに効率化する
近日公開する予定の部分を、事前にコメントアウトで作って用意しておけば、更新作業は効率化します。
たとえばWebサイトのメンテナンス期間や、店舗の臨時休業期間など、一定期間後に削除する予定の部分をコメントアウトして事前に用意しておくと、更新作業がスムーズになります。
コードの覚書として便利
「今は使用していないけれど、後で使うことになるかもしれない」。そんな部分もコメントアウトしておけば、ブラウザには表示されません。
候補のコードが複数ある場合は、コメントアウトで残しておくと便利です。
また、参考にしたサイトのURLや覚書を残しておくこともできます。後で編集する際や、エラー発生時に修正箇所を探す際にも役立ちます。
HTMLでのコメントアウトの方法
HTMLでソースコードをコメントアウトするには、非表示にしたい部分を「<!--」と「-->」で囲みます。
- ● 「<!--」：コメントの開始タグ
- コメント開始タグの「<!--」は、スペースを空けずに続けて記述する必要があります。
- ● 「-->」：コメントの終了タグ
- 一方、終了タグは「-- >」のように、「--」と「>」の間に空白が入っても構いません。
単語などの文字列やメモのような数行に渡る文章、HTMLタグもコメントアウトできます。
HTMLでのコメントタグの使用例
HTMLでのコメントアウトの使用例を紹介します。
- ● 1行のコメントアウト
- 以下のように「<!--」と「-->」で囲みます。
<!-- コメントアウト部分 --> - ● 複数行のコメントアウト
- 以下のように記述すると、「<!--」と「-->」の間の記述が非表示になります。
<!-- コメントアウト部分 コメントアウト部分 -->
CSS・JavaScript・PHPのコメントアウトタグ
コメントタグは、使用する言語によって書き方が異なります。また、コメントアウトする範囲が一行なのか、あるいは複数行なのかで、書き方が変わる言語もあります。
HTML のほか、Webプログラミングで使われる代表的な言語であるCSS、JavaScript、PHPの、コメントタグの書き方を紹介します。
| 1行コメントアウト | 複数行コメントアウト | |
|---|---|---|
| CSS | /* コメントアウト部分 */ |
/* コメントアウト部分 */ |
| JavaScript | //コメントアウト部分 |
/* コメントアウト部分 */ |
| PHP | //コメントアウト部分 #コメントアウト部分 |
/* コメントアウト部分 */ |
また、WordPressを使っている場合や、サーバーの設定も行う時は、.htaccessファイルを編集することがあります。
.htaccessファイルの場合は、書き方が少々特殊になります。
#コメントアウト部分このように、行頭に「#」を付けます。終了タグは必要ありませんが、改行はできません。
#複数行の時のコメントは
#このように
#記述します。行の途中からコメントアウトする場合は、以下のようにダブルクォーテーションで囲む必要があります。
行の途中では"#コメントはこのように"ダブルクォーテーションで囲みます。HTMLでのコメントアウトの記述例
HTMLソースコードでのコメントの記述例を紹介します。
<html>
<head>
<title>サイトタイトル</title>
</head>
<body>
ここにサイトの内容を書きます。
<!-- コメントはこのように書きます -->
<h1>コメントの説明</h1>
<!-- コメント開始タグ
<div>
このタグで囲まれた範囲はブラウザに表示されません。
タグや複数の行を囲むこともできます。
<p>サンプル文</p>
<p>サンプル文</p>
</div>
コメント終了タグ -->
ここからはブラウザ表示されます。
</body>
</html>【HTML・CSS・JavaScript共通】コメントアウトのショートカットキー
特に複数人のチームでWebサイトを開発・運用している場合、コメントアウトは頻繁に活用することになります。その都度記述するよりも作業効率が圧倒的に高まるショートカットキーを活用しましょう。
| Windows | Mac | |
|---|---|---|
| 一行のコメントアウト | Ctrl + / | command + / |
| 複数行のコメントアウト | Ctrl + Shift + / | command + / command + option + / |
コメントアウトする部分を選択し、上記のショートカットキーを実行します。なお、このショートカットキーはHTMLだけではなく、基本的にはCSSやJavaScriptでも共通のものです。
VSCodeなどテキストエディタのショートカットキー
紹介したショートカットキーは、VSCodeをはじめとする代表的なテキストエディタでも共通のものとして活用できます。
| Windows | Mac | |
|---|---|---|
| VSCode | Ctrl + / | command + / |
| Atom | Ctrl + / | command + / |
| Brackets | Ctrl + / | command + / |
コメントアウトを記述する際の注意点
コメントアウトを記述するときには、いくつかの注意点があります。
- ソースコード上では表示されてしまう
- コメントタグを入れ子にすることはできない
- -(ハイフン)は使用しない
- PHPタグ内ではコメントアウトできない
- WordPressでは注意が必要
ソースコード上では表示されてしまう
コメントアウトした部分はブラウザ上のフロントページでは表示されませんが、ソースコード上では表示されます。つまり、ソースコードを参照すれば誰もが読むことが可能ということです。
Macの場合は、Safariの環境設定から開発メニューを表示させるプロセスが必要ですが、Windowsでは特に設定の必要もなく、ブラウザで右クリックして、メニューから「ページのソースを表示」を選ぶとHTMLソースが表示されます。
読まれてはいけない情報、社外秘にするべき情報などはコメントに記載しないよう、くれぐれも注意してください。
HTMLコメントアウトをソースコードに表示させない方法
機密情報などを記述しないのは当然としても、コメントアウトの内容をソースコードから確認できる状態は望ましくない。そう考えるのも無理はありませんが、HTMLファイルのコメント閲覧を完全に遮断することは基本的にはできません。
ただし、HTMLに直書きするのではなく、PHPやPythonなどサーバーサイドで動く言語にインクルードしてHTMLを生成する方式であれば、ソースコードからもコメントは確認できなくなります。
コメントタグを入れ子にすることはできない
ほとんどのHTMLタグはコメントアウトが可能ですが、コメントタグ自体はコメントアウトできません。1度コメントアウトした部分をコメントタグで囲ってしまうと、ブラウザによっては最初のコメント終了タグ「-->」をコメントの終了宣言とみなし、コメントアウトを終了してしまいます。
意図しない部分でコメントアウトが終了し、その後のコメントアウト部分がフロントページに表示されてしまうことがあるので注意しましょう。
-(ハイフン)は使用しない
「-(ハイフン)」を連続して記述すると、「コメントの終了」と解釈するブラウザがあります。
こちらも意図しない部分でコメントアウトが終了する可能性があるので、ハイフンの連続使用は止めましょう。
PHPタグ内ではコメントアウトできない
PHPはHTMLと併用することが多い言語です。そして、複数の言語でソースコードが書かれていると、言語の切り替え位置を見落としてしまいがちです。
違う言語のコメントタグは効果がありません。HTMLのコメントアウトが効かない時は、PHPタグの範囲内になっていないか確かめることが重要です。
WordPressでは注意が必要
WordPressのバージョンや使用しているテーマによって、HTMLのコメントタグがうまく機能しないことがあります。これは、WordPressのデフォルト設定で、ハイフン「-」がエンダッシュ「?」へ自動変換されてしまうことが原因です。
<code>
<!-- コメントにしたい部分 -->
</code>このように、HTMLのcodeタグで囲むと、自動変換を防ぎHTMLコメントとしてコメントアウトできます。
あるいは、ショートコードを登録してコメントアウトする方法もあります。
たとえば、新しくショートコード”ignore”を定義し、それを用いて記述した内容は出力しないように設定します。
使用しているテーマのfunctions.phpに、以下のようなコードを追記します。
function ignoreShortcode($arrt,$content = null){
return null;
}
add_shortcode('ignore','ignoreShortcode');テキストエディタで”ignore”ショートコードを使用すると、コメントを非表示にすることができます。
コメントアウト部分を削除する方法
WordPressなどでは特に、サイトの読み込み速度を上げるための手段としてコメントアウト部分を一括削除することがあります。
コメントタグを削除すればコメントアウトを解除することができますが、ソースコードが膨大な場合や、コメントが大量にある時は、すべてのHTMLコメントアウト部分を削除していくのは困難です。
そこで、アドビシステムズが販売しているWebオーサリングツールである「Adobe Dreamweaver（アドビ ドリームウェーバー）」を使用します。
Dreamweaverにはテンプレートやライブラリといった機能があり、これらを活用することでコメントタグの一括削除も可能です。
Dreamweaverでコメントタグを一括削除するには、2つの方法があります。
- HTMLクリーンアップを使用する
- 置換機能を使用する
HTMLクリーンアップを使用して削除する方法
「コマンド」→「HTMLのクリーンアップ」から、削除したい項目を実行すると、コメントアウト部分が一括削除されます。
しかし、削除できる範囲は1ページのみに限られます。
置換機能を使用して削除する方法
置換機能を使う場合は、サイト全体を一度に変換することができますが、元に戻すことができません。バックアップを取って慎重に行いましょう。
Dreamweaverの置換機能を使ったHTMLコメントタグの一括削除方法を説明します。
【1】 サイトデータを「ローカルサイト登録」
一括削除の前準備として、バックアップを取ります。リモートサイトで作業をしている場合は、ローカルサイトへデータをコピーしておきましょう。
ローカルサイトで作業をしている場合は、ローカルサイトのフォルダごとコピーしておきます。
【2】 コメントタグを検索
コメントタグで囲まれている部分を検索します。なお、検索条件に正規表現を使うと、『「<!--」と「-->」で囲まれたすべての文字』という条件で検索することが可能です。
コメントタグを検索する正規表現は、以下のとおりです。
<!--¥s(.+)¥s-->Dreamweaverで検索置換ウィンドウを開き、検索欄に上記の条件を入力してください。
【3】 検索結果を置換
検索結果を削除したいときは、置換後の文字列を空白に設定します。置換の欄を空欄にして、「すべて置換」のボタンで実行してください。
これで、HTMLコメントタグが一括削除されました。
コメントアウトを活用すれば業務の効率化を図れる！
Web業界でエンジニアとして仕事をするうえで、HTMLの知識は必要不可欠です。
コメントアウトのスキルは、HTML言語の学習にはもちろん、Webサイトの構築と運用の効率化やリスクヘッジに役立ちます。複数人がかかわるサイトの運用オペレーションも適正化するでしょう。
チーム内でWebコンテンツをスムーズに管理・運用するためにも、コメントアウトを上手く活用して、業務の効率化を図りましょう。
- コメントアウトは複数人でソースコードを管理する際に役立つ
- HTMLでコメントアウトするには、「 <!--」と「-->」で囲む
- コメントアウトタグはネスト構造にすることはできない
- コメントアウトのショートカットキーの活用で、作業効率がアップする
- コメントアウトしてもソースコードには表示されるため、機密事項は記述しない
＼ SNSでシェアしよう！ ／
【はたラボ】派遣のニュース・仕事情報・業界イロハ|派遣会社・人材派遣求人ならパーソルクロステクノロジー ｜IT・Web・機電の派遣求人ならパーソルクロステクノロジーのエンジニア派遣の 注目記事を受け取ろう
【はたラボ】派遣のニュース・仕事情報・業界イロハ|派遣会社・人材派遣求人ならパーソルクロステクノロジー ｜IT・Web・機電の派遣求人ならパーソルクロステクノロジーのエンジニア派遣
この記事が気に入ったら
いいね！しよう
【はたラボ】派遣のニュース・仕事情報・業界イロハ|派遣会社・人材派遣求人ならパーソルクロステクノロジー ｜IT・Web・機電の派遣求人ならパーソルクロステクノロジーのエンジニア派遣の人気記事をお届けします。
-
気に入ったらブックマーク！
- フォローしよう！ Follow @persolcross
