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

CSSのコメントアウト方法と使い方 CSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスはSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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コーディングに活用してみてください。