【実例付】すぐに使えるCSS コメントアウトの書き方

（最終更新日：2023年9月）

✔このような方へ向けて書かれた記事となります

「CSSコメントアウトの使い方を知りたい」
「CSSコメントアウトがどのように機能するのかを理解したい」
「実際のCSSコメントアウトの例を見て学びたい」

✔当記事を通じてお伝えすること

• CSSコメントアウトの基本的な知識
• CSSコメントアウトの書き方や適切な使い方
• 具体的なCSSコメントアウトの実例

当記事では、CSSコメントアウトの基本から応用的な使い方まで、具体的な実例を交えて詳細に解説していきます。

ぜひ最後までお読みいただき、CSSコメントアウトの活用法をマスターしてください。

コメントアウトとは

こちらでは、「コメントアウト」についてお伝えしていきます。

コメントアウトは、コード中で何をするためのものかを説明したり、一時的にコードを無効化するための手段。

以下の内容をご説明します。

• コメントアウトの役割と目的
• CSSと他の言語での違い

コメントアウトの役割と目的

コメントアウトは、コーディング時にとても重要な役割を果たします。

プログラムの一部を一時的に無効化したり、他の開発者や未来の自分へのメモとしてコードの意図を説明したりすることです。

コードの理解が容易になり、デバッグやメンテナンスが効率化されます。

CSSと他の言語での違い

一般的に、多くのプログラミング言語でコメントアウトを使えます。

その構文は言語によって異なることがあります。

たとえば、JavaScriptでは以下がコメントアウトです。

• “//” ：1行コメント
• “/*” と “*/”：間に記述されたものが複数行コメント

CSSでは、“/*” と “*/” のペアだけがコメントアウトを示します。

“//” は使用できません。

CSSでコメントアウトの使い方

次に、CSSでコメントアウトをどのように使うかについて解説します。

具体的な使い方を見ながら、手を動かしてみてください。

• コードの動作説明
• エリア別の区分
• 編集履歴を残す

コードの動作説明

CSSでは、コメントアウトは特定のコードが何をするためのものなのか、どのように動作するのかを説明するために使用されます。

これはほかの開発者だけでなく、自分自身が後でコードを見直したときにも役立つものです。

エリア別の区分

コメントアウトの役割のとして、エリア別の区分を明示することが挙げられます。

その理由は、CSSファイルが大きくなると、それぞれの部分が何を表しているのか一目でわかるようにすることです。

編集履歴を残す

コメントアウトは、編集履歴を記録するのにも役立ちます。

とくに、バージョン管理システムを使用していない場合や、小さな変更を追跡したいときに便利です。

例えば以下のような内容を記述します。

• 変更した日付
• 誰が変更したか
• 何のために変更したか

CSSコメントアウトの構文

ここでは、CSSのコメントアウトの具体的な書き方を紹介します。

• 1行コメントの方法
• 複数行コメントの方法
• コメントショートカットキー

1行コメントの方法

CSSでは、1行コメントを書くためには /* と */ の間にコメントを記述します。

たとえば、以下のとおり。

/* これは1行コメントです */

複数行コメントの方法

複数行のコメントも同じく /* と */ の間に記述しますが、複数行にわたることが可能です。

たとえば、以下のように書けます。

/* 
これは複数行のコメントです。
コメントは自由に改行して記述できます。
*/

コメントショートカットキー

多くのテキストエディタでは、ショートカットキーを使って簡単にコメントアウトを挿入できます。

たとえばVS Codeでは、選択したテキストに対して 、自動的にコードをコメントアウト化可能です。

Ctrl + /

Macでは Cmd + /です。

注意点とトラブルシューティング

CSSのコメントアウトを使う上での注意点と、コメントアウトが正しく動作しない場合のトラブルシューティングについて見ていきましょう。

• コメントアウト際の注意
• コメントアウトが効かない場合の対処法

コメントアウト際の注意

コメントアウトは便利なツールですが、使用する際は注意が必要です。

例えば、CSSのコメントアウトの構文はほかの言語と異なるため、誤った構文を使用するとエラーが生じます。

またコメントアウトを用いて重要なコードを無効化した場合、その情報を忘れてしまうと、プログラムの挙動が予期しないものになることもあります。

適切なコメントとともに使用することが重要です。

コメントアウトが効かない場合の対処法

コメントアウトがうまく機能しない場合、以下をチェックしてください。

• 構文が正しいか確認してください。CSSでは /* と */ の間にコメントを入れる必要があります。
• コメントアウトした範囲内に閉じタグがない場合、それ以降のコード全てがコメントアウトされてしまうことがあります。

これらを確認し、必要なら修正しましょう。

実践的なコメントアウトの活用例

さて、ここからは実際のCSS開発でのコメントアウトの活用例を見ていきましょう。

• 見出しとして使う
• テスト環境用コードの管理
• 対応ブラウザ情報の記載
• HTML要素の整理
• 処理内容の詳細

見出しとして使う

CSSファイルが大きくなると、どの部分が何をしているのかを一目で見分けることが難しくなることがあります。

コメントアウトを見出しとして使い、コードを区分けしましょう。

コードの見通しが良くなり、必要な部分をすぐに見つけられます。

テスト環境用コードの管理

コメントアウトは、開発中のテストコードを管理するのにも役立ちます。

開発段階では、一時的に特定のコードを無効化したり、試験的なコードを挿入したりが可能です。

これらのコードは、コメントアウトを利用して明示的に管理できます。

対応ブラウザ情報の記載

CSSは、ブラウザによって異なる挙動を示すことがあります。

特定のブラウザに対応するためのコードを書くとき、それがどのブラウザのためのものなのかをコメントアウトで記載しましょう。

そのコードがなぜ存在するのか、将来的にそのコードが不要になったときに安全に削除できるかどうかが明確になります。

HTML要素の整理

HTMLと連携して使われるCSSでは、どのスタイルがどのHTML要素に対応しているのかをコメントアウトで記載することもあります。

とくに大規模なプロジェクトでは、HTMLファイルとCSSファイルが別々に管理され、一見して対応関係がわからないこともあるからです。

そうした場合、コメントアウトは大変役立ちます。

\処理内容の詳細

CSSのコードのひとつひとつが具体的にどのようなスタイルを適用するためのものなのか、詳細な説明をコメントアウトで書くこともあります。

例えば、特定の色コードが何を意味するのか、特定の数値がなぜその値に設定されているのか等を記載しましょう。

まとめ

当記事でお伝えしたことは以下のとおり。

• CSSコメントアウトの基本と使い方
• 注意点と活用例の把握
• より良いコードを目指す意識

コメントアウトはコードの可読性を高め、メンテナンスを容易にする重要なツールです。

しかし、適切に使用しなければ、予期せぬエラーを引き起こすこともあります。

構文を正しく記述し、必要な閉じタグを忘れずに記述することが重要です。

また、具体的な活用例を理解し、コメントアウトを多角的に活用しましょう。