【HTML・CSS】コメントアウトの方法まとめ｜1行・複数行・ショートカット（Windows・Mac対応）

y.kobayashi

2025.05.07

この記事を共有する

で保存する

LINE

で共有する

このページのURLをコピー

https://kasoudesign.com/knowledge/comment-out/

クリップボードにコピーしました

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

1 コメントアウトとは？
- 1.1 コメントアウトの主な用途
2 1. HTMLのコメントアウト方法
3 2. CSSのコメントアウト方法
4 コメントアウトの活用例
- 4.1 1. 一時的なコードの無効化
- 4.2 2. 開発メモや注意書き
5 やりがちなコメントアウトの失敗例
6 まとめ｜HTML・CSSのコメントアウトをマスターしよう！

コメントアウトとは？

コメントアウトとは、ブラウザに読み込まれないようにコードの一部を無効化することです。
また、他の開発者へのメッセージや、後で使う予定のコードの保管にも使われます。

コメントアウトの主な用途

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

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 + /

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