CSSのコメントアウトの活用方法！基本の書き方や実務での使用例を徹底解説

プログラミングスクールならDMM WEBCAMP > WEBCAMP MEDIA > その他 > CSSのコメントアウトの活用方法！基本の書き方や実務での使用例を徹底解説

公開日: 2026.01.31

更新日: 2026.01.31

CSSでコーディングをしていると、「このスタイルは何のために書いたんだっけ?」と後から困ることがあると思います。また、複数人でプロジェクトを進める際、他の人が書いたコードの意図が分からず苦労することもあるでしょう。

そんなときに役立つのが、CSSのコメントアウト機能です。本記事では、CSSのコメントアウトの基本的な書き方から、実務で使える便利なテクニックまで詳しく解説していきます。

コメントの概要については、以下の記事も参考にしてください。

HTMLのコメントアウトの書き方と使用箇所を解説

CSSのコメントアウトとは？HTMLとどう違う？

CSSのコメントアウトとは、スタイルシートのコード内に記述するメモや注釈のことです。

ブラウザはこの部分を読み飛ばすため、実際の表示には一切影響を与えません。主にコードの説明を残したり、一時的に特定のスタイルを無効化したりする際に活用されます。

一方、HTMLでもコメントアウトは使えますが、記述方法が以下のように異なります。

CSS：「/*」で始まり「*/」で閉じる
HTML：「<!–」で始まり「–>」で閉じる

また、コメントアウトを使う目的も若干異なり、HTMLでは主にマークアップの構造を説明したり、セクションの区切りを示したりするのに対し、CSSでは装飾や配置に関する設計意図を残すことが多いです。ただし、どちらも「後から見返したときに分かりやすくする」という本質的な目的は共通しています。

HTMLのコメントアウトについては、ぜひ以下の記事も参考にしてください。

HTMLのコメントアウトの書き方と使用箇所を解説

「なんか今の仕事合わないな・・・」

「IT業界に転職してみたいなぁ・・・」

という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？

「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！

WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）

しかも今なら受講料の最大70%が給付金として支給されます。

DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です

DMM WEBCAMPについてもっと詳しく

CSSのコメントアウトを使うシーン

実際の開発現場では、さまざまな場面でCSSのコメントアウトが活躍します。ここでは、実務で頻出する使用シーンを見ていきましょう。

動作の内容をメモとして書いて引継ぎしたいとき

プロジェクトを他のメンバーに引き継ぐ際、コメントアウトは重宝します。例えば、

特定のスタイルを適用した理由
なぜその値を設定したのか

といった背景情報を残しておくことで、後任者がスムーズに作業を進められます。

また、

「このマージンは上部のヘッダーの高さに合わせて調整しています」
「IE11対応のため、flexboxではなくfloatを使用しています」

といった注釈を加えることで、コードの意図はより明確になります。また、ゆくゆく自分自身がコードを見返す際にも、当時の判断理由が分かるほうが作業効率が大幅に向上します。

その動作の影響範囲を伝えたいとき

CSSは記述の順序や詳細度によって、予期せぬ場所にスタイルが適用されることがあります。そのため、「特定のコードがどの要素に影響を及ぼすのか」コメントで明記しておくことが重要です。

例えば、

「このスタイルはトップページのメインビジュアルにのみ適用されます」
「全ページ共通のボタンデザインに影響するため、変更時は注意してください」

といった注記があれば、他のメンバーが修正作業を行う際にミスを防げます。

編集日時をメモしておきたいとき

複数人で開発を進めるプロジェクトや、長期間にわたって運用するサイトでは、「いつ誰がどの部分を編集したのか」を記録しておくと便利です。そこで、コメントアウトで編集日時を残していれば、変更履歴を追いやすくなります。

例えば、

2024年12月15日更新：スマホ表示時のフォントサイズを14pxから16pxに変更

といった記述があれば、後から問題が発生した際に原因を特定しやすくなるでしょう。また、

2025年1月10日追加：新キャンペーンバナー用のスタイル

のように記載しておけば、キャンペーン終了後に不要なコードを削除する際の判断材料にもなります。

