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

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

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

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

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

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

目次

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

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

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

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

お願いします！

コメントアウトとは

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

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

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

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

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

[PR] Webデザインで副業する学習方法を動画で公開中

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

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

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

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

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

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

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

保守性を高められる

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

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

定期的な更新を行える

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

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

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

覚書に利用できる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スッキリして見えます。

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

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

• ・困ったときに、質問や相談できる相手がいるため挫折しなかった
• ・プロとして必要なスキルのみを深く学べたので無駄がなかった
• ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

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デザイナーから教わること」を実感してみてください。

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

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

• ・調べてもほしい情報が見つからない
• ・独学のスキルが実際の業務で通用するのか不安
• ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する