コメントアウトの書き方と見やすい記述【HTML・CSS】

最終更新日：2024-08-05

公開日：2024-07-12

記事内に広告が含まれています。

HTML・CSSともにいろんな方のソースを見ると、あまりコメントアウトを記述していない人が多いと感じました。
自分もそんなに多くは書きませんが、納品するソースに関しては、自分以外の人が変更作業等する事も考えて極力必要な部分は入れるようにしています。

自分だけが作業するのであればいいですが、他の人も作業する可能性を考慮し記述するのが望ましいと感じます。
自分が分かるコードではなく、だれでもわかるコードを心掛けていく事が重要です。

HTMLのコメントアウト
CSSのコメントアウト
さいごに

HTMLのコメントアウト

HTMLのコメントアウトは<!–から始まり–>で終了となります。
1行でも複数行でも囲った部分がコメントアウトされます。セクション毎に記述する、更新日時を記述するなど、分かりやすい記述を心がけていきましょう。

<!-- 1行のみコメントアウト -->

<!--
複数行のコメントアウト
複数行のコメントアウト
-->

使用例としては以下となります。

<!-- header -->
<header>
  ～
</header>
<!-- header end -->

<!-- 20240101追加 -->
<p>テキストテキストテキスト</p>

<!-- 一時的に非表示 -->
<!--
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
-->

コメントアウトを入れ子にした場合は部分的にコメントアウト状態になったりと、思った通りの状態になりませんので注意してください。

CSSのコメントアウト

CSSでのコメントアウトは/*で始まり*/で終了となります。
1行でも複数行でも囲った部分がコメントアウトされます。こちらもセクション毎、更新日時を記述、動作に関する記述をするなど、分かりやすい記述を心がけていきましょう。

/* 1行のみコメントアウト */

/*
複数行のコメントアウト
複数行のコメントアウト
*/

使用例としては以下となります。
記述する人によっていろいろなコメントアウトのデザインがあります。中には面白いコメントアウトもあるので、他の人のソースを見るのも勉強になります。

p {
  font-size: 1.6rem;
  /*font-weight: bold;*/
}

/*
span {
  display: block;
}
*/

/*------------------------
20240101追加
------------------------*/

/* =============================================
header
============================================= */

/* =============================================
 * 見出し
 * ========================================== */