バージョン管理ツールを使っている場合でも、CSSファイル内に直接メモを残しておくと、コードを見ながらすぐに確認できるため作業効率が上がります。

一時的な無効化など、コードの検証・退避を行いたいとき

デザインの調整や不具合の原因を探る際、特定のスタイルを一時的に無効にして動作確認をしたい場面があります。このようなとき、コードを削除するのではなくコメントアウトで残しておくと、後で簡単に元に戻せて便利です。

例えばレイアウトが崩れている原因を調査する際、疑わしいスタイルをコメントアウトして表示を確認することで、問題箇所を効率的に特定できます。また、クライアントから「以前のデザインに戻してほしい」と依頼されたときもすぐ復元できます。

さらに新デザインを試験的に実装する際、既存のコードを消さずにコメントアウトして保持しておけば、比較検討しながら選ぶこともできます。

CSSのコメントアウトの書き方【基本】

CSSでコメントアウトを記述する方法は、基本的な構文さえ覚えてしまえば、すぐに実務で活用できます。ここでは、それぞれの書き方を具体例とともに見ていきます。

一行で書く場合の記述方法

短いメモや簡単な注釈を残したい場合は、一行でコメントアウトを記述します。書き方は「/*」でコメントを開始し、「*/」で終了するだけです。

/* メインコンテンツの背景色 */
.content {
  background-color: #f5f5f5;
}

.header {
  position: fixed; /* ヘッダーを画面上部に固定 */
  top: 0;
}

このように、スタイルの前に書いても、コードの後ろに書いても問題ありません。ただし、後にも紹介しますが、コードの途中にコメントを挟むことはできないため注意が必要です。

複数行で書く場合の記述方法

詳細な説明や長めのメモを残したい場合は、複数行にわたってコメントを記述できます。この場合も「/*」と「*/」で囲む基本ルールは同じですが、改行を含めた複数行の文章を書くことが可能です。

/*
  トップページのヒーローセクション用スタイル
  2024年12月のリニューアルで追加
  スマホ表示時は背景画像を非表示にし、
  グラデーションで対応しています
*/
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 500px;
}

複数行コメントは、設計思想や注意事項、変更履歴など、詳しい情報を残しておきたいときに便利です。

「/*」と「//」の違いは？

プログラミング言語によっては「//」でコメントアウトすることもありますが、CSSでは「//」は使用できません。CSSで有効なコメント記号は「/* */」のみとなっています。

/* これは正しいコメント */
.button {
  color: blue;
}

// これはCSSでは機能しません
.button {
  color: red;
}

ただし、SassやSCSSといったCSSプリプロセッサを使用している場合は話が変わってきます。これらのツールでは「//」を使った一行コメントが利用でき、コンパイル時に自動的に除去されます。

一方、「/* */」で書いたコメントは、設定によってはコンパイル後のCSSファイルにも残ることがあります。純粋なCSSファイルで作業している場合は「/* */」を使い、SassやSCSSを使っている場合は用途に応じて使い分けるとよいでしょう。

誤って「//」を使ってしまうとコメントとして認識されず、エラーの原因になる可能性があるため注意が必要です。ちなみに、現代で高い需要を言語「Python」のコメントルールについては、以下の記事をご覧ください。

Pythonのコメントの記述方法と重要性をわかりやすく解説！

実務で便利なCSSコメントアウトのショートカットキー

実際の開発現場では、毎回「/*」と「*/」を手入力するのは効率的ではありません。そこで活躍するのが、コメントアウトのショートカットキーです。

主要なコードエディタでは、キーボード操作だけで素早くコメントアウトの追加や解除ができます。VS CodeやSublime Text、Atomといった一般的なエディタでは、以下のショートカットキーでコメントアウトが可能です。

Windows の場合：Ctrl + /
Mac の場合：Command + /

コメントアウトしたい行にカーソルを置いて上記のショートカットキーを押すだけで、自動的に「/* */」が付与されます。複数行をまとめてコメントアウトしたい場合は、対象の行を選択してから同じショートカットキーを実行すれば一括で処理できます。

