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

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

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

小林 祐也の画像

小林 祐也

2026.04.07 更新

この記事を共有する

この記事を共有する

Close

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

ご提示いただいたコードから、WordPress固有のブロックコメント（``）および、間隔を空けるための空タグ（ ）を削除し、コードを詰めて再出力します。

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行）または / コメント */（複数行）を使います。

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

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

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

一般的には同じ意味で使われますが、「コメントアウト」は「コードを無効にする」という操作を指すことが多く、「コメント」は説明を書く行為全般を指すこともあります。

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

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

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

CSS内でセクションごとにコメントアウトで区切りを入れたり、複数のスタイルを一時的に無効化して比較検証する方法があります。

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

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

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

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

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

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

関連リンク

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