CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

cssのコードを綺麗に書いて行く上で欠かせないコメントアウトについての解説です。1行での書き方、複数行での書き方などの基本的な内容を学んだあとにプロの現場ではどのようにcssのコメントアウトが活用されているかの事例を4つ解説していきます。

本記事を読むことでcssのコードをよりわかりやすく、綺麗に書くことができるようになるはずです。

コメントアウトとは？

コメントアウトとはテキストエディタ側（コード側）に書くメモのようなもので、実際のcssのコードのようにブラウザ側（私たちがみている側）には表示されません。

<p>テキスト</p>

/*この部分がコメント*/
p{
  color : red;
}

cssのコードに「/*この部分がコメント*/」と書かれています。その部分はブウラザ側には反映されず、color : red;という文字色を赤くするというcssだけが反映されていますね。こういったものをコメントアウトといいます。

HTMLとCSSではコメントアウトのルールが違う

コメントアウトはどのマークアップ言語・プログラミング言語にもありますが、それぞれ書き方のルールが異なります。そのため、HTMLとCSSもコメントアウトの書き方が全く違います。

HTMLでのコメントアウトの書き方は以下の記事でしっかりと学習することができます。

HTMLとCSSどちらのコメントアウトもとても簡単なのでこちらの記事を読み終わった後に読んでもOKです。

コメントアウトの書き方

それではcssのコメントアウトの書き方をみていきましょう。書き方は2パターンありますがとっても簡単に覚えられます。

1行で書く場合

/*comment out*/

1行でコメントアウトを書く場合

「/*〜*/」の間にコメント内容を書きます。

キーの位置はキーボートの右半分にあり、入力状態を半角英数字にした時に

• 「め」= /
• 「け」= *

を打つことで入力できます。

複数行で書く場合

/*
複数行のコメント
複数行のコメント
*/

/*複数行のコメント
複数行のコメント*/

コメントアウトに使ってはダメな文字はある？

cssのコメントアウトでは内容に含んではいけない記号はありませんが「/*」と「*/」だけはコメントアウトの途中で書くとエラーが起きるので注意しましょう。また、英数字（全角半角両方）・日本語どちらも使用することができます。

コメントアウトの実践的な使い方

コメントアウトの書き方を覚えたら実際のプロのwebサイト制作の現場ではどのようにコメントアウトが活用されているか見てみましょう。

セクションごとに見出しをつける

基本的にwebページは1つのページの中でいくつかのセクション（内容）にわかれています。

上記のようなフォトスタジオのwebページを例にするとページ上から

• メインビジュアル（ページを開いた時、最初に目にする部分）
• photostudioとは（サービスの概要を説明する箇所）
• 撮影プラン

というようなセクションでページ構成が分かれています。実際にcssを書いて行く時は、このようにセクションごとにcssをまとめて書いていきます。そして各セクションの書き出しの部分にコメントアウトで見出しをつけることでより見やすいcssを書くことができます。以下の例を見てみましょう。

/*---------------------------------

  メインビジュアル

---------------------------------*/
.first-view{
  background : url(bg-firstview.png);
}


/*---------------------------------

  photostudioとは？

---------------------------------*/
.about{
  background : url(bg-about.png);
}

/*  
  ボタン
---------------------------------*/
.btn-more{
  background-color : #e057c4;
  color : white;
}


/*---------------------------------

	撮影プラン

---------------------------------*/
.plan-each{
  float : left;
  width : 460px;
}

/*——————————————————————
大見出し
——————————————————————*/

/*
小見出し
——————————————————————*/

セクションごとの目次をつける

cssは普通のwebサイト制作なら1000行以上になることは”ざら”です。そのためセクションごとに見出しをつけたことでわかりやすさは増しましたが長くなってしまえばその分見出しを探すのも一苦労ですよね。

/*---------------------------------
  
  0.header

  1.index.html
    1.1メインビジュアル
    1.2photostudioとは？
    1.3撮影プラン

  2.footer

---------------------------------*/

具体的な処理内容を記述する

パッと見て「なぜそのスタイルが適用されているのか？」を判断しにくいコードというのはよくあります。

わからないまま消して、後でそれが原因でバグが起きるのもいやなので、本当は無駄なコードなのに消さないまま残しておく…

こういった場面は時間が経った後に自身でcssファイルを編集する特や複数人での作業をする時によく遭遇します。

.box{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /*上下左右中央寄せ*/
}

ただ、わかりにくいコードというのは基本的に、書き手に原因があることがほとんどです。

cssがコメントアウトだらけになるのを避けるため、この形式での補足コメントは必要最低限にしてわかりやすく簡潔なcssをかけるようこころがけましょう。

一時的にcssの処理を無効化する

書いてあるcssの一部を無効化してブラウザ側で変化を確認するということもコメントアウトのテクニックの一つです。

.g-nav{
  float:right;
}

/*.g-nav li{
  float: left;
  font-size: 14px;
}*/

.g-nav a{
  font-weight: bold;
  display: block;
  padding:20px 0;
}

学習のまとめ

コメントアウトは勤める会社や個人によって書き方のルールが統一されていたりするので、基本を踏まえた上でそのルールに従うようにしましょう。複数の人が共通の認識を持っているとそれだけ効率的に作業をすることができますからね！

さて、今回学習したことを定着させるためにまとめを流し読みしておきましょう。

• cssとhtmlのコメントアウトは違う
• 「/*」と「*/」で囲った部分がコメントアウトされる
• 全ての記号を使ってOK。英数字と日本語もOK。
• セクションごとの見出しとして使う
• 見出しと目次はセットでコメントする
• コメントアウトでわかりにくいコードの補足をする
• 一時的にcssのコードを消してそのコードの役割を確認したりする

以上です。