CSSのコメントの書き方を解説

CSSのコメントの書き方を解説

CSSファイルには、コード以外に「コメント」を記述することが可能です。

コメントはメモのような使い方をすることができ、ファイルのどこに何が書かれているのかを分かりやすくするために利用されることが多いです。

とは言え、WordPressでブログをつくっている人の中には、CSSは初心者でコメントの書き方や使い方がよく分からないという人もいるのではないでしょうか。

そこで、ここではCSSのコメントの書き方や使い方について説明します。

 

コメントの書き方

それでは、はじめにCSSのコメントの書き方について説明します。

CSSのコメントは「/* ~ */」の間に記述します。

つまり、「半角スラッシュ」と「半角アスタリスク」「半角スペース」で囲う形でコメントを書くということです。

たとえば、一行でコメントを残す場合には、以下のような書き方をすればOKです。

/* サイドバーの背景色 */
aside {
background-color: #fff;
}

もしくは、改行して以下のような書き方をすることも可能です。

/* 
サイドバーの背景色 
*/

aside {
background-color: #fff; 
}

上記のようにCSSファイルにコメントを記述することを「コメントアウト」と言います。

この「/* ~ */」でコメントアウトされた部分は、サイトの表示には影響を与えないので、CSSファイルにメモや説明を残すなどの形で使うことが可能です。

 

使用例

次に、コメントアウトはどんな時に使用するのか、例を挙げて説明します。

 

見出し代わりに使う

まず、コメントを見出し代わりにして使う場合について見ていきます。

/* 記事部分の背景色 */
article {
	background-color: #fff;
}

/* サイドバーの背景色 */
aside {
background-color: #fff;
}

上記のように、コメントを見出しのように記述することができます。

そうすると、ファイルの中のどこに何が書かれているのかを分かりやすくなります。

つまり、CSSファイルはコードの量が膨大になりがちなので、コメントを使うと、どの辺りにどの部分のスタイルが書かれているかが分かりやすくなり、ファイルの編集がしやすくなるということです。

たとえば、CSSにあまり詳しくない場合、別のサイトで紹介されているコードをコピーペーストしてデザインを整えることもあるかと思いますが、そんな時にも、コメントアウトしてどこに何のコードが書かれているかを後で分かるようにしておくと便利です。

 

説明を記述する

次に、セレクタや値の説明を記述する場合について見ていきます。

.box  {
    width: 300px;/* ボックスの幅 */
    height: 540px;/* ボックスの高さ */
    text-align: center;/* 文字を中央寄せにする */
    box-shadow: 2px 2px 6px #bac1c7;/* ボックスに影をつける */
    background-color: #F9CBC0;/* 背景色を指定 */
    
}

上記のように、CSSファイルに記述したそれぞれのスタイルの説明をコメントで残しておくことができます。

すると、そのコードが何のために書かれているのかが分かりやすくなるため、何人かで更新作業を行う場合などにも便利です。

 

コードを一時的に無効にする時

次に、コードを一時的に無効にする場合について見ていきます。

/* サイドバーの背景色 
aside {
background-color: #fff;
}
*/

/* サイドバーの背景色 */
aside { 
background-color: #f1f9f9; 
}

上記のように、CSSファイルにある一部のコードを「/*  */」で囲い、その部分をコメントアウトすることができます。

そうすると、一旦そのコードは無効になり、サイトのデザインには影響しない状態になりますが、「/*  */」を削除すれば元に戻すことが可能です。

コードを削除するのではなく、一旦無効にするだけで残しておきたい場合に使うと便利です。

 

まとめ

以上、CSSのコメントの書き方について説明しました。

CSSは「/* ~ */」で囲うようにしてコメントを記述することが可能です。

コメントを記述することで、どこにどのスタイルの書かれているのかを見つけやすくしたり、何のためにそのスタイルが書かれているのかを分かりやすくすることができます。

HTML・CSSでサイト制作をする時だけではなく、WordPressのブログでデザインを変えたい時に子テーマのCSSを編集するというケースにも、コードの管理がしやすいように、必要に応じてコメントを使うことをおすすめします。

cssの書き方カテゴリの最新記事