CSSでは、コードを読みやすく管理しやすくするために「コメント」を使います。
コメントはブラウザに無視されるため、メモや説明を書いたり、コードを整理する時に使われます。
CSSが複雑になる前に、コメントの正しい書き方と管理方法を覚えておくことで、
後の作業が非常に楽になります。
CSSコメントとは？
CSSコメントとは、ブラウザに無視される「メモ書き」のことです。
コードの説明を残したり、複雑な部分の理解を助けたり、後で修正しやすくするために使います。
CSSは長くなるほど管理が難しくなるため、コメントを使った整理は初心者のうちから身につけておくべき重要スキルです。
CSSコメントの書き方（基本構文）
CSSコメントの書き方は1種類だけです。
/* ここにコメントを書く */
例：
/* 見出しの色を指定 */
h2 {
color: #E64A19;
}
ブラウザは /* */ 内を読み飛ばすため、表示や動作には影響しません。
コメントの実用例（よく使うパターン）
1. コードの区切り・セクション分けに使う
CSSが長くなるほど、どこで何をしているか分かりにくくなります。
セクションごとにコメントを書いておくと管理しやすくなります。
/* ==========================
見出しデザイン
========================== */
h2 {
margin-bottom: 20px;
color: #E64A19;
}
2. 特定の処理の説明を書く
後で読み返したときに分かるように、目的を書いておきます。
/* スマホ時はヘッダーメニューを非表示 */
@media (max-width: 768px) {
.header-menu {
display: none;
}
}
3. 一時的にコードを無効化（コメントアウト）
表示がおかしい時の「原因調査」に非常に便利です。
/*
p {
color: red;
}
*/
このように一旦オフにして動作を確認できます。
CSSコメントを書くときの注意点
1. コメントは入れ子にできない
以下のような書き方は NG です。
/* コメント開始
/* これはダメ */
コメント終了 */
CSSは 入れ子コメント に対応していません。
2. コメントの書きすぎは逆効果
コメントだらけだと逆に読みにくくなります。
必要な部分だけ
「短く・明確に」
を書きます。
3. WordPressテーマに合わせた注意
カスタマイズ時、
- テーマstyle.css
- カスタムCSS欄（エディター）
どちらでもコメントは問題なく使用できます。
ただし、テーマのCSSに長すぎるコメントを入れると、
読み込みサイズが増えて表示速度が低下する可能性があるため注意。
効率が上がるコメント管理ルール（おすすめ）
1. セクション区切りに統一フォーマットを使う
プロがよく使うスタイル：
/* -----------------------------------
セクション名
----------------------------------- */
統一すると、一覧性が高まり、検索しやすくなります。
2. メンテナンス日や用途を記述する
/* 2025/02/15 見出しデザイン統一のため修正 */
後から見ても何をしたか分かるため便利です。
3. 複数人で共有するときは必須
チーム制作では、コメントがコミュニケーションになります。
- 「この理由でこのCSSにしている」
- 「ここは上級者向けの調整」
などの説明を書いておくとトラブルを防げます。
まとめ
この記事では CSSコメントの使い方と管理方法を紹介してきました。
- コメントは
/* */で囲む - ブラウザには表示されず、メモとして使える
- セクション区切り・説明・コメントアウトに便利
- 入れ子は不可、書きすぎは逆効果
- Cocoon子テーマでも問題なく利用可能
CSSが複雑になる前に、コメント管理のルールを作っておくことが、
“読みやすいCSS” を書くための重要なポイントになります。
著者からのひと言
コメントは「未来の自分のため」に書く最強ツールです。
短くてもいいので、少しルールを決めるだけで CSS の管理が劇的に楽になります。
次回の記事は「文字サイズと font-size の基本」です。
