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

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

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

コメントアウトとは

ブラウザにHTML文書が読み込まれてから、bodyタグの内部が画面として表示されます。もっぱら、備忘録としてメモを残しておきたいこともあると思いますが、このメモは、画面として表示されてしまっては困ります。

備忘録のメモを記述してから、画面の表示として影響のない記述が、コメントアウトです。どのプログラム言語でも、その言語でのコメントアウトの文法に則ることで、コメントアウトが可能になっています。HTMLのコメントアウトも同様です。

 

なぜコメントアウトを使うのか

主目的は、自分以外も含めまして、ソースコードを加筆修正する際の注意点や備忘録を次の担当者に提示するためです。

 

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

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

[html]

<!-- コメントアウトを記述します。 -->

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

 

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

[html]

<!--

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


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


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

-->

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

 

コメントアウトの注意点を知って活用してみよう

コメントアウトの構文の内部にコメントアウトの構文として解釈される記号などを含めてはなりません。以下、コメントアウトとして予期せぬ不具合を発生させる記述の失敗例の一覧です。

[html]

<!-- コメントアウトからの<!-- 再度のコメントアウトの開始記号から終了記号 -->

<!--

<!--


コメントアウトの記号の重複


-->

-->

<!---- 開始と終了記号ともに2個の固定の-(ハイフン)が3個以上の連結している。 ---->
<!-- 途中から----ハイフンが連続している場合 -->
<!- 記号の不足 ->
<- 記号の不足 ->


<!!- 記号の過剰 ->

<!- 1行だけのコメントアウトとして処理されていますが、コメントアウトの構文としては非推奨またはエラーです。 ->

上記のコメントアウトの失敗の一覧は、ブラウザの種類や古いブラウザによっては、表示崩れに繋がってしまいます。

 

監修してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。