WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

HTML・CSSのコメントアウトまとめ｜書き方・ショートカット・注意点まで現役デザイナーが徹底解説

HTML・CSSのコメントアウトまとめ｜書き方・ショートカット・注意点まで現役デザイナーが徹底解説

小林 祐也の画像

小林 祐也

2025.01.23　|　2026.07.06更新

この記事を共有する

この記事を共有する

Close

もっと知らせる
Hatena X Threads
保存
LINE LinkedIn

Web制作をしていると、自分や他の開発者向けにメモを残したいときに便利なのが「コメント」です。また、これを利用して一時的にコードを無効化する行為を「コメントアウト」と呼びます。この記事では、HTMLとCSSのコメントの書き方とコメントアウトの活用法を、1行・複数行ごとに、さらにWindows・Macそれぞれのショートカットも含めて、初心者にもわかりやすく解説します。

コメントとコメントアウトの違いとは？

「コメント」と「コメントアウト」は混同されがちですが、厳密には意味が異なります。

  • コメント：ソースコード内に残す、人間が読むための「メモ」や「注釈」のことです。
  • コメントアウト：記述したコードをコメント記法で囲み、ブラウザに読み込まれないよう「一時的に無効化する行為」のことです。

どちらも同じ記法を使いますが、用途によって呼び方が変わる点に注意しましょう。

主な用途

  • 自分やチームへのメモ（備考・注意事項）【コメント】
  • 仮で非表示にしたいパーツの無効化【コメントアウト】
  • 後で使うコードの保留【コメントアウト】
  • デバッグ作業中の切り分け確認【コメントアウト】

1. HTMLのコメントの書き方

1行コメント

<!-- これはHTMLのコメントです -->
<p>表示されるテキスト</p>

このように、<!-- で始まり --> で終わるのがHTMLのコメントです。 コメント内にはHTMLタグを含めてもOKですが、ブラウザには一切表示されません。

複数行コメント

<!-- 
  <header><h1>サイトタイトル</h1></header>
  <body>
    <p>本文の記載</p>
  </body>
-->

複数行でも、同様に <!-- と --> で囲めばOKです。

HTMLコメントのショートカット（Windows・Mac）

OS 使用エディタ ショートカット
Windows VS Code など Ctrl + /
Mac VS Code など Command + /

※ 行頭に <!--、行末に --> を自動で追加してくれます。 ※ ショートカットは複数行にも対応しています。

2. CSSのコメントの書き方

1行コメント

/* これはCSSのコメントです */ 
body { background-color: #f0f0f0; }

CSSでは /* コメント */ のように、スラッシュ＋アスタリスクを使います。

複数行コメント

/* 
  .btn { background: red; color: white; }
  .btn--lg { font-size: 16px; }
*/

複数行でも同じように /* ～ */ で囲みます。入れ子にはできない点に注意。

CSSコメントのショートカット（Windows・Mac）

OS 使用エディタ ショートカット
Windows VS Code など Ctrl + /（CSSファイルの場合）
Mac VS Code など Command + /（CSSファイルの場合）

エディタが自動的に /* ～ */ をつけてくれます。複数行にも対応しています。

コメントとコメントアウトの活用例

1. 一時的なコードの無効化（コメントアウト）

<!-- <section class="banner">バナー</section> -->

2. 開発メモや注意書き（コメント）

/* TODO: モバイル対応のスタイル追加予定 */

やりがちな失敗例

1. 間違ってコメントを閉じ忘れる

<!-- 
  <div>
    未閉じのコメント
    <p>これも非表示になってしまう</p>
  </div>

→ --> を忘れると、その後のHTML全体が無効化され、レイアウト崩れや表示エラーの原因に。

2. CSSコメントの中にさらにコメントを入れてしまう

/* 
  /* これは入れ子のコメント */ 
  .main { color: red; } 
*/

→ CSSのコメントは入れ子（ネスト）できません。エラーになります。

3. JavaScriptコードにHTMLのコメントを使う

<!-- これはNG -->
console.log("これは実行されません");

→ JavaScriptは // や /* */ を使います。言語ごとにコメントの記法が異なるので注意。

まとめ｜HTML・CSSのコメントとコメントアウトをマスターしよう！

言語 書き方 ショートカット（Win） ショートカット（Mac）
HTML <!-- ～ --> Ctrl + / Command + /
CSS /* ～ */ Ctrl + / Command + /

機能をうまく活用すれば、効率的な開発やコードの管理がしやすくなります。 ぜひショートカットも使いこなして、作業スピードをアップさせましょう！

コーディングについてもっと学習した方はこちら

この記事の振り返りFAQ

コメントとは何ですか？

「コメント」は、コード内に記述する人間用の「メモや説明」のことです。ブラウザには表示されません。

コメントアウトはどんな場面で使うべきですか？

一時的にコードを無効化したい時に使います。 特にデバッグやコード整理の際に便利です。

HTML、CSS、JavaScriptでのコメントの書き方はどう違いますか？

HTMLは <!-- コメント --> 、CSSは /* コメント */ 、JavaScriptは // コメント（1行）または /* コメント */（複数行）を使います。

コメントを多用しすぎると問題がありますか？

多用しすぎるとコードが読みづらくなり、保守性が低下します。 必要最低限にとどめ、整理されたコメントを書くことが望ましいです。

コメントアウトとコメントの違いは何ですか？

開発現場では明確に使い分けられます。
・コメント：「ここからヘッダー」など、コード内に残す注釈（名詞）。
・コメントアウト：バグの原因を探る際などに、特定のコードを処理対象から外す（無効化する）こと（動詞）。
初心者のうちから、この2つを正確に区別して覚えることをおすすめします。

コメントアウトはデザイン制作のどの段階で使うべきですか？

デザインの試作段階やコーディング途中で、一時的に機能を無効化したいときに使うのが一般的です。完成後は不要なコードは整理しましょう。

コメントアウトを使ってCSSの効率的な管理方法はありますか？

複数のスタイルを一時的に無効化して比較検証する方法があります。（※セクションの区切りは「コメント」を使います）

コメントアウトしたコードが表示されてしまう原因と対処法は？

コメント記法の書式ミスやHTMLタグの不適切な使い方が原因です。正しい記述方法を確認し、エディタのプレビューで必ず確認しましょう。

コメント機能を使う際のベストプラクティスは？

読み手に分かりやすい説明を書くこと、必要な部分だけをコメントアウトすること、不要になったらすぐに削除することが大切です。

コメントはSEOやページ表示速度に影響しますか？

検索エンジンに影響しませんが、過剰な記述はファイルサイズを増やしページ速度に微小な影響を与えることがあります。

関連リンク

もっと知らせる
Hatena X Threads
保存
LINE LinkedIn