HTMLに1行だけコメントアウトする方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLに1行だけコメントアウトする方法について解説しています。最初にコメントアウトとは何か、その役割について学びます。次に、1行だけコメントアウトする場合と複数行コメントアウトする場合の書き方についてそれぞれ見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

ファイルの作成をしていると、一度注視して、別日に改めて作業をした時に、どこから再開すれば良いか分からなくなることがありますよね。

他にも、人に作業を依頼する際、口頭ではなくメモ書きなどがあれば助かることがあります。

 

そのようなときに使用するのがコメントアウトです。

コメントアウトとは、プログラムなどのソースコード上で実行に影響を与えない部分のことです。

HTMLに1行だけコメントアウトする方法について解説します。

 

目次

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

1行だけコメントアウトする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

コメントアウトとは

コメントアウトとは、プログラムのソースコード実行後でブラウザの表示画面に「読み込まれない部分」を指します。

ソースコード上にメモとして記載しておきたい内容がプログラム実行後のブラウザ画面に表示されるのは困ります。

 

備忘録のメモを記述してから、画面の表示として影響のない記述がコメントアウトです。

どのプログラム言語でも、コメントアウトの文法に則り、コメントアウトが可能になっています。

HTMLのコメントアウトも同様です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

コメントアウトのメリット

コメントアウトのメリットを5つ紹介します。

  • チーム開発をスムーズに行える
  • 保守性を高められる
  • 定期的な更新を行える
  • 覚書に利用できる
  • 特定のブロックを非表示にできる

それぞれ解説していきます。

 

チーム開発をスムーズに行える

複数人で開発を行う場合、どのコードがどのような意図で実装されたかを記載しておくとよいです。

メソッド名や変数名などは、その名前を見ただけで何をしているかわかる名前の付け方で実装しましょう。

 

保守性を高められる

プログラムは一度開発した後も定期的に保守をする必要があります。

保守とは、プログラムの動作に不具合がないか確認する作業です。

 

定期的な更新を行える

プログラムが完成した後も追加機能を実装することがあります。

そのときにコメントを参考に追加実装すると便利です。

その理由は、アプリリリース後などで追加機能を実装する際、コメントアウトを使用していると、追加実装箇所の特定あるいはコード共有が行いやすく、開発の効率を高められるからです。

 

覚書に利用できる

プログラムが膨大な量になってくると、そもそもプログラムが何のために実装されているのかが不明確になりがちです。

覚書として、機能におけるプログラムの説明をコメントに記載しておくと便利です。

 

特定のブロックを非表示にできる

プログラムのコードで、不要なコードを削除することがあります。

しかし、果たして削除してよいのかと迷うこともあります。

そのようなときは特定のコードブロックをコメントにして非表示にすることができます。

特定のコードブロックをコメントアウトし非表示にすることで、再利用する際は瞬時にコメントアウトを外せるためです。

 

コメントアウトのデメリット

コメントアウトを利用する注意点として、デメリットが存在します。

コメントアウトを利用する際のデメリットを理解し、使い分けましょう。

 

不要なコメントでコードが読みづらくなる。

コメントのメリットで例示した内容をすべて利用するとコードの大部分がコメントになってしまいます。

結果的にコードが読みづらくなります。

不要なコメントが多い場合は、IDEで用意されているコードを折りたたむ機能を利用すると良いです。

VSCodeの例を確認してみましょう。

 

コメントを表示している状態

画像では見えませんが17行目にマウスカーソルをあわせると🔽が表示されるのでクリックしてみてください

コメントを折りたたんだ状態

スッキリして見えます。

>をクリックすると再度コメント部分が表示されます。

 

 

1行だけコメントアウトするには

[html]

<!-- コメントアウトを記述します。(1行のコメントアウトの例) -->

 

<!––で始まって、備忘録の内容を記述してから、––>で閉じます。

 

複数行まとめてコメントアウトするには

<!--

  コメントアウトの1行目を記述します。


  コメントアウトの2行目を記述します。


  コメントアウトの3行目を記述します。

-->

<!––[改行]から始めまして、複数行の備忘録の内容を記述してから、[改行]––>にて閉じます。

 

コメントアウトの注意点

コメントアウトを使用する際の注意点を3点紹介します。

  • コメントの中にコメントを入れない
  • コメントに「-」を利用しない
  • WordPressでの注意点と対策

それぞれ詳しく見ていきましょう。

 

コメントの中にコメントを入れない

コメントの中にコメントを実装してしまうと、コメントの表示が崩れてしまい、結果的にコメントが表示されてしまいます。

 

コメントに「-」を利用しない

コメントに「-」を利用するのも、意図した内容が正しく認識されない可能性があります。

コメントの中に「-」を利用すると実行環境によっては、ハイフンの連続をコメントが終了した意味ととらえてしまい、結果的にコメントが表示されてしまうため、コメントの中に「-」を利用しないよう心がけましょう。

利用したい場合は「=」などの別の記号を利用しましょう。

 

WordPressでの注意点と対策

WordPressで「-」を利用すると、テーマによっては「-」表示が崩れることがあります。

また、WordPressの標準機能が「-」を「–」へ自動変換する環境もあります。

対策としては、WordPressのfunction.phpに次のようなコードを用意します。

function techacademy_shortcode( $atts, $content = null ) {
    return null;
}
add_shortcode('techacademy', 'techacademy_shortcode');

この状態で、WordPressの記事内でコメントアウトするときに、次のようにtechacademyで囲むことでショートコードのtechacademy_shortcodeが有効になり、非表示にすることができます。

[techacademy]非表示にしたい文字列[/techacademy]

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動:小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。

 

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!