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

最終更新日:

公開日: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
============================================= */

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

さいごに

いかがでしたでしょうか。
コメントアウト自体は簡単ですが、記号と合わせたりする事で可読性が上がります。
自分以外の人でも分かるように記述し、より読みやすくなるよう心掛けていきましょう。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼
PAGE TOP