実行できるCSSドキュメント: CSS コメント

Q: CSS でコメントを書くにはどうすればいいですか？

テキストを / と / で囲みます: / This is a comment /。1 行でも複数行でも同じ書き方で、スタイルシート内の空白を置ける場所ならどこにでも書けます。

Q: CSS で // はコメントとして使えますか？

使えません。CSS には 1 行コメントがありません。// は次のセレクタや宣言の一部として読まれて無効になるため、ブラウザはそのルールや宣言をまるごと捨てます。Sass や Less などのプリプロセッサは // を受け付けますが、素の CSS では使えません。

Q: CSS のコメントは入れ子にできますか？

できません。コメントは最初の / で終わるので、/ a / b / c / は b の後で終わり、残った c / が不正な文字列になって次のルールを壊します。

Q: CSS をコメントアウトするショートカットは？

VS Code を含むほとんどのエディタでは、Windows と Linux は Ctrl + /、macOS は Cmd + / で選択した行を / / で囲めます。もう一度押すとコメントが外れます。

CSS コメントの書き方: /* */ の使い方とコメントアウト

CSS のコメントの書き方は /* ... */ の 1 種類だけで、1 行でも複数行でも使えます。コメントを書ける場所、ルールのコメントアウト、// や入れ子のコメントが次のルールを黙って壊す理由を解説します。

このページのコードはエディタで実行できます - 編集してすぐに結果を確認できます。

著者 Kevin Spektor, Co-founder & CTO

公開日：Sep 24, 2026

CSS コメントの書き方

CSS のコメントは /* で始まり */ で終わります。その間にあるものは、1 行でも 20 行でもすべてブラウザに無視されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

書き方はこの 1 種類だけです。CSS には別の 1 行コメントはありません。

コメントを書ける場所

コメントは空白を置ける場所ならどこにでも書けます。ルールの間、宣言の間、値の後、セレクタリストの中などです。.css ファイルでも、<style> 要素でも、style 属性でも同じように使えます。

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

HTML のコメント  はマークアップ用で、CSS には使えません。2 つの書き方の比較は HTML コメントのページにあります。

コードをコメントアウトする

コメントの日常的な使い方は、宣言を削除せずに無効にして、その効果を確かめることです。/* */ で囲みます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

border の行を囲む /* と */ を消すと、オレンジ色の枠線が現れます。ルール全体をコメントアウトするときも同じで、セレクタの前に /*、閉じ波かっこの後に */ を置きます。

ほとんどのエディタではこの切り替えができます。行を選択して Ctrl + / (macOS は Cmd + /) を押します。

// で CSS が壊れる理由

// は JavaScript、Sass、Less ではコメントなので、コメントに見えます。しかし CSS ではただの 2 文字で、後に続くものの一部になります。するとブラウザは無効なセレクタとみなし、次のルールをまるごと捨てます。エラーメッセージは出ません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

ブラウザは // this is NOT a comment .one を 1 つのセレクタとして読みました。これは無効なので、.one のルールがまるごと捨てられています。この行を /* this is a comment */ に変えると緑の背景が戻ります。

コメントは入れ子にできない

コメントは最初の */ で終わります。すでにコメントを含むコードを囲むと、外側のコメントが途中で終わってしまいます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

コメントを含むブロックをコメントアウトするときは、先に内側のコメントを削除するか短くしましょう。

コメントでスタイルシートを整理する

長いスタイルシートは、セクションの見出しを付けると読みやすくなります。よく使われる書き方です:

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

コメントはファイルの一部としてすべての訪問者に送られ、ページのソースにも表示されます。パスワード、社内の URL、公開したくないメモは書かないでください。