また、すでにコメントアウトされている箇所で同じショートカットキーを押すと、コメントアウトが解除されるため、作業も圧倒的にスムーズになります。

CSSのコメントアウトの実務使用例

基本的な書き方を理解したら、次は実際の開発現場でどのように活用されているか知ることが重要です。この章では、CSSのコメントアウトの実務使用例を紹介します。

記号も活用して見出し風に使用する

CSSファイルが長くなってくると、どこにどのスタイルが書かれているかを素早く見つける必要があります。そこで役立つのが、記号を組み合わせた見出し風のコメントアウトです。

/*===========================================
  ヘッダー
===========================================*/
.header {
  background-color: #ffffff;
  padding: 20px 0;
}

/* --- ナビゲーション --- */
.nav {
  display: flex;
  justify-content: space-between;
}

/*===========================================
  メインコンテンツ
===========================================*/
.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

このように「=」や「-」といった記号で装飾すれば、CSSファイル内でセクションの区切りが視覚的に分かりやすくなります。ファイルをスクロールしている際にも、目的のスタイルを素早く見つけられるでしょう。

目次を作る

大規模なサイトでは、一つのCSSファイルが数千行にも及ぶことがあります。そのような場合、ファイルの冒頭に目次を作成しておくと非常に便利です。

/*===========================================
【目次】
  1. 共通設定
  2. ヘッダー
  3. トップページ
    3-1. メインビジュアル
    3-2. サービス紹介
    3-3. 料金プラン
  4. 下層ページ共通
  5. フッター
===========================================*/

目次があることで、CSSファイル全体の構造を一目で把握できます。また、新しくチームに加わったメンバーや、久しぶりにコードを見返す際にも、どこに何が書かれているかがすぐに理解できるでしょう。

テスト環境用のコードを記載する

Webサイトの開発では、テスト環境と本番環境でディレクトリ構造やファイルパスが異なることがよくあります。そのような場合、環境ごとに切り替えが必要なコードをコメントアウトで残しておくと、スムーズな運用が可能になります。

/* テスト環境用 */
/*background-image: url("../images/hero-bg.jpg");*/

/* 本番環境用 */
background-image: url("/wp-content/uploads/2024/hero-bg.jpg");

こう書いておけば、テスト環境でデバッグする際にコメントアウトを切り替えるだけで対応できます。また、チームメンバーがどちらの環境で作業しているかも一目で判断できるため、ミスを防ぐ効果もあります。

特定のブラウザ対応や条件を注記する

ブラウザによってCSSプロパティの対応状況が異なるため、特定のブラウザ向けの記述が必要になる場面があります。このような場合、どのブラウザのための記述なのかをコメントで明示しておきましょう。

.container {
  display: -webkit-flex; /* Safari対応 */
  display: -ms-flexbox;  /* IE10,11対応 */
  display: flex;
}

.box {
  width: 33.33333%; /* 未対応ブラウザ用フォールバック */
  width: -webkit-calc(100% / 3); /* Safari対応 */
  width: calc(100% / 3);
}

このように書けば、後からコードを見た際に「なぜ同じようなプロパティが複数書かれているのか」という疑問を解消できます。また、サポート対象ブラウザが変更になった際、不要なコードを安全に削除する判断材料にもなるでしょう。

要素や処理内容を記載する

擬似要素を使った複雑な装飾や、特定の動作を実装している箇所では、以下のように「何を表現しているのか」をコメントで説明しておくと理解しやすくなります。

.speech-bubble::before { /* 吹き出しの三角形部分 */
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ffffff transparent transparent transparent;
}

.speech-bubble::after { /* 吹き出しの影部分 */
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 11px 11px 0 11px;
  border-color: #cccccc transparent transparent transparent;
}

/* クリックでアコーディオンを開く */
.accordion input:checked + .accordion__content {
  max-height: 500px;
  opacity: 1;
  transition: max-height 0.3s ease;
}

特に擬似要素の「::before」や「::after」を複数使って装飾している場合、どちらがどの役割なのか分からなくなりがちです。また、JavaScriptと連動した動的な処理では、どのような条件で発火するのか書いておくことで、後に修正する際に重宝するでしょう。

