CSSのコメントアウト方法と使い方！初心者向けサンプルコードと応用例

はじめに

CSSを書いていると、不要な部分をコメントアウトしたくなること、ありますよね？

しかし初心者にとってはコメントアウトの方法がわからず、困ってしまうこともあります。

そこで本記事では、CSSのコメントアウト方法と使い方について、初心者向けに詳しく解説します。

具体的なサンプルコードとともに、応用例も紹介しているため、CSSをより効率的に書くことができるようになると思います。

●CSSのコメントアウトとは

CSSのコメントアウトとは、CSSコード内にコメントを残すことで、その部分の意味や目的を説明することができます。

コメントアウトをすることで、自分自身や他の人が後からコードを読んだ際に、わかりやすくすることができます。

また、コメントアウトすることで、一時的にコードを無効化することもできます。

これは、特定のスタイルが必要なくなった場合や、一時的にスタイルを変更したい場合などに役立ちます。

●コメントアウトの基本的な書き方

CSSのコメントアウトには、2つの方法があります。

○行コメントアウト

行コメントアウトは、1行だけコメントアウトする方法です。

行の先頭に「//」を記述し、その後にコメントを書きます。例えば、以下のように記述します。

/* この部分はコメントアウトされます */
body {
  background-color: white;
  // font-size: 16px; この部分もコメントアウトされます
}

○ブロックコメントアウト

ブロックコメントアウトは、複数行をコメントアウトする方法です。

コメントの開始と終了に「/」と「/」を使用し、その間にコメントを書きます。

例えば、次のように記述します。

/* 
  この部分は
  複数行で
  コメントアウトされます
*/
body {
  background-color: white;
  /*
    font-size: 16px;
    color: red;
    この部分も
    複数行で
    コメントアウトされます
  */
}

●コメントアウトの応用例

CSSのコメントアウトは、単に説明するだけでなく、実際に役立つ応用例もあります。

次にその例を紹介します。

○スタイルの一時的な無効化

スタイルを一時的に無効化したい場合、コメントアウトを使うことができます。

例えば、次のようなコードがあったとします。

body {
  background-color: white;
  font-size: 16px;
}

このうち、フォントサイズのみ一時的に無効化したい場合、次のようにコメントアウトします。

body {
  background-color: white;
  /* font-size: 16px; */
}

これにより、フォントサイズのスタイルが無効化されます。

○スタイルの変更のテスト

スタイルを変更する場合、その変更が正しく動作するかどうかを確認する必要があります。

その際に、コメントアウトを使うことができます。

例えば、次のようなコードがあったとします。

body {
  background-color: white;
  font-size: 16px;
}

ここで、フォントサイズを変更したい場合、一旦コメントアウトして、新しいスタイルを書いてみます。

body {
  background-color: white;
  /* font-size: 16px; */
  font-size: 20px;
}

このようにすることで、変更前のスタイルと変更後のスタイルを比較して、正しく動作するかどうかを確認することができます。

まとめ

CSSのコメントアウトについて、基本的な書き方や応用例について紹介しました。

コメントアウトは、自分自身や他の人が後からコードを読んだ際に、わかりやすくするために役立ちます。

また、一時的にスタイルを無効化することや、スタイルの変更のテストにも役立ちます。

是非、今後のCSSコーディングに活用してみてください。