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

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

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

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

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

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

目次

• コメントアウトとは
• コメントアウトのメリット
• コメントアウトのデメリット
• 1行だけコメントアウトするには
• 複数行まとめてコメントアウトするには
• コメントアウトの注意点

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

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

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

お願いします！

コメントアウトとは

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

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

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

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

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

[PR] Webデザインで副業する方法とは

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

コメントアウトのメリットを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]

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

大石ゆかり

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

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

HTMLを学習中の方へ

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

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

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

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

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

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

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