ここまで、実務でのコメントアウト活用方法を見てきましたが、これらはHTML/CSSの基礎があってこそ活きるテクニックです。より実践的なフロントエンド開発スキルを体系的に学びたい方には、DMM WEBCAMPの「フロントエンドコース」がおすすめです。

HTML/CSSの基礎から、Vue.jsやFirebaseといった現場で使われる技術まで幅広くカバーしており、週2回のマンツーマンメンタリングでしっかりサポートを受けながら学習できます。

リアルタイムチャットアプリケーションなど、ポートフォリオにも使える実践的な課題に取り組めるため、転職やキャリアアップを目指す方にも最適な内容です。

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

CSSのコメントアウトが効かない原因と対処法

コメントアウトは便利な機能ですが、使い方を誤るとエラーが出たり、意図した通りに動作しなかったりすることがあります。特に初心者のうちは、コメントアウトの記号の使い方や文字コードの設定でつまずくケースが多いでしょう。

ここでは、よくあるトラブルとその解決方法を見ていきます。

エラーが起きる場合の原因と対処法

CSSのコメントアウトでエラーが発生する最も多い原因は、コメントアウトの中にさらにコメントアウトの記号を書いてしまうことです。

/* エラーになる書き方 */
/*
.header {
  background-color: #ffffff;
}

/* この部分を無効化 */
.nav {
  display: flex;
}
*/

このように、すでに「/*」で始まっているコメントアウトの中に、再び「/*」を書いてしまうと、コメントアウトの構造が壊れてしまいます。CSSではコメントアウトをネスト（入れ子に）することができません。

対処法としては、一時的に無効化したい部分がある場合、内側のコメント記号を削除するか、別々のコメントアウトブロックに分けて記述します。

/* 正しい書き方 */
/*
.header {
  background-color: #ffffff;
}

この部分を無効化
.nav {
  display: flex;
}
*/

また、コメントアウトの終了記号「*/」を書き忘れた場合も、それ以降のすべてのコードがコメントとして扱われてしまい、スタイルが適用されなくなるので注意しましょう。

文字化けする場合の原因と対処法

CSSファイルに日本語でコメントを書いた際、ブラウザで確認すると文字化けして読めなくなることがあります。原因は主に、ファイルの文字コードが適切に設定されていないことにあります。

現在のWeb制作では、ファイルの文字コードは「UTF-8」で統一するのが一般的です。もし文字化けが発生している場合は、CSSファイルがUTF-8で保存されているかを確認しましょう。

多くのテキストエディタでは、画面の右下に現在の文字コードが表示されています。Visual Studio Codeの場合、右下のステータスバーに「UTF-8」や「Shift-JIS」といった表記があるので、そこをクリックして「UTF-8で保存」を選択すれば解決します。

また、HTMLファイル側の<head>タグ内に文字コードの指定がない場合も、文字化けの原因になることがあります。

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

このように<meta charset=”UTF-8″>が記述されていることを確認してください。これにより、ブラウザがCSSファイルも含めて正しい文字コードで読み込むようになるはずです。

まとめ

CSSのコメントアウトは「/*」と「*/」で囲むだけのシンプルな機能ですが、これだけでもコードの可読性や保守性は大きく変わります。

最初は面倒に感じるかもしれませんが、丁寧にコメントを残す習慣をつけることで、ゆくゆく自分や他のメンバーが作業しやすいコードとなります。ぜひ今日から実践してみてください。

CSSをさらに深く学び、モダンなフロントエンド開発に挑戦したい方には、DMM WEBCAMPの「フロントエンドコース」がおすすめです。HTML/CSSの基礎から、Vue.jsやFirebaseといった実務で使われる技術まで、体系的に学習できます。

週2回のマンツーマンメンタリングと、いつでも質問できるサポート体制が整っているため、未経験の方でも安心して学習を進められます。リアルタイムチャットアプリケーションの開発など、実践的なスキルを身につけたい方はぜひチェックしてみてください。

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする